CSS3とJavaScriptを使用したフリップボードアニメーション

こんにちは 確かに多くの人がFlipboardと呼ばれるiOSアプリを見てきました。 そのすべてのメリットについて、それは面白いフリップアニメーションでまず個人的に私を喜ばせました。 あなたのサイトに似たようなものをJavascriptとCSS3だけで実装するというアイデアが生まれました。



この場合、CSS3プロパティtransform：rotate3d（...）を使用しました。これはハードウェアグラフィックアクセラレーションのサポートを必要とし、 Chrome 16+でのみ適切に動作するため、必要なすべてのプロパティを-webkit-プレフィックスに制限しました。 不適切なパラメーターを持つユーザー向けの制作では、アニメーションをよりシンプルなものに置き換えました。



最終結果は次のとおりです。







ライブデモ







HTMLから始めましょう。 実質的にソースhtmlに依存しないユニバーサルスクリプトを作成したかったため、目的のクラス、画像、アニメーションを開始するリンクを含むコンテナのみが含まれます。

<div class="flip-images"> <img src="./images/image_1.jpg"> <img src="./images/image_2.jpg"> <img src="./images/image_3.jpg"> </div> <a href="#" id='flip-one-more'>Flip</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スクリプトはほとんどの部分で規制機能を実行しますが、その最初のタスクは解析であり、画像のURLを配列に入れます（便宜上jQueryを使用します）。

 var image_index = 0; //   var images = parse_image_container(); function collect_images(){ var images = new Array(); $('.flip-images img').each(function(){ images.push($(this).attr('src')); $(this).remove(); }); return images; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

collect_images（）関数が機能した後、flip-imagesクラスの空のコンテナがありました。必要なすべてのレイヤーを含むhtmlテンプレートでそれを埋める必要があります。 毎回、アニメーションを反転するために2つの画像が必要になります。1つは前面に、もう1つは背面にあります。さらに、各画像を2つの部分に分割する必要があります。

 $('.flip-images').append("<div class='flip-container'>\ <div class='flip-top'>\ <div class='shadow-front'></div>\ <div class='front-image-top'></div>\ <div class='back-image-bottom'></div>\ <div class='shadow-back'></div>\ </div>\ <div class='back-image-top'></div>\ <div class='flip-bottom'>\ <div class='shadow-bottom'></div>\ <div class='front-image-bottom'></div>\ </div>\ </div>");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、フリップトップクラスのコンテナは裏返され、フリップボトムコンテナと重なります。



必要な画像を必要なコンテナに分解するために残り、このロールはplace_images（）関数に割り当てられます：

 function place_images(){ var next_image_index = image_index+1; if(next_image_index==images.length){ next_image_index = 0; } var front_image = "<img src='"+images[image_index]+"'>"; var back_image = "<img src='"+images[next_image_index]+"'>"; $('.back-image-top').html("").append(back_image); $('.back-image-bottom').html("").append(back_image); $('.front-image-top').html("").append(front_image); $('.front-image-bottom').html("").append(front_image); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

前面の画像の下部と上部を担当する2つのコンテナにimage_index画像を配置し、背面の画像のコンテナに次の画像を配置するだけです。



スクリプトに残っている唯一のことは、アニメーションを開始するためにリンクにアクションを配置することですが、これについては後ほど扱います。 CSSに移りましょう。 各クラスを個別にペイントするのではなく、それらはプリミティブです。重要な点についてのみコメントします。

 .flip-images img{ width: 300px; height: 200px; } .flip-container{ width: 300px; height: 200px; position: relative; -webkit-perspective: 600px; } .flip-top{ height: 100px; overflow: hidden; width: 300px; } .flip-bottom{ position: relative; width: 300px; height: 100px; } /*   */ .front-image-top{ /*     */ display: block; -webkit-backface-visibility: hidden; /*    */ position: absolute; top: 0px; width: 300px; height: 100px; /* ,       */ overflow: hidden; /*  */ z-index: 900; } .front-image-bottom{ /*     */ height: 100px; width: 300px; overflow: hidden; vertical-align: bottom; position: absolute; z-index: -2; } .front-image-bottom img{ position: absolute; top: -100px; /*     ,    */ } /*   */ .back-image-top{ height: 100px; position: absolute; top: 0px; vertical-align: top; overflow: hidden; z-index: -1; } .back-image-bottom{ display: block; position: absolute; top: 0px; height: 100px; -webkit-transform: rotateY(180deg) rotateZ(180deg); /*       */ overflow: hidden; width: 300px; -webkit-backface-visibility: hidden; z-index: 800; } .back-image-bottom img{ position: absolute; top: -100px; } /**/ .shadow-top-front{ position: absolute; background: #000; z-index: 1000; width: 300px; height: 100px; -webkit-backface-visibility: hidden; opacity: 0; /*  ,    */ } .shadow-top-back{ position: absolute; top: 0px; width: 300px; height: 100px; background: #000; z-index: 1000; -webkit-backface-visibility: hidden; -webkit-transform: rotateY(180deg); /*   ,       */ opacity: 1; /*  ,    */ } .shadow-bottom{ width: 300px; height: 100px; position: absolute; z-index: -1; background: #000; opacity: 0; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この段階では、すべての画像が配置されています。残っているのはアニメーションを設定することだけです。そのためには、keyframesプロパティを使用します。



メインアニメーションはフリップと呼ばれ、次のようになります。画像の上部が落ち、下部から戦い、少し上に飛んで再び下に落ちます。 したがって、CSSで表示されます。

 @-webkit-keyframes flip { 0% { -webkit-transform: rotate3d(1,0,0, 0deg); } 50% { -webkit-transform: rotate3d(1,0,0, -180deg); } 60% { -webkit-transform: rotate3d(1,0,0, -155deg); } 70% { -webkit-transform: rotate3d(1,0,0, -140deg); } 100% { -webkit-transform: rotate3d(1,0,0, -180deg); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

間隔と回転値は試行錯誤によって選択されます。 影のアニメーションも同様に作成されます。

 @-webkit-keyframes shadowTopFront{ 0% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes shadowTopBack { 0% { opacity: 0.8; } 50% { opacity: 0; } 60% { opacity: 0.05; } 70% { opacity: 0.1; } 100% { opacity: 0; } } @-webkit-keyframes shadowBottom { 0% { opacity: 0; } 50% { opacity: 0.6; } 60% { opacity: 0.4; } 70% { opacity: 0.3; } 100% { opacity: 0.5; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アニメーションを実行するクラスの説明は残ります。

 .flip { /*background: #ccc;*/ width: 200px; height: 100px; -webkit-transform-origin: bottom; -webkit-animation: flip 1s; /*    */ -webkit-animation-iteration-count: 1; /*    */ -webkit-animation-timing-function: cubic-bezier(0,0,1,0.5); /*        */ -webkit-transform: rotate3d(1,0,0, 180deg); /*   ,        0 */ } .shadow-top-front-animate{ -webkit-animation: shadowTopFront 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0,0,1,0.5); opacity: 0; } .shadow-top-back-animate{ -webkit-animation: shadowTopBack 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0,0,1,0.5); opacity: 0; } .shadow-bottom-animate{ -webkit-animation: shadowBottom 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0,0,1,0.5); opacity: 1; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

javascriptに戻り、id flip-one-moreのリンクをクリックするアクションを設定しましょう。 適切なコンテナをクリックすることにより、必要な画像を置き換え、アニメーションを含むクラスを追加し、image_index変数を増やす必要があります。

 $('#flip-one-more').click(function(){ place_images(image_index); $('.flip-top').addClass('flip'); $('.shadow-top-front').addClass('shadow-top-front-animate'); $('.shadow-top-back').addClass('shadow-top-back-animate'); $('.shadow-bottom').addClass('shadow-bottom-animate'); image_index = image_index + 1; if(image_index==images.length){ image_index = 0; } return false; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このフォームでは、すべてが機能しますが、アニメーションは一度だけ表示され、リンクを繰り返しクリックした後、画像は単純に再配置されます。 これは、CSSアニメーションは1回限りの現象であり、常に元の位置に戻す必要があるためです。 残念ながら、割り当てられたクラスを削除するだけでは問題を解決できませんが、アニメーションを元の状態に戻す簡単で非常に効果的な方法が1つあります。 アニメーションが適用されたブロックを削除して再度追加する必要があります。 その結果、クリックの機能の最終バージョンは次のようになります。

 $('#flip-one-more').click(function(){ flip_container = $('.flip-container'); new_flip_container = flip_container.clone(true); flip_container.before(new_flip_container); $("." + flip_container.attr("class") + ":last").remove(); place_images(); $('.flip-top').addClass('flip'); $('.shadow-top-front').addClass('shadow-top-front-animate'); $('.shadow-top-back').addClass('shadow-top-back-animate'); $('.shadow-bottom').addClass('shadow-bottom-animate'); image_index++; if(image_index==images.length){ image_index = 0; } return false; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これですべてが意図したとおりに機能します。 ほとんどの場合、同様の効果を適用できます。人気のあるすべてのブラウザーで必要なプロパティがサポートされるまで待つだけです。



ご清聴ありがとうございました。コードが理想からほど遠いことを理解しているので、建設的な批判を聞いてうれしいです。



デモ



例付きのアーカイブ



UPD。 例として、接頭辞-moz-、-ms-、および-o-を付けてパラメーターを追加しましたが、Chromeでのみ正しく機能します。



UPD2。 例がChrome 16以降のバグで表示されている場合は、chrome：フラグでいくつかのオプションをオンにしてみてください。

-ソフトウェアレンダリングリストのオーバーライド

-GPUを使用したすべてのページの処理

-GPUによる高速レンダリング