【jQuery】wordpressの投稿にアニメーションをつける

こんな感じにスクロールをすると要素が現れるWebサイトってかっこいいですよね。
適当にアニメーションできるようになったのでお試しがてらやった事を書いておきます。
2.こちらのanimate.cssを読み込む
3.最初の読み込みで表示されないよう、visibility:hiddenのついた要素を用意
4.javascriptで指定の要素が画面半分まで来るとanimate.cssと紐づいたクラス名が追加されるようにする
の事をしました。
jQueryライブラリ読み込みは恐らくみなさんやられているか、テーマに勝手に入っていると思うので割愛します。
animate.cssはこちらのページで配布されております。これを子テーマの中に保存し、style.cssの初めに読み込むようにしておきました。
<div class=”kizaki naiyou” id=”kizaki5″ style=”visibility:hidden;”> 例えばこの枠であればこんな値を入れております。cssで一個一個設定せずに要素にスタイルを指定しております。 たくさん書くと複雑化して管理がめんどくさくなるのであんまり書くのはオススメしません </div>
たくさん書くと複雑化して管理がめんどくさくなるのであんまり書くのはオススメしません
この枠に適応されているのはこんな感じです。
<script> jQuery(window).scroll(function (){ var scroll = jQuery(window).scrollTop();//ページトップからのスクロール距離 var kizakitakasa6 = jQuery("#kizaki6").offset().top; //idがkizaki6である要素のページとトップからの距離 var windowHeight = jQuery(window).height(); //画面の高さ if (scroll > kizakitakasa6 - windowHeight/2){ //画面の半分の場所まで来たら実行するif文 jQuery('#kizaki6').css('visibility','visible');//要素を表示させる document.getElementById('kizaki6').classList.add("fadeInDown", "animated");//アニメーションと紐づいているクラス名を追加する } }); </script>
これのID部分を変えていけば、いろんな要素にアニメーションを定義できます
時間が出来たら書き直そうかなーと思っております。