パララックス効果とは
パララックス効果は、2つの要素を別々に動かすことで視覚的な効果を与えることだ。
iPhoneを動かすと、iPhoneのホーム画面上でアプリのアイコンが微妙にずれる、あの効果だ。
視差効果などとも言う。
javascriptが数多く公開されており、それを実装することで簡単に実現できる。
cssのbackground-attachment: fixed;でも実現できそうなのだが、残念ながらiosにバグがありiPhoneで見た時に背景画像が大きく表示されてしまう。
今回は、parallax-background.jsを使った。
MIT License。
parallax-background.js is a background scrolling effect which is designed for you to create beautiful and smooth parallax websites. Enjoy, it’s so simple!
parallax-background.jsの導入
parallax-background.jsを使うのは、簡単だ。
ダウンロードして、parallax-background.min.jsを自分のサイトにアップロードしておく。
あとはjqueryとparallax-background.jsを読み込めば、準備完了だ。
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="../wp-content/themes/stinger8-child/js/parallax-background.min.js"></script>
スクリプトでparallax-background.jsにクラス名を与える。
<script><br />
(function ($) {<br />
$('.parallax-window').parallaxBackground();<br />
})(jQuery);<br />
</script>
実装
今回は2番目のブロックの背景画像を下方向に動かすことにした。
ブロックのクラス名に、先ほど設定した名前を記入すれば動く。
パラメーターはdata-に続けて書いていけばいい。
<div id="amiens-02" class="amiens-box60 amiens-font-noto parallax-window" data-parallax-bg-image="https://amiens.jp/wp-content/uploads/2019/05/01-2x.jpg" data-parallax-direction="down" data-parallax-speed="1">ECサイトをオープンしたものの、
売上に悩んでいませんか？</div>
cssは、こうした。
.amiens-box60{
box-sizing: border-box;
max-height: 60%;
max-height: 60vh;
color:white;
font-size:1rem;
padding:20% 30px;
padding:20vh 30px;
text-align: center;
text-shadow: 2px 2px 2px #666;
}
同様に、4番目のブロックにもパララックス効果をかける。
動きの調整は試行錯誤するしかない。
そのへん、ちょっとやりにくい。
