Realistische HTML5-Blattfallanimation_html5-Tutorial-Fähigkeiten

Diese HTML5-Animation zum Fallen von Blättern basiert auf dem Webkit-Kern, was bedeutet, dass diese Animation nur in einem Browser mit einem Webkit-Kern verwendet werden kann.

Quellcode-Download Demo-Adresse

HTML-Code

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <div id="container" >
4. <div id="leafContainer" >div>
6. <div id="message" >
< /
7. em> div>
8. div>
9. CSS-Code CSS-CodeInhalt in die Zwischenablage kopieren
1. #container {   
2.     Position: relativ;   
3.     Höhe: 700px;   
4.     Breite: 500px;   
5.     Rand: 10px automatisch;   
6.     Überlauf: versteckt;   
7.     Rahmen: 4px durchgehend #5C090A;   
8.     Hintergrund: #4E4226 URL('images/backgroundLeaves.jpg') no-repeat top links;   
9. }   
10.   
11. /* Definiert die Position und Abmessungen des leafContainer div */  
12. #leafContainer    
13. {   
14.     Position: absolut;   
15.     Breite: 100 %;   
16.     Höhe: 100 %;   
17. }  
18.   
19. /* Definiert das Erscheinungsbild, die Position und die Abmessungen des Nachrichtendivs */  
20. #message   
21. {   
22.     Position: absolut;   
23.     oben: 160px;   
24.     Breite: 100 %;   
25.     Höhe: 300px;   
26.     Hintergrund:transparent URL( 'images/textBackground.png') wiederholen-x Mitte;   
27.     Farbe: #5C090A;   
28.     Schriftgröße: 220 %;   
29.     Schriftfamilie: 'Georgia';   
30.     text-align: center;   
31.     Auffüllung: 20px 10px;   
32.     -webkit-box-sizing: border-box;   
33.     -webkit-Hintergrund-Größe: 100 % 100 %;   
34.     z-index: 1;   
35. }   
36.   
37. p {   
38.   Rand: 15px;   
39. }   
40.   
41. a   
42. {   
43.   Farbe: #5C090A;   
44.   Textdekoration: keine;   
45. }   
46.   
47. /* Legt die Farbe der Nachricht "Dino's Gardening-Service" fest.*/  
48. em    
49. {   
50.     Schriftstärke: fett;   
51.     Schriftstil: normal;   
52. }   
53.   
54. .phone {   
55.   Schriftgröße: 150 %;   
56.   vertikal ausrichten: Mitte;   
57. }  
58.   
59. /* Diese CSS-Regel wird auf alle div-Elemente im leafContainer-div angewendet.  
60.    Es formatiert und animiert jedes LeafDiv.  
61. */  
62. #leafContainer > div    
63. {   
64.     Position: absolut;   
65.     Breite: 100px;   
66.     Höhe: 100px;   
67.   
68.     /* Wir verwenden die folgenden Eigenschaften, um die Einblend- und Abklappanimationen auf jedes Blatt anzuwenden.  
69.        Jede dieser Eigenschaften nimmt zwei Werte an. Diese Werte entsprechen jeweils einer Einstellung  
70.        für Fade und Drop.  
71.     */  
72.     -webkit-animation-iteration-count: infinite, infinite;   
73.     -webkit-animation-Richtung: normal, normal;   
74.     -webkit-animation-timing-function: linear, ease-in;   
75. }  
76.   
77. /* Diese CSS-Regel wird auf alle img-Elemente direkt in div-Elementen angewendet, die  
sind
78.    direkt im leafContainer div. Mit anderen Worten: Es stimmt mit den „img“-Elementen  
überein
79.    innerhalb der LeafDivs, die in der Funktion createALeaf() erstellt werden.  
80. */  
81. #leafContainer > div > img {   
82.      Position: absolut;   
83.      Breite: 100px;   
84.      Höhe: 100px;   
85.   
86.     /* Wir verwenden die folgenden Eigenschaften, um das Spin im Uhrzeigersinn oder das SpinAndFlip im Gegenuhrzeigersinn anzupassen  
87.        Animationen auf jedem Blatt.  
88.        Die Funktion „createALeaf“ in der Datei „Leaves.js“ bestimmt, ob ein Blatt das  
hat
89.        Spin-Animation im Uhrzeigersinn oder gegen den Uhrzeigersinn.  
90.     */  
91.      -webkit-animation-iteration-count: infinite;   
92.      -webkit-animation-Richtung: alternate;   
93.      -webkit-animation-timing-function: ease-in-out;   
94.      -webkit-transform-origin: 50 % -100 %;   
95. }   
96.   
97. /* Versteckt ein Blatt gegen Ende der Animation.*/  
98. @-webkit-keyframes fade   
99. {   
100.     /* Zeige ein Blatt, während in oder unter 95 Prozent der Animation sind und verstecke es, andernfalls */  
101.     0 %   { Deckkraft: 1; }   
102.     95 %  { Deckkraft: 1; }   
103.     100 % { opacity: 0; }   
104. }  
105.   
106. /* Lässt ein Blatt von -300 auf 600 Pixel in der y-Achse fallen */  
107. @-webkit-keyframes drop   
108. {   
109.     /* Bewegen ein Blatt auf -300 Pixel in der y-Achse am Start der Animation.*/  
110.     0%   { -webkit-transform: translate(0px, -50px); }   
111.     /* Ein Blatt auf der Y-Achse am Ende der Animation auf 600 Pixel verschieben.*/  
112.     100 % { -webkit-transform: translate(0px, 650px); }   
113. }   
114.   
115. /* Dreht ein Blatt von -50 bis 50 Grad im 2D-Raum */  
116. @-webkit-keyframes im UhrzeigersinnSpin   
117. {   
118.     /* Ein Blatt im 2D-Raum zu Beginn der Animation um -50 Grad drehen.*/  
119.     0 %   { -webkit-transform: rotate(-50deg); }   
120.     /*  Ein Blatt im 2D-Raum am Ende der Animation um 50 Grad drehen.*/  
121.     100 % { -webkit-transform: rotate(50deg); }   
122. }   
123.   
124. /* Kippt ein Blatt und dreht es von 50 auf -50 Grad im 2D-Raum */  
125. @-webkit-keyframes gegen den UhrzeigersinnSpinAndFlip    
126. {   
127.     /* Ein Blatt umdrehen und im 2D-Raum zu Beginn der Animation um 50 Grad drehen.*/  
128.     0 %   { -webkit-transform: scale(-1, 1) rotate(50deg); }   
129.     /* Ein Blatt umdrehen und am Ende der Animation um -50 Grad im 2D-Raum drehen.*/  
130.     100 % { -webkit-transform: scale(-1, 1) rotate(-50deg); }   
131. }   

JavaScript代码

JavaScript-Code复制内容到剪贴板

1. /* Definieren Sie die Anzahl der Blätter, die in der Animation verwendet werden sollen.*/  
2. const NUMBER_OF_LEAVES = 30;   
3.   
4. /*   
5.     Wird aufgerufen, wenn die Seite „Fallende Blätter“ vollständig geladen ist.  
6. */  
7. Funktion init()   
8. {   
9.     /* Erhalten Sie einen Verweis auf das Element, das die Blätter enthalten wird.*/  
10.     var container = document.getElementById('leafContainer');   
11.     /* Füllen Sie den leeren Behälter mit neuen Blättern */  
12.     for (var i = 0; i < NUMBER_OF_LEAVES; i )    
13.     {   
14.         container.appendChild(createALeaf());   
15.     }   
16. }   
17.   
18. /*  
19.     Erhält die niedrigsten und höchsten Werte eines Bereichs und  
20.     gibt eine zufällige Ganzzahl zurück, die in diesen Bereich fällt.  
21. */  
22. Funktion randomInteger(low, high)   
23. {   
24.     return low   Math.floor(Math.random() * (high - low));   
25. }   
26.   
27. /*  
28.    Erhält die niedrigsten und höchsten Werte eines Bereichs und  
29.    gibt einen zufälligen Float zurück, der in diesen Bereich fällt.  
30. */  
31. Funktion randomFloat(low, high)   
32. {   
33.     return low   Math.random() * (high - low);   
34. }   
35.   
36. /*  
37.     Empfangen eine Zahl und gibt ihren CSS-Pixelwert zurück.  
38. */  
39. Funktion pixelValue(value)   
40. {   
41.     return value   'px';   
42. }  
43.   
44. /*  
45.     Gibt einen Dauerwert für die fallende Animation zurück.  
46. */  
47.   
48. Funktion durationValue(value)   
49. {   
50.     Rückgabe Wert   's';   
51. }  
52.   
53. /*  
54.     Verwendet ein img-Element, um jedes Blatt zu erstellen. „Leaves.css“ implementiert zwei Spins   
55.     Animationen für die Blätter: SpinAndFlip im Uhrzeigersinn und SpinAndFlip gegen den Uhrzeigersinn. Dies  
56.     Funktion legt fest, welche dieser Drehanimationen auf jedes Blatt angewendet werden sollen.  
57.  
58. */  
59. Funktion createALeaf()   
60. {   
61.     /* Erstellen Sie zunächst ein Wrapper-Div und ein leeres IMG-Element.*/  
62.     var leafDiv = document.createElement('div');   
63.     var image = document.createElement('img');   
64.   
65.     /* Wählen Sie zufällig ein Blattbild aus und weisen Sie es dem neu erstellten Element zu.*/  
66.     image.src = 'images/realLeaf'   randomInteger(1, 5)   '.png';   
67.   
68.     leafDiv.style.top = "-100px";   
69.   
70.     /* Positionieren Sie das Blatt an einer zufälligen Stelle auf dem Bildschirm.*/  
71.     leafDiv.style.left = pixelValue(randomInteger(0, 500));   
72.   
73.     /* Wähle zufällig eine Spin-Animation aus.*/  
74.     var spinAnimationName = (Math.random() < 0.5) ? 'im UhrzeigersinnSpin' : 'gegen den UhrzeigersinnSpinAndFlip';   
75.   
76.     /* Legen Sie die Eigenschaft -webkit-animation-name mit diesen Werten fest.*/  
77.     leafDiv.style.webkitAnimationName = 'fade, drop';   
78.     image.style.webkitAnimationName = spinAnimationName;   
79.   
80.     /* Ermitteln Sie eine zufällige Dauer für die Fade- und Drop-Animationen.*/  
81.     var fadeAndDropDuration = durationValue(randomFloat(5, 11));   
82.   
83.     /* Ermitteln Sie eine weitere zufällige Dauer für die Drehanimation.*/  
84.     var spinDuration = durationValue(randomFloat(4, 8));   
85.     /* Legen Sie die Eigenschaft -webkit-animation-duration mit diesen Werten fest.*/  
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.     // füge das  hinzu. zum 
      
94.     leafDiv.appendChild(image);   
95.   
96.     /* Dieses IMG-Element zurückgeben, damit es dem Dokument hinzugefügt werden kann.*/  
97.     return leafDiv;   
98. }   
99.   
100. /* Ruft die Init-Funktion auf, wenn die Seite „Fallende Blätter“ vollständig geladen ist.*/  
101. window.addEventListener('load', init, false);   

以上就是本文的全部内容，希望对大家学习有所帮助.