Webにふわっと表示されるスライド+フェードアニメをCSSで手軽に実装する方法

最近のウェブサイトに多く見られる、写真やメニューが「ふわっ」と表示されるアニメーションありますよね。あれを実装したいという方のために、一番簡単なCSSでの作り方を紹介します。JavaScriptを使えば、スクロールに合わせてふわっと表示できますが、少し難易度がたかいため、最後に少しだけご紹介します。がほとんどこれで十分でしょう。

Gナビ編（スクロール関係なし）

ファーストビューで表示されるグローバルナビは、スクロール関係なくふわっと表示させたいので、JavaScriptの必要なく下記コードだけでじっそうできまあす。Gnavの他にも企業ロゴや電話番号など、ファーストビューで見られるようなページ上段に出てくる要素なら何でも構いませんが、ページ下部の要素には向きません。

CSS

.fadenav{animation: fadeIn 2s ease 0s 1 normal;}
 @keyframes fadeIn { from {
     opacity: 0;
     transform: translateY(-20px);<!-- フェード前の位置 -->
 }
 to {
     opacity: 1;
     transform: translateY(0);<!-- フェードの位置 -->
 }
 }

HTML

<nav class="fadenav">
<ul>
<li>TOP</li>
<li>メニュー</li>
<li>お問い合わせ</li>
</ul>
</nav>

スクロール追随編（要JavaScript）

スクロールにあわせてスライド＆フェードアニメーションを表示する、よくある演出です。JavaScriptが必要ですがHTMLの最後に追記するだけのもので、特に難しいものではありません。（⚠️要jQary）

HTML

ここは先ほどのGナビ編と変わりません。（class名だけfadeinに変更）

<nav class="fadein">
<ul>
<li>TOP</li>
<li>メニュー</li>
<li>お問い合わせ</li>
</ul>
</nav>

CSS

class名はfadeinとしていますが、同名をJavaScriptと同時に修正すれば他のクラス名でも構いません。

/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

JavaScript

HTML後半の</body>直前にコピペしてください。

<script type="text/javascript">
    $(function(){
        $(window).scroll(function (){
            $('.fadein').each(function(){
                var elemPos = $(this).offset().top;
                var scroll = $(window).scrollTop();
                var windowHeight = $(window).height();
                if (scroll > elemPos - windowHeight + 200){
                    $(this).addClass('scrollin');
                }
            });
        });
    });
</script>

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

参考にしたサイト

参考にしたページは以下のサイトです。細かい設定変更の際はそちらを見てください。

CSS だけで Web ページのフェードイン表示を実装する方法 | q-Az

q-az.net

【CSS】ページ読み込み時にフワっとスライドフェードインするアニメーション

ブログなどでページを読み込んだ時にふわ〜っと記事のタイトルやヘッダーがスライドして出てくるのをよく見かけるようになりました。最近このブログでも記事のタイトル部…

web-ashibi.net

海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法 | imasashi.net

最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するに…

imasashi.net