jQuery・Animate.css の合わせ技でフルFlashサイトライクな動きを実現
Sublime Text専用のAnimate.cssパッケージを利用します。
アニメや映画などを紹介するエンタメ系サイト、1枚画像をフルで見せるブランディングサイトなどでは、かつて流行したフルFlashサイトのような動きを要求されることがある。
そんな時はAnimate.css を利用すると便利。
検証済みブラウザとOS
- IE 10～
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X Yosemite
- iOS 8
- Android 4.1 / 5
主な作成手順
1. Sublime Text プラグイン「Animate.css Snippets」をインストール
インストールと使い方はこちら。
2. Animate.css 本サイト からCSSファイルをダウンロード
3. ライセンス情報と基本クラスをコピペ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } |
4. コーディング
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <section id="block-01"> <h1>テキスト</h1> <h2>テキスト</h2> <h2>テキスト</h2> <h2>テキスト</h2> <span class="btn">テキスト</span> <!-- /#block-01 --></section> <section id="block-02"> <div> <h1>テキスト</h1> <p>テキスト</p> <span class="btn">テキスト</span> </div> <!-- /#block-02 --></section> <section id="block-03"> <div> <h1>テキスト</h1> <p>テキスト</p> <span class="btn">テキスト</span> </div> <!-- /#block-03 --></section> <section id="block-04"> <div> <h1>テキスト</h1> <p>テキスト</p> <span class="btn">テキスト</span> </div> <!-- /#block-04 --></section> <section id="block-05"> <div> <h1>テキスト</h1> <p>テキスト</p> <span class="btn">テキスト</span> </div> <!-- /#block-05 --></section> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | // アイキャッチ用背景 #bg-lead { width: 100%; min-height: 100%; position: absolute; left: 0; top: 0; background: #000316; } // 各ブロック共通 section { min-height: 100%; color: darken(white, 10%); position: relative; z-index: 9; padding: 10% 30px 0; div { @include opacity(0); } .btn { width: 30%; @include fs(24); text-align: center; display: block; margin-top: 50px; padding: 10px 0; border: 1px solid lighten(white, 10%); border-radius: 5px; } } #block-01 { text-align: center; padding: 10% 0 0; background: url(../images/bg_01.jpg) center no-repeat fixed; background-size: cover; } #block-02 { background: url(../images/bg_02.jpg) center no-repeat fixed; background-size: cover; } #block-03 { background: url(../images/bg_03.jpg) center no-repeat fixed; background-size: cover; } #block-04 { background: url(../images/bg_04.jpg) center no-repeat fixed; background-size: cover; } #block-05 { background: url(../images/bg_05.jpg) center no-repeat fixed; background-size: cover; } #block-01, #block-02, #block-03, #block-04, #block-05 { @include max(1024) { background-attachment: scroll; } } |
ベンダープレフィックスは？ gulp で自動化しましょう。
Sass用のメディアクエリはこちらを参考。
5. Animate.css 本サイトで動きを確認しながらコードを追加
animate と入力するとコードが表示されるので任意のネームを選択。
先方の要望に合わせ、必要な動きを選んでいく。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes slideInUp { 0% { opacity: 0; transform: translateY(100%); } 100% { transform: translateY(0); } } .slideInUp { animation-name: slideInUp; } @keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-5%); } 100% { transform: translateX(0); } } .slideInLeft { animation-name: slideInLeft; } @keyframes slideInDown { 0% { opacity: 0; transform: translateY(-100%); } 100% { transform: translateY(0); } } .slideInDown { animation-name: slideInDown; } |
6. jQueryでクラス追加やスクロール処理を設定
1 2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="js/flash.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | $(function() { // アイキャッチ用背景をHTMLに追加 $("body").append('<span id="bg-lead" class="animated"></span>'); // アニメーショントリガーを追加 $("#block-01, div, h1, h2, .btn").addClass("animated"); // アイキャッチ用背景 $("#bg-lead").css({ "animation-delay": '1s', "-webkit-animation-delay": '1s' // Mac, iOS }).addClass("slideInUp"); // アイキャッチ $("#block-01").css({ "animation-delay": '2s', "-webkit-animation-delay": '2s' }).addClass("fadeIn"); $("#block-01 h1").css({ 'animation-delay': '3s', '-webkit-animation-delay': '3s' }).addClass("slideInDown"); $("#block-01 h2").addClass("fadeIn"); $("#block-01 h2:first").css({ 'animation-delay': '4s', '-webkit-animation-delay': '4s' }); $("#block-01 h2:eq(1)").css({ 'animation-delay': '4.5s', '-webkit-animation-delay': '4.5s' }); $("#block-01 h2:last").css({ 'animation-delay': '5s', '-webkit-animation-delay': '5s' }); $("#block-01 .btn").css({ 'animation-delay': '5.5s', '-webkit-animation-delay': '5.5s' }).addClass("fadeIn"); // 各ブロックのスクロール処理 $(window).scroll(function() { var scrollPoint = $(window).scrollTop(); if (scrollPoint > $("#block-02").offset().top - 500) { $("#block-02 div").addClass("fadeIn"); } if (scrollPoint > $("#block-03").offset().top - 500) { $("#block-03 div").addClass("fadeIn"); } if (scrollPoint > $("#block-04").offset().top - 500) { $("#block-04 div").addClass("fadeIn"); } if (scrollPoint > $("#block-05").offset().top - 500) { $("#block-05 div").addClass("fadeIn"); } }); }); |
注意点
以下の点から作り込みすぎないように注意を。
- 凝ったアニメーションは訪問者の反感を買う可能性が高い
- 修正依頼の対応が面倒
- 手間ばかりかかって予算オーバー
コメントを投稿する