軽量で実装が簡単な「simpleParallax.js」を使い、パララックス効果を与える方法を解説します。
HTMLの記述もシンプルです。
◆まずはデモページをご覧ください。
デモページを見る
解説です
◆公式サイトからファイルをダウンロード
下記URLの「Download」ボタンクリックでファイルをダウンロードします。
ファイルを解凍すると「dist」フォルダがありますので、「simpleParallax.min.js」を読み込む場所に保存します。
◆ファイルの読み込み
ソース
<script src="js/simpleParallax.min.js"></script>
「simpleParallax.min.js」を読み込みます。パスは任意に変更してください。
◆HTML
ソース
<img class="thumbnail" src="img/image.jpg" alt="image">
<script>
var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);
</script>
パララックスを表示する個所に「img 」を記述し、「</body>」の直前に「<script>」を記述します。
以上で実装は完了です。
◆設定
ソース
<script>
var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
delay: 0.8,
transition: 'cubic-bezier(0,0,0,1)'
});
</script>
この設定は不要ですが、デモページでは遅延効果を与えているため上記の記述になります。
その他設定内容は、公式サイトをご覧ください。
デモページでは、パララックスの高さ設定や画像の上にテキストを乗せたりしていますので、詳細をご希望の方は下記よりファイル一式をダウンロードしてください。
【 css39.zip（673KB） 】