画面内に入った時にclassを付与する

アニメーションを付ける時に役立つ

CSSアニメーションを作っても、意図したタイミングで見てもらえなければ意味がありません。
ページを開いた時にスグ目につく場所であればそれほど困りませんが、ページの下に行くほどどうしていいやらわからなくなります。
Webサイトは基本的に縦長になるので、どうしてもスクロールしてもらって閲覧されるものです。
なのでスクロールされるのを待っているコンテンツが隠れている状態になります。

CSSを使ってアニメーションを付けた場合、読み込みが終わった段階（ページを表示した時点）で動き出します。
画面外にあってもそれは同じです。困りましたね。ではどうするのか。

画面内に入った時にclassを付けて制御しようよ。という事になります。
スクロールすると、コンテンツがふわふわと浮かんできたり、左右から飛び出してきたり・・・様々な効果を持たせたWebサイトが増えたように思います。
これらも表示する画面の中にコンテンツが入ったら、classを付け、アニメーションを開始する。という流れになっている物がほとんどです。

応用を聞かせれば、様々な表現に活用できそうですね。

実際に導入してみるには

JavaScriptを使って、画面内にコンテンツが表示されたときにclassを付ける。という動作をさせてみましょう。

$(window).scroll(function (){
  $(".block").each(function(){
    var hit		= $(this).offset().top;
    var scroll	= $(window).scrollTop();
    var wHeight	= $(window).height();

    if (scroll > hit - wHeight + wHeight/100){
      $(this).addClass("run");
    }
  });
});

class名blockと名付けられた要素が画面内に入った時に、「class名run」を付与させることができます。
あらかじめ「.block.run」で動きを付けておけばOK。簡単ですね。

動きをプラスして表現力をアップ

文章がずらずらと書かれているより、所々に的確に解説されている絵が入ると分かりやすくなります。
それにプラスして動きを持たせてあげる事で、登場した時のインパクトはより大きくなります。

インパクトが大きいと、より印象に残るものになるでしょう。
動きが解説と合っていればさらに響くかもしれません。

Webサイトも文字から写真付きへ変わっていきましたが、今では映像表現をプラスしたWebサイトも珍しくありません。
また、マウスを使ってスクロールやクリックなどをした時にWebサイト内で何かが起こるという表現も昔から使われていますね。

目・耳・感覚といった五感に語り掛けていく仕掛けは、印象に残るものです。
表現をプラスして、的確に物事を魅せていく事で、より伝わるWebサイト作りに役立ててください。