on:2017年11月9日sponsorsページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。単体で動作し、しかも1KBの超軽量スクリプトです。-GitHubEmergence.jsのデモEmergence.jsの使い方Emergence.jsのデモデモでは、ピンクの矩形エリアに要素が表示されると変化します。デモページ動きが分かるよう、ゆっくりのアニメーションGIFにしてみました。デモのアニメーション素早く、しかも大量にスクロールすると、もっと気持ちよく動作します。外部ファイル当スクリプトを外部ファイルとして記述し、スクリプトを初期化します。HTML適用する要素に「data-emergence="hidden"」を与えます。data-emergence="hidden"></div>要素がビューポート内で可視になると、属性はdata-emergence="visible"に変わります。このclassを使用して、要素をアニメーションなどで変化させることができます。*/}オプションコンテナはデフォルトで、ビューポートのサイズになります。ビューポート内の指定した範囲を選択したい場合は、下記のように指定します。customContainer});コンテナを含め、オプションのデフォルトでは下記のように設定されています。