ふわっと現れるアレ

2022年6月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はウェブサイトでよく見かける「スクロールするとふわっと現れるアレ」について書きます。

正式名称なんていうんでしょう。フェードイン？

CSS

animate.cssを用意します。

GitHubからダウンロードしてヘッダー内で読み込むか、

<link rel="stylesheet" href="css/animate.css">

またはCDNで呼び出します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

ふわっとさせる要素を最初透明にしておくために、CSSでopacity:0に設定します。

.animate-box {
  opacity: 0;
}

waypoint.jsを読み込みます。

<script src="js/jquery.waypoints.min.js"></script>

スクリプト

var contentWayPoint = function () {
  var i = 0;
  $('.animate-box').waypoint(function (direction) {
    if (direction === 'down' && !$(this.element).hasClass('animated')) {
      i++;
      $(this.element).addClass('item-animate');
      setTimeout(function () {
        $('body .animate-box.item-animate').each(function (k) {
          var el = $(this);
          setTimeout(function () {
            var effect = el.data('animate-effect');
            if (effect === 'fadeIn') {
              el.addClass('fadeIn animated');
            } else if (effect === 'fadeInLeft') {
              el.addClass('fadeInLeft animated');
            } else if (effect === 'fadeInRight') {
              el.addClass('fadeInRight animated');
            } else if (effect === 'fadeInDown') {
              el.addClass('fadeInDown animated');
            } else {
              el.addClass('fadeInUp animated');
            }
              el.removeClass('item-animate');
          }, k * 200, 'easeInOutExpo');
        });
      }, 100);
    }
  }, {
       offset: '85%'
     });
};

うーん全然わからない。

少しずつ理解していく
それがいいんだ

ふわっと現れる

<div class="animate-box" data-animate-effect="fadeIn">
  Fade in
</div>

左から現れる

<div class="animate-box" data-animate-effect="fadeInLeft">
  Fade in Left
</div>

右から現れる

<div class="animate-box" data-animate-effect="fadeInRight">
  Fade in Right
</div>

下から現れる

<div class="animate-box" data-animate-effect="fadeInUp">
  Fade in Up
</div>

上から現れる

<div class="animate-box" data-animate-effect="fadeInDown">
  Fade in Down
</div>

まとめ

Animate.cssを使えば他にもいろいろなアニメーションができそうです。

こういうのがオシャレなサイトへの第一歩だと信じてがんばります。

真のオサレサイトまでは一万歩あるかもしれないがな！