Exemple de mise en œuvre d'une animation de défilement transparent primée sur un terminal mobile HTML5

Cet article présente l'exemple d'implémentation de l'animation de défilement transparent primée sur le terminal mobile Html5 et le partage avec tout le monde. Les détails sont les suivants :

analyse des besoins

Haha, c'est vraiment clair immédiatement après le téléchargement de l'image dynamique.

Ça roule, ça roule, alors quelle est la méthode pour faire ça ? Résumons :

C'est en fait très simple. Le <div> le plus externe est utilisé comme une fenêtre fixe, le <ul> interne contrôle le mouvement et le <li> interne est utilisé pour afficher les animations.

 <div class=roll id=roll> <ul> <li>La première structure</li> <li>La deuxième structure</li> <li>La troisième structure</li> <li>La quatrième structure</li> li> <li>La cinquième structure</li> <li>La sixième structure</li> <li>La septième structure</li> <li>La huitième structure</li> </ul></div>

Implémentez d’abord le style CSS de base

 *{ margin:0; padding:0;}.roll{ margin: 100px auto; width: 200px; height: 40px; border: 1px solid aquamarine;}.roll ul{ list-style: none;}. rouler li{ hauteur de ligne:20px; taille de police:14px; texte-align:center;}

Vous pouvez jeter un œil au style général :

méthode animer()

$(selector).animate(styles,speed,easing,callback)

paramètre:

styles : paramètre obligatoire, style CSS qui doit être animé (utiliser la dénomination en cas de chameau)

speed : Spécifie la vitesse de l’animation

@numéro:1000(ms)

@string: lent, normal, rapide

easing : vitesse d'animation (swing, linéaire)

callback : fonction de rappel après l'exécution de la fonction

 $(document).ready(function(){ setInterval(function(){ // Ajoute une minuterie pour convertir toutes les 1,5 s $(#roll).find(ul:first).animate({ marginTop:-40px // Le distance de chaque mouvement},500,function(){ //Le temps du mouvement d'animation//$(this) fait référence à l'objet ul, //Une fois ul réinitialisé, insérez les premier et deuxième éléments //à la position du dernier élément de ul $(this).css({marginTop:0px}).find(li:first).appendTo(this ); $(this).find(li:first).appendTo(this });

Jetez un oeil à l'effet:

Grâce aux images clés en CSS3, vous pouvez obtenir l'effet de sauter des étapes. Jetons d’abord un bref aperçu de l’idée.

1. S'il s'agit d'une récompense codée en dur, vous devez copier celle du recto vers l'arrière. S'il est roulé un par un, copiez le premier. S'il est roulé en deux, copiez le premier et le deuxième. .individuel.

 <div class=roll id=roll> <ul> <li>La première structure</li> <li>La deuxième structure</li> <li>La troisième structure</li> <li>La quatrième structure</li> li> <li>La cinquième structure</li> <li>La sixième structure</li> <li>La septième structure</li> <li>La huitième structure</li> <li>Première structure</li > <li>Deuxième structure</li> </ul></div>

2. Calculez ensuite combien de fois il faut le faire défiler et combien de secondes à la fois. L'exemple est deux défilements, ce qui prend 5 s, donc le temps d'animation de CSS3 est de 5 s. Alors, en combien de parties @keyframe doit-il être divisé ? Parce qu'il s'agit d'une pause, chaque parchemin nécessite deux copies, et le dernier doit sauter pour qu'il n'y ait qu'une seule copie, donc 5 * 2 - 1 = 9 copies sont nécessaires. Vous le saurez en regardant le code :

 /*Aucun traitement de compatibilité n'est effectué ici*/.roll ul{ list-style: none; animation: ani 5s Linear infinite; /*Animation ani, 5s, jouée à vitesse constante en boucle*/}@keyframes ani{ 0 %{ marge-haut : 0 ; } 12,5 %{ marge-haut : 0 ; } 25 %{ marge-haut : -40px } 37,5 %{ marge-haut : -40px ; } 50 %{ margin-top : -80px ; } 62,5 %{ margin-top : -80px ; } 75 %{ margin-top : -120px } 87,5 %{ margin-top : -120px } 100 %{ margin- ; top: -160px; /*Le dernier en est un, ce qui peut interrompre l'animation*/ }}

Si le nombre est incertain, vous devez le calculer dynamiquement et utiliser js pour ajouter dynamiquement des @keyframes. À ce moment-là, tant que vous pouvez calculer l'intervalle et la distance de mouvement, tout ira bien.

1. Obtenez d’abord la longueur de <li>

2. Calculez ensuite le pourcentage d'intervalle. Puisqu'il y a une pause, n'oubliez pas d'utiliser le nombre de secondes × 2.

3. Utilisez ensuite une chaîne pour épeler @keyframes, 0~length, y compris la longueur, car il y en a un de plus, les nombres pairs et impairs sont séparés.

4. Clonez les premier et deuxième mots de <ul> à la fin de <ul>

5. Créez une balise <style> et ajoutez-la à <head>

6. Ajoutez des attributs d'animation à <ul>

Sans plus attendre, parlons du code :

 function addKeyFrame(){ var ulObj = $(#roll ul), //Obtenir la longueur de l'objet ul = $(#roll li).length, //Obtenir la longueur du tableau li par = 100 / (longueur / 2 * 2 ) ; / /Calculer le pourcentage de l'intervalle médian//Splice string var keyframes = `/ @keyframes ani{`; for(var i = 0; i<=length; i++){ keyframes+=`${i * par}%{ margin-top : ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px; }`; images clés+='}'; li:first), //Obtenir le premier élément liSec = liFirst.next(); //Récupérez le deuxième élément ulObj.append(liFirst.clone()).append(liSec.clone()); //Insérez les deux éléments dans ul $(<style>).attr(type,text/ css). html(keyframes).appendTo($(head)); //Créez une balise de style pour insérer des images clés dans la tête ulObj.css(animation,ani 5s Linear infinite); //Ajouter une animation CSS3 à ul} addKeyFrame();

Zepto côté mobile n'a pas de fonction d'animation Si vous n'utilisez pas d'attributs CSS3, comment pouvez-vous l'écrire en JS ?

 var timer,top;function roll(){ var ulObj = $(#roll).find(ul), length = $(#roll li).length, liFirst = $(#roll).find(li:first); liSec = liFirst.next(); ulObj.append(liFirst.clone()).append(liSec.clone()); //Ajoutez le premier et le deuxième à la balise <ul> clearInterval(timer); timer = setInterval(function(){ //Définissez le timer var top = ulObj.css(margin-top); top = + top.slice( 0,-2); if(top != -(20 * length)){ //Obtient la hauteur actuelle Si elle n'est pas à la fin, remonte en haut -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ //S'il atteint la fin, il atteindra rapidement zéro top = 0; {-webkit-transition:none,transition:none,margin-top:top}); setTimeout(function(){ //Ajoutez ici un retardateur, qui doit également être placé en fin de file d'attente d'exécution, afin d'éviter la fusion des deux animations top -= 40; 1s,margin-top :top}); },0) } },2000);}roll();

S'il existe d'autres méthodes, je la mettrai à jour de temps en temps la prochaine fois. Mais pour les mobiles, cela devrait suffire.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.