リアルな HTML5 落ち葉アニメーション_html5 チュートリアル スキル

この HTML5 の葉が落ちるアニメーションは Webkit コアに基づいています。つまり、このアニメーションは Webkit コアを備えたブラウザーでのみ使用できます。

ソース コードのダウンロード デモ アドレス

HTML コード

XML/HTML コードコンテンツをクリップボードにコピー

1. <div id="コンテナ" >
4. <div id="leafContainer" >div>
6. <div id="メッセージ" >
< /
7. em> div>
8. div>
9. CSS コード CSS コードコンテンツをクリップボードにコピーします
1. #container {
2. 位置: 相対;   
3. 高さ: 700px;   
4. 幅: 500px;   
5. マージン: 10px 自動;   
6. オーバーフロー: 非表示;   
7. ボーダー: 4px solid #5C090A;   
8. 背景: #4E4226 url('images/backgroundLeaves.jpg') 繰り返しなし トップ 左;   
9. }
11. /* leafContainer div の位置 と 寸法 を定義します */
12. #leafContainer
13. {
14. 位置: 絶対;   
15. 幅: 100%;   
16. 身長: 100%;   
17. }  
19. /* メッセージ div の外観、位置、寸法を定義します*/
20. #message
21. {
22. 位置: 絶対;   
23. トップ: 160px;   
24. 幅: 100%;   
25. 高さ: 300px;   
26. 背景:透明 url( 'images/textBackground.png')繰り返し-x 中央;   
27. カラー: #5C090A;   
28. フォントサイズ: 220%;   
29. フォントファミリー: 'Georgia';   
30. text-align: center;   
31. パディング: 20px 10px;   
32. -webkit-box-sizing: border-box;   
33. -ウェブキット-背景-サイズ: 100% 100%;   
34. z-index: 1;   
35. }
37. p {
38. マージン: 15px;   
39. }
41. a
42. {
43. カラー: #5C090A;   
44. テキスト装飾: なし;   
45. }
47. /*「Dino's Gardening Service」メッセージの色を設定します*/
48. em
49. {
50. font-weight: 太字;   
51. フォント スタイル: 通常;   
52. }
54. .phone {
55. フォントサイズ: 150%;   
56. vertical-align: middle;   
57. }  
59. /* この CSS ルールは、leafContainer div 内のすべての div 要素に適用されます。
60. 各リーフディビジョンのスタイルを設定し、アニメーション化します。
61. */
62. #leafContainer > div
63. {
64. 位置: 絶対;   
65. 幅: 100px;   
66. 高さ: 100px;   
68. /* 次のプロパティを使用して、フェード アニメーションとドロップ アニメーションを各リーフに適用します。
69. これらの各プロパティは 2 つの値を取ります。 これらの値はそれぞれ、設定
に一致します。
70. フェードとドロップの場合。
71. */
72. -webkit-animation-iteration-count: 無限、 無限;   
73. -webkit-animation-方向: 通常、通常;   
74. -webkit-animation-timing-function: リニア、イーズイン;   
75. }  
77. /* この CSS ルールは、
である div 要素内のすべての img 要素に直接適用されます。
78. leafContainer div 内に直接あります。 つまり、「img」要素
と一致します。
79. createALeaf() 関数で作成される leafDiv 内。
80. */
81. #leafContainer > ディビジョン> img {
82. 位置: 絶対;   
83. 幅: 100px;   
84. 高さ: 100px;   
86. /* 時計回りのスピンまたは反時計回りのスピンアンドフリップを調整するには、次のプロパティを使用します
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. }
97. /* アニメーションの最後に向かって葉を非表示にします */
98. @-webkit-keyframes フェード
99. {
100. /* アニメーションの 95 パーセント以下の間は葉を表示し、それ以外の場合は非表示にする */
101. 0% { 不透明度: 1; }
102. 95% { 不透明度: 1; }
103. 100% { 不透明度: 0; }
104. }  
106. /* y 軸で -300 から 600 ピクセル に葉を落とします */
107. @-webkit-keyframes ドロップ
108. {
109. /* アニメーションの開始時に葉を Y 軸の -300 ピクセルに移動します*/
110. 0% { -webkit-transform: translate(0px,-50px); }
111. /* アニメーションの終了時に葉を Y 軸の 600 ピクセルに移動します*/
112. 100% { -webkit-transform: translate(0px, 650px); }
113. }
115. /* 2D 空間で葉を -50 度から 50 度まで回転します*/
116. @-webkit-keyframes 時計回りに回転
117. {
118. /* アニメーションの開始時に 2D 空間で葉を -50 度回転します*/
119. 0% { -webkit-transform: rotate(-50deg); }
120. /* アニメーションの終了時に 2D 空間で葉を 50 度回転します*/
121. 100% { -webkit-transform: rotate(50deg); }
122. }
124. /* 葉を反転し、2D 空間で 50 度から -50 度まで回転します*/
125. @-webkit-keyframes 反時計回りSpinAndFlip
126. {
127. /* アニメーションの開始時に、葉を裏返し、2D 空間で 50 度回転します*/
128. 0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
129. /* アニメーションの最後に、葉を反転し、2D 空間で -50 度回転します*/
130. 100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
131. }

JavaScript 代

JavaScript コード复制コンテンツ到剪贴板

1. /* アニメーションで使用される葉の数を定義します */
2. const NUMBER_OF_LEAVES = 30;   
4. /*
5. 「Falling Leaves」ページが完全に読み込まれると呼び出されます。
6. */
7. 関数 init()
8. {
9. /* 葉を含む要素への参照を取得します */
10. var container = document.getElementById('leafContainer');   
11. /* 空のコンテナに新しい葉を詰める */
12. for (var i = 0; i < NUMBER_OF_LEAVES; i )
13. {
14. container.appendChild(createALeaf());   
15. }
16. }
18. /*
19. 範囲の最小値と最大値を受け取ります。
20. その範囲内にあるランダムな整数を返します。
21. */
22. 関数 randomInteger(low, high)
23. {
24. return low Math.floor(Math.random() * (high - low));   
25. }
27. /*
28. 範囲の最小値と最大値を受け取り、
29. は、その範囲内にあるランダムな浮動小数点数を返します。
30. */
31. 関数 randomFloat(low, high)
32. {
33. return low Math.random() * (high - low);   
34. }
36. /*
37. 数値を受け取り、その CSS ピクセル値を返します。
38. */
39. 関数 pixelValue(値)
40. {
41. return 値 'px';   
42. }  
44. /*
45. 落下アニメーションの継続時間の値を返します。
46. */
48. 関数 durationValue(値)
49. {
50. 値 の ;   
51. }  
53. /*
54. img 要素 を使用して各リーフを作成します。 「Leaves.css」は 2 つのスピンを実装します
55. 葉のアニメーション:時計回りのスピンと反時計回りのスピンアンドフリップ。 この
56. 関数は、これらのスピン アニメーションのどれを各リーフに適用するかを決定します。
58. */
59. 関数 createALeaf()
60. {
61. /* ラッパー div と空の img 要素を作成することから始めます*/
62. var leafDiv = document.createElement('div');   
63. var image = document.createElement('img');   
65. /* 葉の画像をランダムに選択し、新しく作成された要素に割り当てます*/
66. image.src = 'images/realLeaf' randomInteger(1, 5) '.png';   
68. leafDiv.style.top = "-100px";   
70. /* 画面に沿ったランダムな位置にリーフを配置します */
71. leafDiv.style.left = pixelValue(randomInteger(0, 500));   
73. /* スピン アニメーションをランダムに選択 */
74. var spinAnimationName = (Math.random() < 0.5) ? '時計回りSpin' : '反時計回りSpinAndFlip';   
76. /* -webkit-animation-name プロパティにこれらの値を設定します */
77. leafDiv.style.webkitAnimationName = 'フェード、ドロップ';   
78. image.style.webkitAnimationName = spinAnimationName;   
80. /* フェード アンド ドロップ アニメーションのランダムな継続時間を計算します */
81. var fadeAndDropDuration = durationValue(randomFloat(5, 11));   
83. /* スピンアニメーションの別のランダムな期間を計算します */
84. var spinDuration = durationValue(randomFloat(4, 8));   
85. /* -webkit-animation-duration プロパティにこれらの値を設定します */
86. leafDiv.style.webkitAnimationDuration = fadeAndDropDuration ', ' fadeAndDropDuration;   
88. var leafDelay = durationValue(randomFloat(0, 5));   
89. leafDiv.style.webkitAnimationDelay = leafDelay ', ' leafDelay;   
91. image.style.webkitAnimationDuration = spinDuration;   
93. // を追加します。 
    に
94. leafDiv.appendChild(画像);   
96. /* この img 要素を返して、ドキュメントに追加できるようにします */
97. return leafDiv;   
98. }
100. /* 「Falling Leaves」ページがフルロードされたときに init 関数を呼び出します */
101. window.addEventListener('load', init, false);   

以上が本書のすべての内容であり、大家学に役立つことが望まれます。