スクロール位置を jQuery で取得して、いろいろやる時の方法。
css は transition と animation の2パターン。jQuery のアニメも1パターン用意した。
赤い点線で示した「ウインドウの高さの半分」よりも、白い枠線のエリアの上辺が上になると、アニメーションが始まる。
白い枠の要素が、「ウインドウの高さの半分」の位置に来ると、jQuery の addClass で onクラスが足される。
.on有りと .on無しのcssの違いを、指定した秒数のアニメで変化させているのは、css の transiton
.on.animation セレクタに、animation が指定してある。.animation が .on.animation になった瞬間からアニメーションが始まる。
jQuery で animateさせる。jQuery からだと、疑似要素をうまくセレクトできないので、spanを動かしている。
ループさせる為に setTimeout を再起的に呼び出している。