Compétences du didacticiel animation_html5 de chute de feuilles HTML5 réaliste

Cette animation HTML5 de chute de feuilles est basée sur le noyau du webkit, ce qui signifie que cette animation ne peut être utilisée que sur un navigateur doté d'un noyau de webkit.

Téléchargement du code source Adresse de démonstration

Code HTML

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <div id="conteneur" >
4. <div id="leafContainer" >div>
6. <div id="message" >
em> div>
7. div>
8. Code CSS Code CSSCopier le contenu dans le presse-papiers
1. #container {   
2.     position : relative ;   
3.     hauteur : 700px ;   
4.     largeur : 500px ;   
5.     marge : 10px auto ;   
6.     débordement : caché ;   
7.     bordure : 4px solide #5C090A;   
8.     fond : #4E4226 url('images/backgroundLeaves.jpg') pas de répétition haut gauche;   
9. }   
10.   
11. /* Définit la position et les dimensions de la div leafContainer */  
12. #leafContainer    
13. {   
14.     position : absolue ;   
15.     largeur : 100 % ;   
16.     hauteur : 100 % ;   
17. }  
18.   
19. /* Définit l'apparence, la position et les dimensions du message div */  
20. #message   
21. {   
22.     position : absolue ;   
23.     haut : 160px ;   
24.     largeur : 100 % ;   
25.     hauteur : 300px ;   
26.     fond:transparent url( 'images/textBackground.png') répéter-x centre ;   
27.     couleur : #5C090A ;   
28.     taille de la police : 220 % ;   
29.     font-family : 'Géorgie' ;   
30.     alignement du texte : centre ;   
31.     rembourrage : 20px 10px ;   
32.     -webkit-box-sizing : border-box;   
33.     -webkit-fond-taille : 100 % 100 % ;   
34.     z-index : 1 ;   
35. }   
36.   
37. p {   
38.   marge : 15px ;   
39. }   
40.   
41. a   
42. {   
43.   couleur : #5C090A ;   
44.   texte-décoration : aucun ;   
45. }   
46.   
47. /* Définit la couleur du message "Le service de jardinage de Dino" */  
48. em    
49. {   
50.     font-weight : gras ;   
51.     style de police : normal;   
52. }   
53.   
54. .phone {   
55.   taille de police : 150 % ;   
56.   alignement vertical : milieu ;   
57. }  
58.   
59. /* Cette règle CSS est appliquée à tous les éléments div dans le leafContainer div.  
60.    Il stylise et anime chaque leafDiv.  
61. */  
62. #leafContainer > div    
63. {   
64.     position : absolue ;   
65.     largeur : 100px ;   
66.     hauteur : 100px ;   
67.   
68.     /* Nous utilisons les propriétés suivantes pour appliquer les animations de fondu et déposer à chaque feuille.  
69.        Chacune de ces propriétés prend deux valeurs. Ces valeurs correspondent respectivement à un paramètre  
70.        pour fondu et déposer.  
71.     */  
72.     -webkit-animation-iteration-count : infini, infini ;   
73.     -webkit-animation-direction : normal, normal ;   
74.     -webkit-animation-timing-function : linéaire, facilité d'entrée ;   
75. }  
76.   
77. /* Cette règle CSS est appliquée à tous les éléments img directement à l'intérieur des éléments div qui sont  
78.    directement à l'intérieur de la div leafContainer. En d'autres termes, cela correspond aux éléments 'img'  
79.    à l'intérieur des leafDivs qui sont créés dans la fonction createALeaf() .  
80. */  
81. #leafContainer > div > img {   
82.      position : absolue ;   
83.      largeur : 100px ;   
84.      hauteur : 100px ;   
85.   
86.     /* Nous utilisons les propriétés suivantes pour ajuster le tour dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montreSpinAndFlip  
87.        animations sur chaque feuille.  
88.        La fonction createALeaf dans le fichier Leaves.js détermine si une feuille a le   
89.        animation Rotation dans le sens des aiguilles d'une montre ou SpinAndFlip dans le sens inverse des aiguilles d'une montre.  
90.     */  
91.      -webkit-animation-iteration-count : infini ;   
92.      -webkit-animation-direction : alternant ;   
93.      -webkit-animation-timing-function : facilité d'entrée ;   
94.      -webkit-transform-origin : 50 % -100 % ;   
95. }   
96.   
97. /* Cache une feuille vers la toute fin de l'animation */  
98. @-webkit-keyframes fondu   
99. {   
100.     /* Afficher une feuille dans ou en dessous 95 pour cent de l'animation et la masquer, sinon */  
101.     0%   { opacité : 1 ; }   
102.     95 %  { opacité : 1 ; }   
103.     100 % { opacité : 0 ; }   
104. }  
105.   
106. /* Fait tomber une feuille de -300 à 600 pixels sur l'axe y */  
107. @-webkit-keyframes drop   
108. {   
109.     /* Déplacer une feuille à -300 pixels dans l'axe y au début de l'animation */  
110.     0%   { -webkit-transform: translate(0px, -50px); }   
111.     /* Déplacer une feuille à 600 pixels dans l'axe y à la fin de l'animation */  
112.     100 % { -webkit-transform: translate(0px, 650px); }   
113. }   
114.   
115. /* Tourne une feuille de -50 à 50 degrés dans un espace 2D */  
116. @-webkit-keyframes clockSpin   
117. {   
118.     /* Faire faire une feuille de -50 degrés dans l'espace 2D au début de l'animation */  
119.     0%   { -webkit-transform : rotate(-50deg); }   
120.     /*  Faire faire une feuille de 50 degrés dans l'espace 2D à la fin de l'animation */  
121.     100 % { -webkit-transform : rotate(50deg); }   
122. }   
123.   
124. /* Retourne une feuille et la tourne de 50 à -50 degrés dans un espace 2D */  
125. @-webkit-keyframes antihoraireSpinAndFlip    
126. {   
127.     /* Retournez une feuille et faites-la pivoter de 50 degrés dans l'espace 2D au début de l'animation */  
128.     0%   { -webkit-transform : scale(-1, 1) rotate(50deg); }   
129.     /* Retournez une feuille et faites-la pivoter de -50 degrés dans l'espace 2D à la fin de l'animation */  
130.     100 % { -webkit-transform : scale(-1, 1) rotate(-50deg); }   
131. }   

JavaScript代码

Code JavaScript复制内容到剪贴板

1. /* Définir le nombre de feuilles à être utilisées dans l'animation */  
2. const NUMBER_OF_LEAVES = 30 ;   
3.   
4. /*   
5.     Appelé lorsque la page "Falling Leaves" est complètement chargée.  
6. */  
7. fonction init()   
8. {   
9.     /* Obtenir une référence à l'élément qui contiendra les feuilles */  
10.     var container = document.getElementById('leafContainer');   
11.     /* Remplissez le récipient vide avec de nouvelles feuilles */  
12.     pour (var i = 0; i < NUMBER_OF_LEAVES; i )    
13.     {   
14.         container.appendChild(createALeaf());   
15.     }   
16. }   
17.   
18. /*  
19.     Reçoit les valeurs les plus basses et les plus élevées d'une plage et  
20.     renvoie un entier aléatoire qui se situe dans cette plage.  
21. */  
22. fonction randomInteger(faible, élevé)   
23. {   
24.     return low   Math.floor(Math.random() * (high - low));   
25. }   
26.   
27. /*  
28.    Reçoit les valeurs les plus basses et les plus élevées d'une plage et  
29.    renvoie un flottant aléatoire qui se situe dans cette plage.  
30. */  
31. fonction randomFloat(low, high)   
32. {   
33.     retour faible   Math.random() * (élevé - faible);   
34. }   
35.   
36. /*  
37.     Reçoit un numéro et renvoie sa valeur de pixel CSS.  
38. */  
39. fonction pixelValue(value)   
40. {   
41.     retour valeur   'px' ;   
42. }  
43.   
44. /*  
45.     Renvoie une valeur de durée pour l'animation de chute.  
46. */  
47.   
48. fonction durationValue(value)   
49. {   
50.     retour valeur   de ;   
51. }  
52.   
53. /*  
54.     Utilise un élément img pour créer chaque feuille. "Leaves.css" implémente deux tours   
55.     animations pour les feuilles : dans le sens horaireSpin et dans le sens inverse des aiguilles d'une montreSpinAndFlip. Ce  
56.     la fonction détermine quelle de ces animations de rotation doit être appliquée à chaque feuille.  
57.  
58. */  
59. fonction createALeaf()   
60. {   
61.     /* Commencez par créer un wrapper div et un élément img vide */  
62.     var leafDiv = document.createElement('div');   
63.     var image = document.createElement('img');   
64.   
65.     /* Choisissez au hasard une image de feuille et attribuez-la à l'élément nouvellement créé */  
66.     image.src = 'images/realLeaf'   randomInteger(1, 5)   '.png';   
67.   
68.     leafDiv.style.top = "-100px";   
69.   
70.     /* Positionner la feuille à un emplacement aléatoire le long de l'écran */  
71.     leafDiv.style.left = pixelValue(randomInteger(0, 500));   
72.   
73.     /* Choisissez au hasard une animation de tournage */  
74.     var spinAnimationName = (Math.random() < 0.5) ? 'girouetteSpin' : 'sens inverse des aiguilles d'une montreSpinAndFlip' ;   
75.   
76.     /* Définissez la propriété -webkit-animation-name avec ces valeurs */  
77.     leafDiv.style.webkitAnimationName = 'fondu, drop';   
78.     image.style.webkitAnimationName = spinAnimationName;   
79.   
80.     /* Déterminez une durée aléatoire pour les animations de fondu et déposez-*/  
81.     var fadeAndDropDuration = durationValue(randomFloat(5, 11));   
82.   
83.     /* Déterminez une autre durée aléatoire pour l'animation de tournage */  
84.     var spinDuration = durationValue(randomFloat(4, 8));   
85.     /* Définissez la propriété -webkit-animation-duration avec ces valeurs */  
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.     // ajouter le  au 
      
94.     leafDiv.appendChild(image);   
95.   
96.     /* Renvoyer cet img élément afin qu'il peut être ajouté au document */  
97.     retour leafDiv ;   
98. }   
99.   
100. /* Appelle la fonction init lorsque la page "Falling Leaves" est complètement chargée */  
101. window.addEventListener('load', init, false);   

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