Html animated content 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>