현실적인 HTML5 나뭇잎 떨어지는 animation_html5 튜토리얼 기술

이 HTML5 나뭇잎 떨어지는 애니메이션은 웹킷 코어를 기반으로 합니다. 즉, 이 애니메이션은 웹킷 코어가 있는 브라우저에서만 사용할 수 있습니다.

소스코드 다운로드 데모주소

HTML 코드

XML/HTML 코드클립보드에 콘텐츠 복사

1. <div id="컨테이너" >
4. <div id="leafContainer" >div>
6. <div id="메시지" >
< /
7. 저> div>
8. div>
9. CSS 코드 CSS 코드클립보드에 콘텐츠 복사
1. #container {   
2.     직위: 친척;   
3.     높이: 700px;   
4.     너비: 500px;   
5.     여백: 10px 자동;   
6.     오버플로: 숨김;   
7.     테두리: 4px 단단함 #5C090A;   
8.     배경: #4E4226 url('images/BackgroundLeaves.jpg') 반복 금지 상단 왼쪽;   
9. }   
10.   
11. /* leafContainer div의 위치와 크기를 정의합니다.*/ 
12. #leafContainer    
13. {   
14.     위치: 절대;   
15.     너비: 100%;   
16.     높이: 100%;   
17. }  
18.   
19. /* 메시지 div의 모양, 위치 및 크기를 정의합니다.*/ 
20. #message   
21. {   
22.     위치: 절대;   
23.     상단: 160px;   
24.     너비: 100%;   
25.     높이: 300px;   
26.     배경:투명 URL( 'images/textBackground.png') 반복-x center;   
27.     색상: #5C090A;   
28.     글꼴 크기: 220%;   
29.     글꼴군: '조지아';   
30.     텍스트 정렬: 가운데;   
31.     패딩: 20px 10px;   
32.     -webkit-box-sizing: 테두리-box;   
33.     -webkit-배경-크기: 100% 100%;   
34.     z-색인: 1;   
35. }   
36.   
37. p {   
38.   여백: 15px;   
39. }   
40.   
41. 아   
42. {   
43.   색상: #5C090A;   
44.   텍스트 장식: 없음;   
45. }   
46.   
47. /* '공룡의 가드닝 서비스' 메시지 색상 설정 */ 
48. em    
49. {   
50.     글꼴 두께: 굵게;   
51.     글꼴 스타일: 일반;   
52. }   
53.   
54. .phone {   
55.   글꼴 크기: 150%;   
56.   세로 정렬: 가운데;   
57. }  
58.   
59. /* 이 CSS 규칙은 leafContainer div의 모든 div 요소에 적용됩니다.  
60.    각 leafDiv의 스타일을 지정하고 애니메이션을 적용합니다.  
61. */  
62. #leafContainer > div    
63. {   
64.     위치: 절대;   
65.     너비: 100px;   
66.     높이: 100px;   
67.   
68.     /* 다음 속성을 사용하여 각 잎에 페이드 및 드롭 애니메이션을 적용합니다.  
69.        이러한 각 속성은 두 가지 값을 갖습니다. 이러한 값은 각각 설정  
과 일치합니다.
70.        페이드 앤 드롭용.  
71.     */  
72.     -webkit-animation-iteration-count: 무한, 무한;   
73.     -webkit-animation-방향: 정상, 정상;   
74.     -webkit-animation-timing-function: 선형, ease-in;   
75. }  
76.   
77. /* 이 CSS 규칙은  
인 div 요소 내부의 모든 img 요소에 직접 적용됩니다.
78.    leafContainer div 내부에서 직접 즉, 'img' 요소
와 일치합니다.
79. createALeaf() 함수에서 생성된 leafDivs 내부.  
80. */  
81. #leafContainer > div > img {   
82.      위치: 절대;   
83.      너비: 100px;   
84.      높이: 100px;   
85.   
86.     /* 우리는 다음 속성을 사용하여 시계방향Spin 또는 반시계방향SpinAndFlip  
을 조정합니다.
87.        각 잎에 애니메이션이 표시됩니다.  
88.        Leaves.js 파일의 createALeaf 함수는 리프에  
이 있는지 여부를 결정합니다.
89.        시계 방향 회전 또는 시계 반대 방향 회전 및 뒤집기 애니메이션.  
90.     */  
91.      -webkit-animation-iteration-count: 무한;   
92.      -webkit-animation-방향: 대체;   
93.      -webkit-animation-timing-function: ease-in-out;   
94.      -webkit-transform-origin: 50% -100%;   
95. }   
96.   
97. /* 애니메이션의 끝 부분에 나뭇잎을 숨깁니다.*/ 
98. @-webkit-keyframes 페이드   
99. {   
100.     /* 애니메이션의 95% 이하에 있는 동안 나뭇잎을 표시하고 숨깁니다. 그렇지 않으면 */  
101.     0%   { 불투명도: 1; }   
102.     95%  { 불투명도: 1; }   
103.     100% { 불투명도: 0; }   
104. }  
105.   
106. /* Y축에서 -300~600픽셀에서 나뭇잎을 떨어뜨립니다.*/  
107. @-webkit-keyframes drop   
108. {   
109.     /* 애니메이션 시작 부분의 y축에서 리프를 -300픽셀로 이동합니다.*/ 
110.     0%   { -webkit-transform: translate(0px, -50px); }   
111.     /* 애니메이션 끝의 y축에서 리프를 600픽셀로 이동합니다.*/ 
112.     100% { -webkit-transform: translate(0px, 650px); }   
113. }   
114.   
115. /* 2D 공간에서 리프를 -50도에서 50도까지 회전합니다.*/  
116. @-webkit-keyframes clockwiseSpin   
117. {   
118.     /* 애니메이션 시작 시 2D 공간에서 잎을 -50도 회전합니다.*/ 
119.     0%   { -webkit-transform: 회전(-50도); }   
120.     /* 애니메이션 끝의 2D 공간에서 잎을 50도 회전합니다.*/ 
121.     100% { -webkit-transform: 회전(50도); }   
122. }   
123.   
124. /* 나뭇잎을 뒤집고 2D 공간에서 50도에서 -50도로 회전합니다.*/ 
125. @-webkit-keyframes counterclockwiseSpinAndFlip    
126. {   
127.     /* 애니메이션 시작 시 나뭇잎을 뒤집고 2D 공간에서 50도 회전합니다.*/ 
128.     0%   { -webkit-transform: 배율(-1, 1) 회전(50도); }   
129.     /* 애니메이션 끝의 2D 공간에서 나뭇잎을 뒤집고 -50도 회전합니다.*/ 
130.     100% { -webkit-transform: 배율(-1, 1) 회전(-50deg); }   
131. }   

JavaScript대码

JavaScript 코드复复内容到剪贴板

1. /* 애니메이션에 사용할 나뭇잎 수 정의 */ 
2. const NUMBER_OF_LEAVES = 30;   
3.   
4. /*   
5.     'Falling Leaves' 페이지가 완전히 로드되면 호출됩니다.  
6. */  
7. 함수 init()   
8. {   
9.     /* 나뭇잎을 포함할 요소에 대한 참조 가져오기*/ 
10.     var 컨테이너 = document.getElementById('leafContainer');   
11.     /* 빈 용기에 새 잎을 채웁니다.*/  
12.     for (var i = 0; i < NUMBER_OF_LEAVES; i )    
13.     {   
14.         container.appendChild(createALeaf());   
15.     }   
16. }   
17.   
18. /*  
19.     범위 및  
의 가장 낮은 값과 가장 높은 값을 수신합니다.
20.     해당 범위에 속하는 임의의 정수를 반환합니다.  
21. */  
22. 함수 randomInteger(low, high)   
23. {   
24.     반품 낮음   Math.floor(Math.random() * (높음 - 낮음));   
25. }   
26.   
27. /*  
28.    범위 및  
의 가장 낮은 값과 가장 높은 값을 수신합니다.
29.    해당 범위 내에 속하는 무작위 부동 소수점을 반환합니다.  
30. */  
31. 함수 randomFloat(낮음, 높음)   
32. {   
33.     반환 낮음   Math.random() * (높음 - 낮음);   
34. }   
35.   
36. /*  
37.     숫자를 수신하고 해당 CSS 픽셀 값을 반환합니다.  
38. */  
39. 함수 pixelValue(값)   
40. {   
41.     반환 값   'px';   
42. }  
43.   
44. /*  
45.     떨어지는 애니메이션의 지속 시간 값을 반환합니다.  
46. */  
47.   
48. 함수 durationValue(값)   
49. {   
50.     return 값   의';   
51. }  
52.   
53. /*  
54.     img 요소를 사용하여 각 리프를 생성합니다. "Leaves.css"는 두 가지 회전을 구현합니다.  
55. 나뭇잎에 대한 애니메이션: 시계방향Spin 및 시계 반대방향SpinAndFlip. 이  
56.     함수는 이러한 회전 애니메이션 중 각 잎에 적용되어야 하는 애니메이션을 결정합니다.  
57.  
58. */  
59. 함수 createALeaf()   
60. {   
61.     /* 래퍼 div와 빈 img 요소*/ 
를 만들어 시작합니다.
62.     var leafDiv = document.createElement('div');   
63.     var image = document.createElement('img');   
64.   
65.     /* 나뭇잎 이미지를 무작위로 선택하고 새로 생성된 요소에 할당합니다.*/ 
66.     image.src = 'images/realLeaf'   randomInteger(1, 5)   '.png';   
67.   
68.     leafDiv.style.top = "-100px";   
69.   
70.     /* 화면을 따라 임의의 위치에 리프를 배치합니다.*/  
71.     leafDiv.style.left = pixelValue(randomInteger(0, 500));   
72.   
73.     /* 무작위로 회전 애니메이션 선택 */  
74.     var spinAnimationName = (Math.random() < 0.5) ? '시계 방향 회전' : '반시계 방향 회전 및 뒤집기';   
75.   
76.     /* -webkit-animation-name 속성을 다음 값으로 설정 */  
77.     leafDiv.style.webkitAnimationName = '페이드, 드롭';   
78.     image.style.webkitAnimationName = spinAnimationName;   
79.   
80.     /* 페이드 및 드롭 애니메이션의 무작위 지속 시간을 파악합니다.*/  
81.     var fadeAndDropDuration = durationValue(randomFloat(5, 11));   
82.   
83.     /* 회전 애니메이션의 또 다른 무작위 지속 시간을 알아냅니다.*/  
84.     var spinDuration = durationValue(randomFloat(4, 8));   
85.     /* -webkit-animation-duration 속성을 다음 값으로 설정 */  
86.     leafDiv.style.webkitAnimationDuration = fadeAndDropDuration   ', '   fadeAndDropDuration;   
87.   
88.     var leafDelay = durationValue(randomFloat(0, 5));   
89.     leafDiv.style.webkitAnimationDelay = leafDelay   ', '   leafDelay;   
90.   
91.     image.style.webkitAnimationDuration = spinDuration;   
92.   
93.     //  
      
94.     leafDiv.appendChild(이미지);   
95.   
96.     /* 문서에 추가할 수 있도록 이 img 요소를 반환합니다.*/ 
97.     반환 leafDiv;   
98. }   
99.   
100. /* 'Falling Leaves' 페이지가 완전히 로드되면 init 함수를 호출합니다.*/ 
101. window.addEventListener('load', init, false);