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

解説

「scroll me」にはスクロール境界内のアニメーション開始・終了位置を制御するオプション
data-fromとdata-toがあります。

data-fromが起点で、data-toが終点になります。

data-from="0" data-to="1"とした時
画面をスクロールして対象が現れるとエフェクトが始まり、
画面最上部までスクロールするとエフェクトが終わります。

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

data-from="0.5" data-to="1"とした時

エフェクトが50%の位置で開始され、
画面最上部までスクロールするとエフェクトが終わります。

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

data-from="0" data-to="0.5"とした時

対象が表示されるとエフェクトが開始され、
50%の位置までスクロールすると終わります。

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

data-from="1"data-to="0"と記述して

data-fromとdata-toの値を逆にすると、逆方向へスクロールされました。

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