We Blog Weblog

ふわっと現れるアレ

Web

2022年6月5日

F a d e
I n
E f f e c t

 

みなさんこんにちは。
ケミストの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>
Fade in
Fade in
Fade in
Fade in
Fade in
Fade in

 

左から現れる

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

 

右から現れる

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

 

下から現れる

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

 

上から現れる

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

 

まとめ

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

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

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

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP