Javascript
【Javascript】CSSアニメーションを追加して、スクロールしながらユーザーを楽しませてくれるDelighters
March 4, 2018

Delighters.JSはCSSアニメーションを追加して、スクロールしながらユーザーを楽しませてくれる、軽量のjavascriptライブラリ。
スクリプトを含めます。
<script type="text/javascript" src="delighters.js">
属性を追加
<div class="foo" data-delighter>
delighterに.started
と.ended
クラスを組み込みます。
ライブラリがロードされると、data-delighter
は.delighter
クラスを取得します。
.foo.delighter { transition: all .3s ease-out; transform: translateX(-100%); opacity: 0; }
.started
クラスはdata-delighter
要素の上端がビューポートの0.75にあるときに設定されます。
.foo.delighter.started { transform: none; opacity: 1; }
.ended
クラスはdata-delighter
要素の下端がビューポートの0.75にあるときに余分なクラスが設定されます。
.foo.delighter.started.ended { border: solid red 10px; }
デフォルト
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 }
カスタマイズするには、以下を使用します。
Delighters.config({ // set the default start threshold at the bottom start: 1, // let's call Delighters.init() manually later autoInit: false // ... etc ... })
MIT