Html animierte Inhalte wie zu

Question

Ich habe eine Aufgabe, die lebendige animierte Bildschirminhalt wie dieses Beispiel unten erfordert. Ich bin neugierig, wie dieses Beispiel gemacht wurde, CSS, Sprite, Gif, Video? Es zeigt, Schiebe Bildschirme, animierte Bildlaufleisten, Seitenumbruch, Verschieben von Symbolen usw. alle zeitgesteuert als eigenständiger Film. irgendwelche Ideen, wie das unten gemacht wird und so effizient zu laufen, wird sehr geschätzt.

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

Answer 1

CSS-Animationen verwenden. HubbBlog is a great source for coding information.https://www.w3schools.com/css/css3_animations.asp W3Schools hat ein gutes Tutorial darüber. Javascript wurde auch am häufigsten verwendet, um zu erkennen, wo sich der Benutzer auf der Seite befand.

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>