【jQuery】スクロールアクション【備忘録】

【超簡単】　※スマホ対応
https://coliss.com/articles/build-websites/operation/javascript/js-add-css-animation-delighters.html

Delighters

q42.github.io

アニメーションを与える要素に「data-delighter」を追加。
アニメーションの設定はcssで調整。

■ex＝＝＝＝＝＝＝＝＝＝＝＝＝＝

/* 基本 */
.foo.delighter {
transition: all .3s ease-out;
transform: translateX(-100%);
opacity: 0;
}

/* スタート時 */
.foo.delighter.started {
transform: none;
opacity: 1;
}

/* エンド時 */
.foo.delighter.started.ended {
border: solid red 10px;
}