画面が表示された時にアニメーションでコンテンツが表示されるサイトがここ数年でだいぶ増えてきました。
要素を順番に表示させて目を惹かせたりすることで、サイトを閲覧する際の指標というかガイド的な役割をしています。あんまり動かしすぎると、ゴチャゴチャしますが…。

このタイプのアニメーションのほとんどは「スクロールがここまで達したらアニメーションをする」って命令で動いてます。
Javascriptのライブラリでも「wow.jsとAnimate.css」を使って、アニメーションさせているパターンもありますが、もっと簡単に数行のjQueryの記述とCSSでスクロールしたら出てくるアニメーションを実現してみようと思います。

何をしているかっていうと

• jQueryで指定の位置から◯◯px以上表示されたらclassを与える。
• CSSのアニメーション（transition）を使って、動かす。

っていうだけの簡単な流れです。

アニメーションをさせたい要素のHTMLを記述する。

<ul class="column3list animate">
  <li>要素A</li>
  <li>要素B</li>
  <li>要素C</li>
</ul>

今回のアニメーションさせる場合のHTMLのポイントは動かしたい要素の一つ上（親要素）に「.animate」というclassを記述する事です。
こうすることによって、jQueryで子要素に指定のclassが付与される命令を与えることができます。

jQueryでスクロールした時の命令部分を書く

$(function(){
    $(window).scroll(function (){
        $(".animate > *").each(function(){
            var targetAnime = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > targetAnime - windowHeight + 200){
                $(this).addClass("moving");
            }
        });
    });
});

アニメーションする要素のたびにjQueryの記述を書いていくのはめんどくさいので、「$(“.animate ＞ *”).」として、このclassがある場合は、常にアニメーションを起こせるように書いておきます。

現在の位置とスクロール量を定義して、スクロールしてコンテンツが200px以上現れたときにclass名を付与するようにしています。

こうすることによって、さきほどのHTMLはスクロールして、要素が現れて200px過ぎると、こうなります。

<ul class="column3list animate">
  <li class="moving">要素A</li>
  <li class="moving">要素要素B</li>
  <li class="moving">要素要素C</li>
</ul>

CSSでアニメーションを追記する。

最後にCSSでアニメーションを追加すれば、OKです。
下から上に順番に現れてくる場合だとこんな感じ。

.column3list.animate li {
    position: relative;
    top: 120px;
    opacity: 0;
}
.column3list.animate li:first-child {
    transition: all 1.0s;
}
.column3list.animate li:nth-child(2n) {
    transition: all 2.0s;
}
.column3list.animate li:nth-child(3n) {
    transition: all 3.0s;
}
.column3list.animate li.moving {
    opacity: 1;
    top: 0;
}

最初は「 opacity: 0;」で透明になっているのが、「transition」で徐々に「 opacity: 1;」になって現れる。
その際に「top: 120px;」で120px下に下がっていたのが「 top: 0;」になって、上に上昇してくる動きになります。

その他にも、「left・right」で横からとか、positionプロパティを使って移動することによって、アニメーションを実行できます。他にも回転とかCSSのプロパティで使える範囲なら、何でもOKです。

メインビジュアル（ファーストビュー）のアニメーションの場合

今回のアニメーションはスクロール値で判断して、CSSのclassを与える方法なので、ページの最初の画面（ファーストビュー）では、少しでもスクロールしないと、アニメーションがされないのでファーストビューがスカスカ状態になりかねません。

そんな場合は、単純にclass名を付与するだけの単純なjQueryを書いておけばOKです。

$(".main p").addClass("animate");

※さっきの.scroll(function()とは別物と考えてください。

けっこう色んな動きで遊べると思いますので、色々やってみてください。
面白がって動かしすぎて、見えづらいサイトになったら本末転倒なんでご注意を。

DEMO