株式会社コプロシステム

お問い合わせ

2015年8月11日

【jQuery】簡単!Flashのようなタイムラインアニメーションを実現するテクニック(レスポンシブ対応)

  • このエントリーをはてなブックマークに追加

【jQuery】簡単!Flashのようなタイムラインアニメーションを実現するテクニック(レスポンシブ対応)

こんにちは、UXデザイン室の松山です。
好きなスタンドは、パープルヘイズです。

前回のTips*Blogでは「背景画像の複数設定と:before、:afterを使ったレスポンシブCSSテクニック」を説明しました。
今回は、jQueryでFlashのタイムラインのように順番にアニメーションを実行するテクニックを説明します。
最近ではFlashを使用しているサイトはほぼ見なくなり、アニメーションならjQueryやCSS3で再現しているサイトがほとんどですが、お客様にむかし流行ったFlashで作るオープニングムービーのようなものを依頼された時にどうやって実装すればいいのか悩んだことはないでしょうか?
そんな時に使えるテクニックをご紹介します。

今回作成したサンプル

まずはサンプルをご覧ください。
サンプルはこちら

順番にアニメーションさせるコードの実装方法

FlashとjQueryのアニメーションの作り方の違い

今回実装するアニメーションとFlashで作るアニメーションの違いとは?
FlashとjQueryはソフトウェアとwebプログラムという根本的な違いがあるのですが、Flashの場合はソフト上でタイムラインにオブジェクトを配置し、それをアニメーションさせてswfという形式のファイルを生成します。
jQueryの場合は、ブラウザ上でjQueryのanimateを使いCSSで要素の位置を移動してアニメーションを作ります。

animateで指定したアニメーションを順番に再生する方法を調べると、いくつか出てくるのですが今回はjQueryの「Deferred」というものを使用して作っていきます。

「Deferred」を調べると「jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです」とのことです。
ちょっと難しいので、分かりやすく説明しているサイトを紹介します。

Deferredについて分かりやすく説明しているサイト

jQuery.Deferred を使ってみる。 | バシャログ。
jQuery.Deferredって何 - Takazudo hamalog

★ポイント★

Deferredを使うと指定した順番にアニメーションを実行できる。

アニメーションにイージングで変化を加える

アニメーションの動きに変化をつけるために、jQueryとは別にイージングのプラグイン「jquery.easing」を使用します。
イージングとは、CSSアニメーションやjQueryで、アニメーションに緩急をつけるために使うプロパティです。
今回は最後に横から出てくるロゴのアニメーションにイージングを使用しています。

jquery.easingの主な動きはこちらを参考に設定しました。

Easing Function 早見表

jQueryとjquery.easingを読み込みます。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

HTMLとCSSの準備

まずは表示させたい順番でdivに分かりやすいidをつけて並べていきます。
それぞれ共通のclass="anime"を指定します。
class="anime"にはopacity:0;を設定し非表示にします。そしてアニメーションする前の初期位置をposition: absolute;で指定しています。位置は基本top:50%;にして、文章の長さにより各要素調整しています。
また、Flashっぽくスキップ機能とリプレイ機能も実装するのでボタンも合わせて用意します。

HTMLソース


<div id="item01" class="anime"><img src="heart_orange.gif" width="239" height="224" alt=""><br>私たちが目指すもの</div>
<div id="item02" class="anime">企業理念</div>
<div id="item03" class="anime">お客様の視点に立って<br>常に新しい価値を共に創る</div>
<div id="item04" class="anime">ビジョン</div>
<div id="item05" class="anime">クライアントと生活者を<span>Happy</span>にする<br><span>No.1</span>企業になる</div>
<div id="item06" class="anime">私たちは<span>Happy</span>をつくる<br>驚くほど細やかに<br>見たこともないやり方で<br>鮮やかに答えを導き出そう<br><span>Make Happy!</span></div>
<div id="item07" class="anime">お客様への約束<span>10</span>ヶ条</div>
<div id="item08" class="anime">私たちは、クライアントとの信頼関係を築くために全力を尽くします。<br>私たちは、クライアントと課題を共有し共に解決の途を探ります。<br>私たちは、クライアントの課題解決のために素晴らしいアイデアを提供します。<br>私たちは、生活者の研究を通して生活者理解を深めます。<br>私たちは、マーケティングの潮流を把握しクライアントに最新の情報を伝えます。<br>私たちは、マーケティング・プロセスの革新を目指します。<br>私たちは、マーケティングのための情報テクノロジーを研鑽し極めます。<br>私たちは、マーケティングのために強固な情報システムを構築します。<br>私たちは、様々な変化を捉え迅速に対応することを目指します。<br>私たちは、マーケティングの現場力を高めるために努力します。</div>
<div id="item09" class="anime">私達の行動<span>10</span>ヶ条</div>
<div id="item10" class="anime">1.常にトレンドを捉え、発信し続けます。<br>2.常にスキルを高め続けます。<br>3.常に新しい領域にチャレンジし続けます。<br>4.常に楽しむ心を持って仕事に取り組み続けます。<br>5.常に仕事に誇りと自信を持ち続けます。<br>6.常に最高のチームワークを発揮し続けます。<br>7.常にサービス品質の向上に努め続けます。<br>8.常に当事者意識を持って課題に取り組み続けます。<br>9.常にどんな課題でも創造的に解決し続けます。<br>10.常にお客様の期待を超える提案をし続けます。</div>
<div id="logo" class="anime"><img src="logo.gif" width="210" height="48" alt=""></div>
<div id="last" class="anime">私たちは<span>コプロシステム</span>です</div>
<div id="skipBtn" class="btn"><a href="#">SKIP</a></div>
<div id="replayBtn" class="btn"><a href="#">REPLAY</a></div>

CSSソース


    body {
        overflow:hidden;
           text-align: center;
    }
    .anime {
        position: absolute;
        margin: auto;
        width: 100%;
        top:50%;
        margin-top:0%;
        opacity:0;
        color:#424242;
        font-size:34px;
        line-height:160%;
        letter-spacing:0.1em;
        font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic", "Osaka",sans-serif;
    }
    .anime span{
        letter-spacing:0em;
    }
    .btn a{
        font-size:12px;
        display:block;
        color:#FFF;
        position: fixed;
        right:10px;
        bottom:10px;
        padding:5px 25px;
        background-color:#999;
        font-weight:bold;
        text-decoration:none;
        font-family: Century Gothic,Arial,sans-serif;    
    }
    #replayBtn {
        display:none;
    }    
    #item01{
        top:35%;    
    }
    #item06{
        top:40%;    
    }
    #item03,
    #item05,
    #last{
        top:45%;    
    }
    #item08,
    #item10{
        top:25%;
        font-size:22px;
        line-height:210%;
        font-weight:normal;
        letter-spacing:0em;
    }    
    #logo{
        left:-300%;
        top:40%;
    }
    #last{
        margin-top: 60px;    
    }
    
    @media screen and (max-width : 480px){
    img{
        max-width: 100%;
        height: auto;
        width /***/:auto;
    }
    .anime{
        font-size:24px;
        width: 96%;
        padding:0 2%;
    }
    .anime img{
        width:45%;
    }
    #item08{
        font-size:9px;
    }
    #item10{
        font-size:12px;
    }
    #last{
        margin-top: 45px;    
    }
    }
    
    @media screen and (max-width : 320px){
    .anime{
        font-size:20px;
    }
    .anime img{
        width:40%;
    }
    #item08{
        top:30%;
        letter-spacing:-0.1em;
    }
    #item10{
        top:25%;
        letter-spacing:0em;
    }
    #last{
        margin-top: 35px;    
    }    
    }

★ポイント★

  • アニメーションを作る時は、絵コンテなどを書いてから実際の作業に入るとズムーズです。
  • 順番にアニメーションさせるdivのid名には順番がわかるように数字を付けると管理しやすいです。

順番にアニメーションさせるJSコード

コードの流れをおおまかに説明します。

  • ①各要素を変数に指定します。
  • ②deferredでアニメーションを順番を設定します。
  • ③リプレイボタンとスキップボタンを設定します。
  • ④各アニメーションを設定します。
  • ⑤最後にアニメーショを実行


$(window).load(function() {
    
    // 各要素を変数に指定します
    var $item01 = $('#item01'),
        $item02 = $('#item02'),
        $item03 = $('#item03'),
        $item04 = $('#item04'),
        $item05 = $('#item05'),
        $item06 = $('#item06'),
        $item07 = $('#item07'),
        $item08 = $('#item08'),
        $item09 = $('#item09'),
        $item10 = $('#item10'),
        $logo = $('#logo'),
        $last = $('#last'),
        $skip = $('#skipBtn');
        $replay = $('#replayBtn');
        showitem = {opacity:1,top:"-=5%"}; // 上に5%移動しながら表示
        hideitem = {opacity:0,top:"-=10%"}; // 上に10%移動しながら非表示

    // アニメーションの順番を設定
    function playAnimation(){
        animation01()
            .then(animation02)
            .then(animation03)
            .then(animation04)
            .then(animation05)
            .then(animation06)
            .then(animation07)
            .then(animation08)
            .then(animation09)
            .then(animation10)
            .then(logo)
            .then(last);
    }
    
    // リプレイボタンを設定
    $replay.on('click', function(){
        onReplay();
    });
    
    // リプレイ処理
    function onReplay(){
        $item01.stop(true, true).show().css({'top': 35 + "%"});
        $item02.stop(true, true).show().css({'top': 50 + "%"});
        $item03.stop(true, true).show().css({'top': 45 + "%"});
        $item04.stop(true, true).show().css({'top': 50 + "%"});
        $item05.stop(true, true).show().css({'top': 45 + "%"});
        $item06.stop(true, true).show().css({'top': 40 + "%"});
        $item07.stop(true, true).show().css({'top': 50 + "%"});
        $item08.stop(true, true).show().css({'top': 25 + "%"});
        $item09.stop(true, true).show().css({'top': 50 + "%"});
        $item10.stop(true, true).show().css({'top': 25 + "%"});
        $logo.stop(true, true).show().css({'left': -300 + "%",'opacity': 0});
        $last.stop(true, true).show().css({'opacity': 0,'top' :45 + "%"});
        $skip.stop(true, true).show();
        $replay.stop(true, true).hide();
        playAnimation();
    }
    
    // スキップボタンを設定
    $skip.on('click', function(){
        onSkip();
        return false;
    });

    // スキップ処理
    function onSkip(){ 
        $item01.stop(true, true).hide();
        $item02.stop(true, true).hide();
        $item03.stop(true, true).hide();
        $item04.stop(true, true).hide();
        $item05.stop(true, true).hide();
        $item06.stop(true, true).hide();
        $item07.stop(true, true).hide();
        $item08.stop(true, true).hide();
        $item09.stop(true, true).hide();
        $item10.stop(true, true).hide();
        $logo.stop(true, true).css({'left': 0 + "%",'opacity': 1});
        $last.stop(true, true).css({'opacity': 1,'top' :40 + "%"});
        $skip.stop(true, true).hide();
        $replay.stop(true, true).show();
    }        

    // 各アニメーションを順番に記述します
    function animation01() {
        var d = new $.Deferred;
        $item01.animate(showitem,2000, function(){d.resolve();});
        return d.promise();
    }
    function animation02(){
        var d = new $.Deferred;
        $item01.animate(hideitem,1000),
        $item02.delay(1000).animate(showitem,2000, function(){d.resolve();});
        return d.promise();
    }
    function animation03(){
        var d = new $.Deferred;
        $item02.delay(500).animate(hideitem,1000),
        $item03.delay(1000).animate(showitem,2000, function(){d.resolve();});
        return d.promise();
    }
    function animation04(){
        var d = new $.Deferred;
        $item03.delay(500).animate(hideitem,1000),
        $item04.delay(1000).animate(showitem,2000, function(){d.resolve();});
        return d.promise();
    }
    function animation05(){
        var d = new $.Deferred;
        $item04.delay(500).animate(hideitem,1000),
        $item05.delay(1000).animate(showitem,2000, function(){d.resolve();});
        return d.promise();
    }
    function animation06(){
        var d = new $.Deferred;
        $item05.delay(500).animate(hideitem,1000),
        $item06.delay(1000).animate(showitem,2000, function(){d.resolve();});
        return d.promise();
    }    
    function animation07(){
        var d = new $.Deferred;
        $item06.delay(500).animate(hideitem,1000),
        $item07.delay(1000).animate(showitem,2000, function(){d.resolve();});
        return d.promise();
    }
    function animation08(){
        var d = new $.Deferred;
        $item07.delay(500).animate(hideitem,1000),
        $item08.delay(1000).animate(showitem,2000, function(){d.resolve();});
        return d.promise();
    }
    function animation09(){
        var d = new $.Deferred;
        $item08.delay(4000).animate(hideitem,1000),
        $item09.delay(4500).animate(showitem,2000, function(){d.resolve();});
        return d.promise();
    }
    function animation10(){
        var d = new $.Deferred;
        $item09.delay(1500).animate(hideitem,1000),
        $item10.delay(2000).animate(showitem,2000, function(){d.resolve();});
        return d.promise();
    }    
    function logo(){
        var d = new $.Deferred;
        $item10.delay(4000).animate(hideitem,1000),
        $logo.delay(5500).animate({opacity:1,left:0 + "%"},2000, 'easeOutBack', function(){d.resolve();});
        return d.promise();
    }
    function last(){
        var d = new $.Deferred;
        $last.delay(500).animate(showitem,2000),
        $skip.hide(),
        $replay.show(function(){d.resolve();});
        return d.promise();
    }    

    // 実行
    playAnimation();

}());

★ポイント★

animateで「top:"-=5%"」と設定をすると現在の位置から上に5%移動するように指定できます。

Deferredを使用したアニメーションについて参考にした資料

【32:jQuery.Deferred】要素を順にアニメーション表示 - one's way blog

今回のポイント

  • ・Deferredを使用すれば指定した順番にアニメーションを実行できる
  • ・animateで「-=」や「+=」を使うと、現在の位置からという指定が可能
  • ・Flashのようにスキップボタンやリプレイボタンの実装が可能

まとめ

今回の記事はいかがでしたでしょうか?
順番にアニメーションを実行するという単純なコードですが、アニメーション以外にも応用できるかと思います。
cssで位置を指定してアニメーションさせるのは面倒ですが、始めに絵コンテで動きを決めておけば難しくはありません。
ぜひ挑戦してみて下さい。

  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Webデザイン」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP