[simpleParallax.js]スクロール時に画像に視覚効果を与えるやつ

手っ取り早いパララックスは自作よりもライブラリとかjQueryとかのプラグインの使用だと思う。じゃあどれだよって話だけど。

これ。

simpleParallax.js - a JavaScript library for parallax effects
simpleParallax.js is a simple and tiny JavaScript library that adds parallax effects on any images.

やる

<img src="https://placehold.jp/800x1200.png" class="parallax" alt="">

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.1/dist/simpleParallax.min.js"></script>
<script>
  const image = document.getElementsByClassName('parallax');
  new simpleParallax(image);
</script>

<script>は</body>寄りに書くのが推奨。<head>でも動いたけど。

画像以外にも使える

動かしたい対象にclassを付けるだけでいいのでとても楽。で、simpleParallax.jsは画像以外にも使うことができる。テキストとか。でもまあ注意が必要。

動いてる感を出すにはscaleを効かすのがいいんで、画像なら解像度が耐えられる限りは違和感はないんだけど、テキストはサイズが変われば一発で違和感が出るので注意。

オプションで調整するとか、わざとと言い張れるデザインにしましょう。

思ったこと

パララックスには色々あるけど、世の中(と言っていいかわからんけど、自分の生活圏)が求めるパララックスは大体スクロール時にフェードインするか、これみたいにスクロール時に動く感じのやつ。動作量とか動作方向はとかは置いておいて、この2つがカバーできればとりあえず大丈夫って感じ。「パララックス」が意味する所がなんか結構広いんで厄介。

手段が確立してないだけでもこういうのは手間が異様に掛かるんで、自作するにせよプラグインを使うにせよ、手段は早めに確保しといたほうがいいと思った。

活用メモ

ガワを固定して中身だけ動かす的なやつ

オプションのoverflowは便利だけど扱いづらい。画像を設置した枠内で画像が動くようにするか、画像自体が動くようにするか、そこらへんをどうするかで組み方が変わる。

枠内で動かしたい場合。

scaleが効いてない(≒拡大してない)と「スクロール量より動いて面白いね」が機能しない。配置枠内で移動する高さが確保できてないからだと思う。なのでscaleは基本的に1.1以上で設定するのが安牌の感じ。で、実際に試せば分かるんだけど、適用した要素は元々の位置、サイズを基準にでかくなるわけで、cssで指定したよりもサイズアップされるから前後との余白は潰れるし、あんまりいい感じにならない。元々のデザインの枠内で留まるようにやっておくのが無難。

<script>
  const image = document.getElementsByClassName('parallax');
  new simpleParallax(image,{
    scale: 1.3,
    overflow: false,
  });
</script>
<style>
.img{
    width: 100%;
    height: 0;
    padding-top: 66.666%; //widthを基準に%で高さ指定
    margin: 60px 0;
    position: relative;
    overflow: hidden;
}
.img picture{
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.img picture img{
    width: 100%;
    height: auto;
    display: block;
}
</style>

<div class="img"><picture><img src="https://placehold.jp/1200x800.png" class="parallax" alt=""></picture></div>

親(.img)で領域を指定して、overflow:hidden;ではみ出した部分は消す。そうすれば枠は固定される。

複数分を指定する場合

<div class="img"><picture><img src="https://placehold.jp/1200x800.png" class="parallax" alt=""></picture></div>
<div class="img"><picture><img src="https://placehold.jp/1200x800.png" class="parallax" alt=""></picture></div>
<div class="img"><picture><img src="https://placehold.jp/1200x800.png" class="parallax" alt=""></picture></div>

<script>
  const image = document.querySelectorAll('.parallax');
  new simpleParallax(image,{
    scale: 1.3,
    overflow: false,
  });
</script>

1つの設定を複数に付与したい場合、スタンダードなやつはclassの指定が確定してたけど、この指定は何でもありになるんでclassだったら先頭に「.」を付けることを忘れない。

overflow-y:scroll;の中では使えないっぽい

間違えてたらごめん。調べたり試したりしたんだけどダメだった。

ポップアップでイメージしやすいと思うけど、要素をブラウザ上に固定して、その領域内でスクロールさせるコンテンツに仕込んだ画像に使えるか、という話。ダメだった。<body>がスクロールすることが発火条件にある。customContainerの説明的にoverflow-y:scroll;のやつを指定すればそっちが発火対象になるんじゃないのって思ったんだけど違うみたい。作例が出てこなかったんで多分無理なんだと思う。公式にoption一覧があるけどそこにも使用例がないんで、何に使うんだよこれって感じがある。時間を浪費してしまった。

なんか動かない時の対処

ページ内に複数設置したり、上下にスライドとか別のjsを入れ込んだり、なんかよくわからんけど色々入れて作ってたらたまに動かないやつが出てくることがあった。完全に動かないんじゃなくて何回かリロードしてみると動くときと動かない時がある。

原因は探ってないけど簡単な対処法として、設定内容を無名関数で囲う。

$(function(){
  const image = document.getElementsByClassName('parallax');
  new simpleParallax(image);
})

この方法はjQueryの関数を使ってる訳だから、jQueryのライブラリを読ませてないと動かなくなる。自分は常にjQueryを使ってるから困らないけど。

slick.jsに入れてみた

各スライド内のimgに付与。デザインが壊れることなく問題なく動いた。用途にもよるけどあまり動きすぎるとはみ出してる部分に「端から端まで見たい」ってモヤモヤが生まれるかもしれないので、調整したほうがいいと思う。

<div class="slider">
    <div><img src="https://placehold.jp/1200x800.png" class="parallax" alt=""></div>
    <div><img src="https://placehold.jp/1200x800.png" class="parallax" alt=""></div>
    <div><img src="https://placehold.jp/1200x800.png" class="parallax" alt=""></div>
    <div><img src="https://placehold.jp/1200x800.png" class="parallax" alt=""></div>
</div>

コメント

タイトルとURLをコピーしました