Unicefウェブアニメーション

Question

ゲートアニメーションとズームページの切り替えについて教えてもらえますか？this Unicef web、このクールなアニメーションを作りたいです。少なくともそれを見つける方法を "キーワード"を教えてください。 html5で作られたものですか？

Answer 1

Unicefアニメーションでは、開発者はGSAP JSライブラリとCSSトランジションを使用したJavaScriptのミックスアプローチを使用しています。

Chromeデベロッパーツールを使用して、bundle.jsとscreen.cssファイルのコードを見ることができます。

一般的に使用することができます：

• CSSキーフレームアニメーション
• CSSトランジション
• あなたのHTML内のDOM要素をアニメーション化するのJavaScriptバニラやいくつかのライブラリ
• ウェブアニメーションAPI

ページ。

CSS Keyframe Animationを使用して簡単な拡大/縮小効果を作成しましたが、jQuery、GSAP、VelocityなどのJavaScriptライブラリを使用して同様の効果を得ることができます。

• animate.css（CSS：あなたは、いくつかの既製のエフェクトを使用しても検討することもでき、アニメーションを引く私はあなたがよりシンプル必要かわり場合、GSAPなどの特殊なJSライブラリを使用することをお勧めし、より複雑なアニメーション、目に

  キーフレームアニメーション）

• animatelo.js（ウェブアニメーションAPI） - 私はこのライブラリを作成している放棄:)

それは本当にあなたのアニメーションとあなたのスキルセットの複雑さに依存します。

#mario { 
 
    background: url(http://vignette1.wikia.nocookie.net/the-new-super-mario-bros/images/7/7e/200px-Mario_Nintendo.png/revision/latest?cb=20140505185215); 
 
    background-repeat: no-repeat; 
 
    width: 375px; 
 
    height: 375px; 
 
    -webkit-transform-origin: 0 0; 
 
    -ms-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
    -webkit-animation: leaves 5s ease-in-out infinite alternate; 
 
    animation: marioAnim 5s ease-in-out infinite alternate; 
 
} 
 

 
@-webkit-keyframes marioAnim { 
 
    0% { 
 
    -webkit-transform: scale(1.0); 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(2.0); 
 
    } 
 
} 
 

 
@keyframes leaves { 
 
    0% { 
 
    transform: scale(1.0); 
 
    } 
 
    100% { 
 
    transform: scale(2.0); 
 
    } 
 
}

<div id="mario"></div>