[B! JavaScript][javascript][scroll] shibatasticのブックマーク

ScrollReveal 4

JavaScript library to animate elements as they scroll into view.

shibatastic 2017/01/18

リンク

Bootstrapのjsプラグインの一つ，Scrollspyの扱い方少しまとめ Scrollspyを紹介したのでついでに扱い方についても少し．Bootstrap-Scrollspy.jsのダウンロードとデモはこちらから． Bootstrap-scrollspy.js Scrollspyを使うと指定のスクロール位置に入ったときイベントを起こすことができます．実際見た方が早いです．とりあえず使ってみるサンプルはこちら使用するにはまずbodyにいじります． <body data-spy="scroll"> そして#navbarとその中にul.navクラスを用意します． <div id="navbar"> <ul class="nav"> <li><a href="#post1">Post 1</a></li> <li><a href="#post2">Post 2</a></li> <l

shibatastic 2014/10/28

リンク

[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal

デモページフッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述

shibatastic 2014/05/26

リンク

AniJS - A ScrollReveal Demo

ScrollReveal is an AniJS helper function, that allows you to animate several components when they enter the viewport. If you don't now nothing about AniJS, you can find documentation an examples at the official site. If: scroll, on: window, do: animation, to: any element

shibatastic 2014/05/26

リンク

CSS3で簡単！スマホ向けWebページのスクロールを激派手にできるstroll.jsとは

CSS3で簡単！スマホ向けWebページのスクロールを激派手にできるstroll.jsとは：HTML5アプリ作ろうぜ！（9）（1/2 ページ）オープンソースのJavaScriptライブラリ「stroll.js」について、概要と使い方を紹介します。CSS3のアニメーションを駆使しているので動きが軽く、スマホ向けWebページのスクロールに派手なエフェクトを簡単に追加できます。最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するのは「stroll.js」です。 CSS3のアニメーションを駆使するstroll.jsとは stroll.jsはオープンソース（ライセンスMIT）のスマートフォン用スクロールライブラリ（JavaScr

shibatastic 2014/02/27

リンク

[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js

スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。デモのアニメーション scrollReveal.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして</body>の上あたりに記述します。 jQueryなど他のスクリプトは必要ありません。 <body> ... ... <script src="js/scrollReveal.js"></script> </body> Step 2: HTML スクリプトをセットしたら、あとはアニメーションで表示させる要素に「data-scrollreveal」を追加するだけです。 <h1 data-scrollr

shibatastic 2014/01/27

リンク

はてなブックマーク

タグ

関連タグで絞り込む (0)

JavaScriptとjavascriptとscrollに関するshibatasticのブックマーク (6)

お知らせ

今週のはてなブックマーク数ランキング（2025年8月第4週）

今週のはてなブックマーク数ランキング（2025年8月第3週）

はてなブックマークは20周年を迎えました

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス