スクロールするとフェードイン+背景に別の動き
2024.03.02 Saturday
JUGEMテーマ:日記・一般
毎度マイペースな調べ物で助かった記事です。ありがとうございます!
JavaScript(jQuery)でスクロールアニメーションを自作する方法を解説!
https://moshashugyo.com/media/animate-on-scroll
記事に従って、スクロールして行くと任意のclass(.is-active)を付与する指定をjsでします。
htmlでアニメーションさせたいdivに、jsで指定したclass名(.js-scroll-trigger)、動きを指定するclass(.slideinRight)を記述して、CSSに動きを指定します。
.slideinRight
にアニメーション前の位置、透明を指定
.slideinRight.is-active
にアニメーション後の位置を指定
デモはこちら
https://couleurcafe.jp/web/cctest/fadein.html
今回は、白背景を逆向きにフェードインさせる指定をしました。
.whatWrap{position: relative;}
/* アニメーション前 */
.whatBackground::before{
content: "";
width: 80%;
height: 90%;
background: #fff;
position: absolute;
top: 0;
left: 300px;
z-index: 0;
transform: translateX(100%);
transition: all 0.8s ease-out;
}
/* トリガー発火でis-activeを付与してアニメーション後の位置を指定 */
.whatBackground.is-active::before{transform: translateX(0);}
背景だけに動きを持たせたいのでbeforeを使って、位置をずらしたいのでposition: absolute;で指定、
そのために親の.whatWrapにposition: relative;を指定しています。
うるさくならない程度にLPに使います♪