wow.jsとanimate.cssの組み合わせ-ページを下にスライドしてコンテンツをロードする効果を実現します



Wow Js Combined With Animate



最初のステップ:animate.cssとwow.jsを導入し、初期化します

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init() }

ステップ2:ページを遅らせる必要がある領域に効果を追加する

Title

I am a large area profile...
  • I am block sub-content 1
  • I am sub-content 2
  • I am sub-content 3
  • I am sub-content 4

これは主にclass = 'wow fadeInDownanimated'とdata-wow-delay = '0.ns'によって制御されます。アニメーションに出入りする方法はたくさんあります。詳細については、公式Webサイトにアクセスしてください。

https://animate.style/



animateでサポートされているさまざまな種類のアニメーションをオンラインで表示できます。


効果は次のとおりです。