【JavaScript】ページのスクロールに合わせて要素を動かす［ScrollReveal］の使い方
ページをスクロールさせて、非表示だった特定の要素がウィンドウ内に入ってきたときに、指定したアニメーションエフェクト付きで表示させるスクリプト［ScrollReveal］を紹介します。 以下の公式配布サイトのデモを見れば何が起きているのか一目瞭然ですね。 ScrollReveal : http://scrollrevealjs.org 要素がviewportに現れたタイミングで様々な表示処理を施すことができます。 なお各エフェクトや表示のタイミングはオプション設定で詳細に指定可能です。 ［ScrollReveal］の導入方法はカンタンです。 まずはGitHubから必要なファイルをダウンロードしてきます。 https://github.com/jlmakes/scrollreveal.js 「Download ZIP」というボタンをクリックすればスグにダウンロードがはじまります。 入手したzi
視差効果（パララックス）を簡単に導入できるJavaScript「skrollr」
twitter facebook hatena google pocket 昨今流行っている視差効果（パララックス）を導入してみたい人は多いのではないでしょうか。 Prinzhorn/skrollrを利用すれば比較的簡単に導入可能です。 sponsors 使用方法 Prinzhorn/skrollrからファイル一式をダウンロード。 <script type="text/javascript" src="skrollr.js"></script> <script type="text/javascript"> skrollr.init(); </script> <link href="skrollr.css" rel="stylesheet" type="text/css" /> あとはdivの中にdataで高さとエフェクトを指定していきます。 <div data-0="" //高さ0px
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Prinzhorn/skrollr: Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
