ポートフォリオ作品において、架空の映画告知サイトを作りたいと思い、pagePiling.jsを使ってスクロールがかっこよくなるようにしました。
ダウンロード
pagePiling.js
より、プラグインをダウンロード。
ダウンロードしたZIPファイルを解凍し、実装したい作品のローカルリポジトリにファイルを突っ込みます。
今回は動画背景にしたかったので、ダウンロードしたファイル内の「examples」から、「videoBackground」のhtmlを使用しました。
プラグインを読み込ませる
ファイルを突っ込んだら、HTMLのheadタグ内で、
・jquery.pagepiling.css
・jquery.pagepiling.min.js
を読み込ませます。
HTML
<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css">
<script type="text/javascript" src="../jquery.pagepiling.min.js"></script>
別で、jQueryを読み込んでおくのも忘れずに。
実装結果
簡単に実装することができました！
スクロールに動きがつくだけでも、かっこよくなりますね。