fotodeo

webページを動きあるページにするテクニックとしてはJavaScriptが必要で敷居が高いと感じませんか？

ですが実は簡単なものだとCSSだけで実現できるんです。

そんなアニメーションで今回はフェードインさせてみようと思います。

フェードイン

webサイトを閲覧しているとじわ～っと表示される効果の事を言います。

以前はjQueryを読み込み実装するので、ちょっと面倒な部分がありました。
ですが今はCSS3で実現できます。

コードのサンプル

CSS部

<style type="text/css">
    #test-contents{padding:2%;}
    #test-column{max-width: 500px;width: 90%; margin: 0 auto;}
    .fadein{animation: fadeIn-ani 3.2s ease 0.3s 1 normal;}
    @keyframes fadeIn-ani { 
        0% {opacity: 0;} 
        100% {opacity: 1;} 
    }
</style>

必要なものはfadeinと＠keyframesの二つ。
test-〇〇はこのページの見栄えの為のスタイルですので気にしないでください。

HTML部

<div id="test-contents">
    <section id="test-column" class="fadein">
        <h3 style="text-align: center">テストウィンドウ</h3>
        <p>ディレイを掛けて表示させる</p>    
    </section>

</div>

実装の仕方としてはフェードインしたい場所にfadeinのclassを付けるだけ！
sectionタグに付けているので子要素のh3とpタグに適応されて、ページがロードされたら1回フェードインされます。

実行結果

では実行結果をご覧ください。

ウィンドウの中↑では既にディレイを掛けて表示されると表示されていると思うので画面の更新（F5）を押してみてください。
うまく表示されたでしょうか？ではCSSの説明に少し触れたいと思います。

プロパティとキーフレーム

「animation: fadeIn-ani 3.2s ease 0.3s 1 normal;」の説明をざっくりしていこうと思います。
animationがアニメーションのプロパティとなります。

• fadein-ani　：アニメーション動作の呼び出し名
• 3.2s　：3.2秒掛けてアニメーションさせます。
• ease　：速度がゆっくり始まってゆっくり止まります。
• 0.3s　：アニメーションがロードされてから何秒後に開始されるか
• 1　：1回だけアニメーションします。
• normal：複数回繰り返す時、リーバースさせたりできます。

「＠keyframes fadeIn-ani {0% {opacity: 0;} 100% {opacity: 1;}}」の説明です。
＠keyframesがアニメーションの動作内容を記します。

• fadein-ani　：動作内容の名前を任意で付けてanimationで呼び出します。
• 0%　：初期値です。opacityを掛けて最初は見えなくします。
• 100%　：終了値です。最終的に表示100%になります。

0%から100%に掛けてアニメーションすることになります。

まとめ

jQueryを使わずアニメーションをさせるとページが軽くなるのと、BOTに不信感を持たせないのでSEO的にも良いんじゃないかと妄想しています。

軽くなる事はいい事でデメリットもあります。ページ全体的に効果を掛けて表示される順番にフェードインを始めようと思ったらページの位置を取得する必要があるので結局CSSだけでは実現できません。

使用どころとしてはマウスオーバーでアニメーションをさせるようなボタンなどに使用するのが現実的ですね＾＾