Htmlのアニメーションコンテンツhow to

Question

私は、以下の例のように活気にあふれる動画コンテンツを必要とする課題があります。このサンプルがどのように行われたか、私は興味がありますか？css、sprite、gif、video？スライディングスクリーン、アニメーションスクロールバー、ページネーション、ムービングアイコンなどがすべて自己完結型映画としてタイムリーに表示されます。どのように下に作られ、効率的に実行するためのアイデアは非常に感謝します。

http://urban-walks.com/#slides

Answer 1

アニメーションを使用したCSS。 HubbBlog is a great source for coding information.https://www.w3schools.com/css/css3_animations.asp W3Schoolsには、それに関する良いチュートリアルもあります。 Javascriptは、ユーザーがページのどこにいるかを感知するためにも最もよく使用されていました。

Answer 2

<style> 

body 
{ 
    width: 100%; 
    height: 100%; 
    background-color: lightgreen; 
    position: relative; 
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ 
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ 
    animation-name: example; 
    animation-duration: 4s; 
    font-size: 25px; 

} 

@-webkit-keyframes example { 
    0% {background-color: lightgreen; left:-200px; top:0px;} 
    25% {background-color: lightgreen; left:0px; top:0px;} 

} 

/* Standard syntax */ 
@keyframes example { 
    0% {background-color: lightgreen; left:-200px; top:0px;} 
    25% {background-color: lightgreen; left:0px; top:0px;} 
</style>