scroll meを使用したスクロールエフェクトのデモページ3

解説

「scroll me」にはアニメーションの開始・終了位置を
制御するオプションdata-whenがあります。

data-whenには「enter」「exit」「span」があります。

data-when="enter"を設定した時
「コンテナの上部がビューポートに入るときから出るときまで」
でアニメーションします。

<div class="scrollme">
　<div class="animateme"  data-translatex="-770" data-from="0" data-to="1" data-easing="linear" data-when="enter">
　　<img src="***">
　</div>
</div>

data-when="exit"のとき
「コンテナの上部がビューポートに入るときから出るときまで」でアニメーションします。

画像が全て表示されてからスクロールが開始されるのが分かります。

<div class="scrollme">
　<div class="animateme" data-translatex="-770" data-from="0" data-to="1" data-easing="linear" data-when="exit">
　　<img src="***">
　</div>
</div>

data-when="span"のとき
「コンテナの上部がビューポートに入るときから下部が出るときまで」
でアニメーションします。

<div class="scrollme">
　<div class="animateme" data-translatex="-770" data-from="0" data-to="1" data-easing="linear" data-when="span">
　　<img src="***">
　</div>
</div>

data-whenを3つ並べてみました。

上から「enter」「exit」「span」です。