スクロールすると要素がアニメーションするエフェクト

ロッチくん

ページをスクロールして要素がページ内に入るとアニメーションするエフェクトを実装してみたいニャ

ページをスクロールするとコンテンツがフワッと浮き上がってきたり、横から出てきたりする動きを実装してみよう！！

はじめに
コード解説
1. HTML
2. CSS
ちょこっと解説
最後に

はじめに

こちらの動きを実装するためにWaypoints.js と Animate.css といったライブラリを使うやりかたもありますが、jQueryを使って簡単に実装が可能ですし、かなり簡単で基本的な書き方なので入門編としてこのあたりから始めてみるのもいいかもしれません。

ただこの動きのためだけにjQueryを読み込むのは重いしもったいないので、今後バニラjsでの実装記事も予定しております。

今回の動きのデモサイトはこちらからご覧ください。

まずはjQueryの読み込みをして準備を整えましょう。

jQueryの読み込み方法

jQueryを読み込むにはダウンロードしてサーバーにアップロードする方法とCDNで読みこむ方法とありますが、ここでは手軽にすぐ読み込めるCDNを使った方法を紹介します。

コード解説

HTML

<div id="wrapper">
    <section class="container">
        <p>↓↓↓↓↓↓　　下にスクロール　　↓↓↓↓↓↓</p>
        <div id="box1" class="box">ふんわり登場</div>
        <div id="box2" class="box effect_x_right">右横から登場</div>
        <div id="box3" class="box effect_x_left">左横から登場</div>
        <div id="box4" class="box effect_x_topRight">右斜め上から登場</div>
        <div id="box5" class="box effect_x_bottomLeft">左斜め下から登場</div>
        <div id="box6" class="box effect_y_bottom">下から登場</div>
        <div id="box6" class="box effect_y_top">上から登場</div>
        <div id="box6" class="box effect_rotate">回転しながら登場</div>
    </section>    
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 200px;
}
p {
  font-size: 16px;
  margin-bottom: 700px;
}
.box {
  width: 400px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  margin-bottom: 300px;
  transition: .3s
}

.fadeIn {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 右横から登場 */
.effect_x_right {
  transform: translateX(35%);
}
.effect_x_right.fadeIn {
  transform: translateX(0);
}

/* 左横から登場 */
.effect_x_left {
  transform: translateX(-35%);
}
.effect_x_left.fadeIn {
  transform: translateX(0);
}

/* 右斜め上から登場 */
.effect_x_topRight {
  transform: translate(35%, -35%);
}
.effect_x_topRight.fadeIn {
  transform: translate(0);
}

/* 左斜め下から登場 */
.effect_x_bottomLeft {
  transform: translate(-35%, 35%);
}
.effect_x_bottomLeft.fadeIn {
  transform: translate(0);
}

/* 下から登場 */
.effect_y_bottom {
  transform: translateY(35%);
}
.effect_y_bottom.fadeIn {
  transform: translateY(0);
}

/* 上から登場 */
.effect_y_top {
  transform: translateY(-35%);
}
.effect_y_top.fadeIn {
  transform: translateY(0);
}

/* 回転しながら登場 */
.effect_rotate {
  transform: rotate(-360deg);
}
.effect_rotate.fadeIn {
  transform: rotate(0);
}

$(".box").css({
    "opacity": "0",
    "visibility": "hidden"
});
$(window).scroll(function () {
    $(".box").each(function () {
        var win = $(window);
        var position = $(this).offset().top;
        var scroll = win.scrollTop();
        var windowHeight = win.height();
        if (scroll > position - windowHeight + 200) {
            $(this).addClass("fadeIn");
        } else {
            $(this).removeClass("fadeIn");
        }
    });
});

ちょこっと解説

ボックスをJSで消しているのには意味がありまして、万が一サイトがJSを読み込まない場合ボックスが永遠に表示されないからです。

また、右斜め上とか、左斜め下とか回転なんかは動きがうるさいのであまり使わないと思いますが、参考のため入れています。

最後に

非常に簡単ですね。CSSのアニメーションなどをさらに幅広く活用することでもっと様々な動きをつけることも可能です。

最初はコピペでも結構ですのでご自身のサイトなどに実装してみて、数値を変えるなどいろいろ試してみてください！

その他のスクロール系のおすすめ記事はこちら↓

jQueryを用いた頻出UIまとめた記事はこちらから！最低限こちらを実装できればWEB制作の現場でもそんなに困らないかと思います！！

【初心者向け・コピペOK!!】～ WEB制作の現場で使える頻出UIパーツをjQueryで実装しよう～

jQueryで実装できる最頻出の動きについての解説をした記事の一覧です。

スクロールすると要素がアニメーションするエフェクト（jQuery編）

はじめに

コード解説

HTML

CSS

ちょこっと解説

最後に

コメント