表示された時やスクロールしてコンテンツが表示された時に、回転したり左右から現れるなどのアニメーションをサイトに付与してユーザの興味を引きたい場合があるかと思います。そんなときに、Animate.cssとwow.jsを使うと要素にclassを与えるだけでサイトにアニメーションをつけるのが脳死レベルで簡単になります。準備Animate.cssAnimate.cssは「bounce」「swing」「fadeIn」などいろいろな種類のCSS3アニメーションをclassに設定するだけで実装してくれます。動作デモも兼ねた公式サイトからCSSをダウンロードするかGitHubからダウンロードしてください。Animate.css公式サイトanimate.cssGitHubwow.jswow.jsはアニメーションの時間、繰り返し回数などが設定でき、jQuery不要で動作するスクリプトです。GitHubからwow.jsファイルをダウンロードしてください。以下のコードのように、ダウンロードしてきた2つのファイルをhtmlファイルに読み込ませます。どの階層でも動作しますのでファイル階層は任意で設定してください。WOW().init();</script>wow.jsは起動させるための初期設定が必要なので、init()メソッドを記述しておく必要があります。スクリプトはbody閉じタグ前に記述でも動作します。src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>CDNで高速配信されるのでコチラの方が高速表示には向いているかもしれません。アニメーション名”を記述(wowは必須)するだけで、スクロールが要素に達した時に記述したアニメーションが実行されます。アニメーションの種類は「animate.css」で実装されている、「bounce」「swing」「fadeIn」など、様々なアニメーションの中から好きなものを記述します。スクロールが要素に到達時、要素がアニメーションを開始する距離を指定。アニメーションの繰り返し回数さらに、アニメーションさせたい要素のclassに『infinite』を追加すると、無限にアニメーションを繰り返すことができます。まとめwow.jsはAnimate.cssを必要としますが、Animate.cssは単体としても動作します。Animate.cssはCSSで時間や繰り返し処理を記述しなければならないので手間がかかってしまうのでwow.jsとコンビで使用することをおすすめします。Animate.cssとwow.jsのコンビ技はスクロール上下し要素に達するたび、何回も動作するというものではないのでお気をつけください。articlesJqueryオブジェクトを関数の引数に指定して関数内で実行できるパターンのコード公開aタグなどのクリックイベントとページ内遷移の実行順番jqueryでdivのheightを取得しようとしたけど取れないときはここを疑え!Jqueryを使ったカレンダープログラム(3色色付け)を福岡一わかりやすく解説します。me!福岡県在住のWebのなんでも屋さんです。大風呂敷を敷くとWebサイトの制作から、パソコン・スマホの修理、カメラ撮影までとにかく何でもこなします。頂いた要望にはまず「自分」でやってみてる精神でお客様とともに成長していくタイプです。我が家の看板犬「ほたる」と共に福岡中を大移動!ペットが同伴できる施設・飲食店やイベントをご紹介!ほたるのInstagramうちの息子犬「ほたる」の日常を日々アップ!親バカかもしれないですがかなりカワユス。