最近、遊び心が溢れるインタラクティブなウェブサイトが多くなってきました。見ているだけで楽しくなるウェブサイトは、気がついたら一番下までスクロールしていて、そのサイトの内容を読んでしまっています。

今回、そんなインタラクティブでも、よく見かけるスクロールをして表示範囲に入ったときに実行されるアニメーションの作り方をご紹介します。

スクロール判定の作り方

スクロール判定は、CSSのみではできないため、javaScriptを使用して作成します。

以下、スクロール判定のソースコードになります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function scrollChk(){
  var scroll = $(window).scrollTop();
  var windowHeight = $(window).height();

    jQuery('.scroll-animation').not('.active').each(function(){
        var pos = $(this).offset().top;

        if (scroll > pos - windowHeight){
            $(this).addClass("active");
        }
    });
}
$(window).scroll(function (){
    scrollChk();
});
$('body').on('touchmove', function() {
    scrollChk();
});
</script>

このソースは、「scroll-animation」というClassに「active」を付与します。

これだけで、スクロール時のイベント実行の作成は完了です。

イベントに合わせてCSSでアニメーション

まず、試しに以下のようなHTMLを設置しましょう。

<div class="scroll-animation fadein">Hello!</div>

次にCSSの定義をします。

.fadein{
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  opacity: 0;
}
.fadein.active{
  opacity: 1;
}

たったこれだけで以下のようにスクロールでフェードインするアニメーションができました。

See the Pen scroll animation fadein by Taiki Takefushi (@cruw) on CodePen.

とても簡単ですね。あとはCSSの書き方次第で、好きなアニメーションを作ることができます。

以下は参考程度にアップしておきます。

１．下からフェードイン

HTMLを書きます。

<div class="scroll-animation fadein-bottom">Hello!</div>

CSSを書きます。

.fadein-bottom{
  -webkit-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}
.fadein-bottom.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}

あまり先程のフェードインの動きと変わりませんね；

See the Pen scroll animation fadein from the bottom by Taiki Takefushi (@cruw) on CodePen.

２．左からフェードイン

HTMLを書きます。

<div class="scroll-animation fadein-left">Hello!</div>

CSSを書きます。

.fadein-left{
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
  opacity: 0;
}
.fadein-left.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

さっきよりは変化がありますね。

See the Pen scroll animation fadein from the left by Taiki Takefushi (@cruw) on CodePen.

３．ズームイン

HTMLを書きます。

<div class="scroll-animation zoomin">Hello!</div>

CSSを書きます。

.zoomin{
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  font-size: 20%;
}
.zoomin.active{
  font-size: 100%;
}

こんな簡単な書き方だけで、ちょっとした動きが付けられます。

See the Pen scroll animation zoomin by Taiki Takefushi (@cruw) on CodePen.

４．左から順に文字を表示

HTMLを書きます。

<div class="scroll-animation text-fadein"><span>Hello World!!</span></div>

CSSを書きます。

.text-fadein span{
  display: inline-block;
  position: relative;
}
.text-fadein span:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}
.text-fadein.active span:before {
  width: 0%;
}

左からフェードインこちらの方がキレイですね。

See the Pen scroll animation text-fadein by Taiki Takefushi (@cruw) on CodePen.

５．ぼんやりフェードイン

HTMLを書きます。

<div class="scroll-animation blur-fadein"><span>Hello World!!</span></div>

CSSを書きます。

.blur-fadein{
    text-align: center;
    color: transparent;
}
.blur-fadein.active{
    animation: blurFadeIn .3s ease-in forwards;
}
@keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: #000 1px 0px 20px ;
    }
    50% {
        opacity: 0.5;
        text-shadow: #000 1px 0px 10px ;
    }
    100% {
        opacity: 1;
        text-shadow: #000 0px 0px 0px ;
    }
}

キーフレームを使えば、アニメーションのバリエーションも増えますね。

See the Pen scroll animation blurFadeIn by Taiki Takefushi (@cruw) on CodePen.

以上、やり方次第で様々なアニメーションが
作ることができますので、是非、お試しください！