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);<!-- フェードの位置 -->
 }
 }
class=”fadenav”

class名をfadenavとしていますが、変更して大丈夫です。(⚠️一般的なfadeinというクラス名だと他のクラスと干渉しそうなので)

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

jQuery

現在のjQueryバージョンがなにかよくわかりませんが、私の場合は下記のバージョンで動いています。このコードをhtmlの</body>タグ直前あたりにコピペしてください。

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

参考にしたサイト

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

この記事を書いた人

mojigumi

「もじぐみ」の代表、コウです。
主に広告デザインを中心に、企画・出版・編集・印刷、Web制作をしていますが、最近は記事そのものや、ブログ、動画などのコンテンツ配信にも力をいれています。インターネットの時代はコンテンツプロバイダになるのがとても重要。自分自身もランニングアートなど、自分自身がコンテンツになるように心がけています。