このロケットは CSS3 (アニメーション) を使っていると思いますか? それともjQuery?Web デザイナーが書いた CSS を理解しようとしましたが、ロケットを動かすスタイルが見つかりませんでした。
そんなアニメーションをどうやって作るの?アイデアやチュートリアルがあれば共有してください。こういうアニメーションを学びたいです。ありがとうございました!:)
絶対にありません:
理由を教えてください。次回は自分で理解できるようにします。
Google Chrome で、ロケットの上で「右クリック」->「要素の検査」アクションを使用します。Chrome ではロケットが自動的に選択され、次のようなインラインが表示されます。
<img class="floating-rocket" src="images/rocket.png" alt="Launching" style="margin-top: -90.86px; margin-left: -510.43px; ">
この部分:style="margin-top: -90.86px; margin-left: -510.43px; "
動的に変化し、ロケットを前後に動かします。この動作は CSS では実行できません。影響を受けるタグがimg
タグであり、CSS アニメーション プロパティがないことを確認することで、これを再確認することもできます。
インライン スタイルの変更は、Javascript の典型です。実際、ページに添付された Javascript ファイルを見ると、次のようになります。
http://demo.drythemes.com/thebigbang/js/custom/customUI.js
これには、ロケットを動かす実際の JavaScript が含まれています。
お役に立てれば!
http://demo.drythemes.com/thebigbang/js/custom/customUI.js
ロケットのアニメーションがあります:
$('.floating-rocket').everyTime(10, function () {
$(".floating-rocket").animate({
marginTop: "+=10",
marginLeft: "+=5"
}, 1000, 'linear').animate({
marginTop: "-=10",
marginLeft: "-=5"
}, 1000, 'linear');
});
Javascript アニメーションを使用します。
Chrome Dev Tools を使用して把握してください。Chrome でロケットを右クリックし、[Inspect element] をクリックします。
このウェブサイトのように、これには CSS アニメーションを使用することをお勧めします。
これを行う方法の例を次に示します。
@-webkit-keyframes rocket {
from {
margin-left: -510px;
margin-top: -90px;
}
to {
margin-left: -500px;
margin-top: -100px
}
}
.rocket {
-webkit-animation: rocket 1s alternate infinite linear;
}
もちろん、プレフィックス :DI を付けることを忘れないでください。このソリューションの方が CSS > Javascript の方が優れていると思います。拡大縮小や回転が必要な場合は、簡単に追加できます。