スクロール位置によって、表示要素に動きを付けたい際利用できるライブラリです。
散々流行った今更のパララックスかもしれませんが、まだちょっと需要はありそうです。
この演出をGoogle先生に聞いてみたところ、jQueryを利用したライブラリばっかりがヒットしてしまいました
Delightersはピュアなjsで実装できる貴重なライブラリだと思います。
Delighters Good Points ![:point_up:]( ":point_up:")
◉ 軽量
◉ レスポンシブ対応 - タブレット、スマホもどんとこい！！
◉ スクロール位置で指定した要素にクラスが付与されるだけ。導入がシンプルで簡単。
◉ jsによる動きの定義がない。使い慣れたCSSを利用してこちらで細かな設定が自由に定義できて嬉しい。
Delighters 使い方 ![:point_up:]( ":point_up:")
ざっくりとした使い方です。
※慣れてる方は飛ばして下さい。Delighters公式サイトのUsageをみていただくのが一番です。
scriptファイルを読み込む
公式のGitHubから落としてこれます。
<script type="text/javascript" src="delighters.js">
動かしたい要素のhtmlにdata-delighterという属性を追加する
<div class="xxxクラス名は自由" data-delighter>
自分で自由にスタイルシートで動きをつける
センスが出る腕の見せどころw ダサくなりたくない…
アニメーションの設定をします。ここでは公式のクラスを引用してます。
/* delighters.jsが読み込まれると、 [data-delighter] 属性を持っている要素それぞれに .delighter が付与されます。*/
.foo.delighter {
transition: all .3s ease-out;
transform: translateX(-100%);
opacity: 0;
}
/* スクロールしてターゲットが画面上部（初期設定）から75%（初期設定）の位置にきた際 .started が設定されます。*/
.foo.delighter.started {
transform: none;
opacity: 1;
}
/* スクロールしてターゲットが画面下部（初期設定）から75%（初期設定）の位置にきた際 .ended が設定されます。 */
.foo.delighter.started.ended {
border: solid red 10px;
}
Delightersカスタマイズ ![:point_up:]( ":point_up:")
属性名や、スクロール位置で設定されるクラス名、上部もしくは下部からどれくらいの位置にするかなど変更できるそうです。
options = {
attribute: 'data-delighter',
classNames: ['delighter', 'started', 'ended'],
start: 0.75, // default start threshold
end: 0.75, // default end threshold
autoInit: true // initialize when DOMContentLoaded
}