2019年12月1日こんにちは。mito(@mito_works)です。今回は、jQueryのライブラリーを使って要素がふわっと登場するアニメーションを簡単に実装する方法です。DAY21「WOW」ライブラリを使ってアニメーション。こんなに簡単に、こんなにリッチな動きが実現できるなんてすごいなぁ〜。試してみた結果「flipInX、rollIn」の個性的なアニメーションが好きです。2019こんな人におすすめWebサイトに動きをつけて個性や世界観を表現したい人mito使い方、順を追って解説します!スポンサーリンクContentsダウンロードフォルダへの配置HTMLの記述オプションの解説jQueryの記述スクロールされるたびに動きをつけたい場合アニメーションの種類まとめダウンロードソースコードをgithub上から取得します。https://github.com/graingert/wowmomoWOW.js本家の商用利用には有料の公式ライセンスが必要なので、無料で商用利用できるMIT版をダウンロードしたよ!フォルダへの配置ダウンロードするとたくさんファイルやフォルダがありますが、必要なものはdistフォルダとanimate.cssのみです。mitodistフォルダとanimate.cssをコーディングしているフォルダに配置します。src="dist/wow.min.js"></script>momowow.min.jsはjqueryを読み込まないと動かないので必ずjqueryの記述の後に書いてね。この部分で左からシュッと出てくるアニメーションの指定をしています。wowクラスはスクロールが来た時にアニメーションを動かすための宣言。bounceInLeftクラスはアニメーションの種類です。オプションの解説data-wow-durationアニメーションの時間data-wow-delayアニメーションがスタートするまでの時間data-wow-offsetアニメーションスタートの距離data-wow-iterationアニメーション繰り返しの回数mitoアニメーションの時間(data-wow-duration)とアニメーションがスタートするまでの時間(data-wow-delay)この2つの指定で十分かと思います!jQueryの記述jsでwowを使いますということを宣言しないと使えません。WOW().init();スクロールされるたびに動きをつけたい場合data-wow-iterationでアニメーションの回数を指定するのではなくて、スクロールされるたびに動きをつけたい場合は以下のように書きます。});アニメーションの種類momoこちらにアニメーションの種類一覧があるので自分好みのアニメーションを見つけてみてね!https://github.com/daneden/animate.cssmitoちなみに私は「flipInX、rollIn」が好きです!こちらのサイトでもアニメーションの動きを確認できます。animate.cssまとめjQueryのライブラリーwowのご紹介でした。簡単に様々な種類のアニメーションが実装できることがお分りいただけたと思います。MEmitoこんにちは!mitoです。現在は複業でWebデザイナーをしています。2019年1月からWebデザインの勉強を始めました。子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。ミトラボスポンサーリンク【2019年9月】アウトプット多めでステップアップの月、急がば回れを実感...【30DAYSトライアル2nd】day17~26のアニメーションの付け方...Webデザイナーmito好奇心旺盛でやりたいこと多め。2019年1月からデザインの勉強を始め、複業Webデザイナーです。忘れっぽいのでブログを書いてます。