wow.js」という組み合わせを知って使ってみたら、めっちゃ簡単で使いやすかったので紹介したいと思います。ちなみにjQueryを使った方法は過去記事で紹介していますので興味がある方はご覧ください。)メソッド実際に使ってみるwow.jsで設定できるオプションまとめAnimate.cssをダウンロードAnimate.cssはクラス名を指定するだけで、簡単にアニメーションが実装できる便利なスタイルシートです。下記の公式サイトよりAnimate.cssがダウンロードできます。Animate.css」よりファイルをダウンロードしてください。公式サイトではアニメーションの動きが確認できます。ダウンロードしたファイルを解凍し、Animate.cssを読み込みます。圧縮版が良い方はAnimate.min.cssの方を読み込みます。ちなみにWordPressの場合はfunction.phpから読み込む方法をオススメします。WordPressでCSSやjQueryを読み込む時はfunction.phpが便利!2017年11月23日wow.jsをダウンロードwow.jsはアニメーションや詳細な動きを設定できるJavaScirptで、コレが無いとスクロールと連動させてアニメーションさせる事ができません。wow.jsは、GitHubよりダウンロードします。GitHubダウンロードしたファイルを解凍すると「dist」フォルダにwow.jsが入っているのでCSS同様に読み込みます。)メソッドを呼び出す必要があるので、以下のコードをbodyの閉じタグ直前に記述します。アニメーション名」を指定するだけ。bounce"></div>これだけでスクロールで要素が表示されたタイミングでアニメーションが実行されます。設定できるアニメーションの種類は、Animate.cssの公式サイトで確認できます。アニメーション名をクラス名に指定するだけで、簡単にアニメーションが設定できるので、jQueryがわからない初心者でも使いやすいと思います。CODEPENのサンプルを貼っておきます。CodePen.0wow.jsで設定できるオプションwow.jsにはいくつか設定できるオプションがあります。data-wow-iteration="5"></div>上記のコードの1行目は、スクロールで要素が表示されてから3秒後に1秒かけてアニメーションする設定で、2行目ではスクロールで要素が表示されてから10スクロールを過ぎたらアニメーションを5回実行する設定です。wow.js」を使った方法がオススメです。wow.js」で決まり!』でした。初心者でもコピペで実装!スクロールしたら要素をフワッと下から表示させる方法【jQuery】2018年8月10日WEBデザイン便利ツールjQueryWEBデザイン便利ツールこの記事が気に入ったらいいねしよう!最新記事をお届けします。WEB・動画にこだわらずオールマイティに制作できるようになりたい印刷会社勤務のデザイナーです。初心者にも伝わるように心掛けて記事を書いています。