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