【アニメーション】スクロールすると動きだす【コピペOK】

animateのCSSと、jQueryを使用して、スクロールすると動き出すコードを紹介します。

DEMO

スクロールしてみてください。

要素が見えた瞬間、アニメーションが発動するやつです。

コード例

cssの上から「body」、「.message」、「.animation」は分かりやすくするために書いただけですので真似しなくて大丈夫です！

それ以下はアニメーションの動きを記述しています。適宜コメントアウトしていますのでご参照くださいm(_ _)m

手順

1. 【HTML】class名にアニメーションの名前（ここではanimated、shakeやbounceIn）を追加する → アニコレクションを参照。※animatedは共通のclass名。
2. 【CSS】アニメーションの動きを記述 → アニコレクションを参照。
3. 【CSS】スクロールした時に要素が動くように新たなclass名を指定する。（ここでは.is-show）
4. 【jQuery】①のHTMLに書いたアニメーションの名前（shakeやbounceIn）と、③のCSSに書いた新たなclass名（.is-show）を使って動きを指定する。

それではHTML、CSS、jQuery別に詳しくみていきましょう！

HTMLに記述するもの

<p class="message">スクロールしてみて!!</p>
<div class="shake animated animation">
　　<p>スクロールで動き出す1</p>
</div>
<p class="message">もっとスクロール!!</p>
<div class="bounceIn animated animation">
　　<p>スクロールで動き出す２</p>
</div>

class名にshakeやbounceIn、animated（共通）を追加してCSSでアニメーションの指示を書いていきます。

<p class=”message”>スクロールしてみて!!</p>
<p class=”message”>もっとスクロール!!</p>

などはいらないので省いてくださいね。

↓↓↓必要なのはこれです。↓↓↓

CSSに記述するもの

/* base code */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

/*********
shakeのアニメーション
*********/

/* the animation definition */
@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    -ms-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    -ms-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

/* これが大事　スクロールしたらこのcssが反応する */
.shake.is-show {
  -webkit-animation-name: shake;
  animation-name: shake;
}

/*********
bounceInのアニメーション
*********/

/* the animation definition */
@-webkit-keyframes bounceIn {
  0%, 100%, 20%, 40%, 60%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  0%, 100%, 20%, 40%, 60%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -ms-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    -ms-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    -ms-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    -ms-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/* これが大事　スクロールしたらこのcssが反応する */
.bounceIn.is-show {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

Ani Collectionを参考にCSS書いています。ここからコピペで好きな動きを持ってきましょう。

マーカーで下線を引いていますが書くことをまとめますと、

JS（jQuery）に記述するもの

////スクロール→アニメーション
$(window).on('load scroll', function() {
    add_class_in_scrolling($('.shake'));
    add_class_in_scrolling($('.bounceIn'));
});

// スクロールで要素が表示された時にclassを付与する
function add_class_in_scrolling(target) {
    var winScroll = $(window).scrollTop();
    var winHeight = $(window).height();
    var scrollPos = winScroll + winHeight;

    if(target.offset().top < scrollPos) {
        target.addClass('is-show');
    }
}

基本的にはコメントアウトの言葉通りです。

ただ、この記述だと（↓）

要素が見えた瞬間にすぐ動き出してしまうので、もう少しスクロールしてから動き出してほしい！という時には以下の記述に書き換えてあげましょう〜！

こうするとスクロールして画面の半分まできたら動き出すようになります。