Implémentation d'une animation de défilement transparente primée sur un terminal mobile HTML5-Tutoriel H5-php.cn

Cet article présente principalement l'exemple d'implémentation de l'animation de défilement fluide primée sur le terminal mobile Html5. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Cet article présente l'exemple de mise en œuvre de l'animation de défilement fluide primée sur le terminal mobile Html5. J'aimerais le partager avec vous. Les détails sont les suivants :

Analyse des exigences<.>

Haha, l'image dynamique ci-dessus est vraiment géniale. Cela devient clair.

Ça roule, ça roule, alors quelle est la façon de faire ça ? Résumons : le

squelette HTML

est en fait très simple. Le

Inside est une animation d'affichage

<p class="roll" id="roll">
    <ul>
         <li>第一个结构</li>
         <li>第二个结构</li>
         <li>第三个结构</li>
         <li>第四个结构</li>
         <li>第五个结构</li>
         <li>第六个结构</li>
         <li>第七个结构</li>
         <li>第八个结构</li>
    </ul>
</p>

Copier après la connexion

Style CSS de base

Implémentez d'abord le style CSS de base

*{
    margin:0;
    padding:0;
}
.roll{
    margin: 100px auto;
    width: 200px;
    height: 40px;
    overflow:hidden;
    border: 1px solid aquamarine;
}
.roll ul{
    list-style: none;
}
.roll li{
    line-height:20px;
    font-size:14px;
    text-align:center;
}

Copier après la connexion

Prenez un regardez le style général :

Idées d'implémentation

Utilisation de l'animation animate de jquery.

Méthode animate()

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

Paramètres :

styles : paramètres requis, style CSS qui doit générer une animation (utiliser la dénomination de cas de chameau )
speed : Spécifie la vitesse d'animation
@number:1000(ms)
@string:"slow","normal","fast"
easing : vitesse d'animation (swing, linéaire)
callback : La fonction de rappel après l'exécution de la fonction

    $(document).ready(function(){
            setInterval(function(){  // 添加定时器，每1.5s进行转换
                $("#roll").find("ul:first").animate({
                        marginTop:"-40px"  //每次移动的距离
                },500,function(){   // 动画运动的时间
                        //$(this)指的是ul对象，
                        //ul复位之后把第一个元素和第二个元素插入
                        //到ul的最后一个元素的位置
                        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                        $(this).find("li:first").appendTo(this);
                });
            },1500)
        });

Copier après la connexion

Regardez l'effet :

2. Animation d'animation utilisant css3

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.

Préliminaire

1. S'il s'agit d'une récompense écrite en dur, vous devez alors copier la précédente à l'arrière. S'il défile un par un, puis copiez le premier. Un, s'il y a deux parchemins, copiez le premier et le deuxième.

<p class="roll" id="roll">
        <ul>
             <li>第一个结构</li>
             <li>第二个结构</li>
             <li>第三个结构</li>
             <li>第四个结构</li>
             <li>第五个结构</li>
             <li>第六个结构</li>
             <li>第七个结构</li>
             <li>第八个结构</li>
             <li>第一个结构</li>
             <li>第二个结构</li>
        </ul>
</p>

Copier après la connexion

2. Calculez ensuite combien de fois vous devez faire défiler et combien de secondes à chaque 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 :

/*这里不做兼容性处理*/
.roll ul{
    list-style: none;
    animation: ani 5s  linear infinite;  /*动画ani，5s，循环匀速播放*/
}
@keyframes ani{  
    0%{
        margin-top: 0;
    }
    12.5%{
        margin-top: 0;
    }
    25%{
        margin-top: -40px;
    }
    37.5%{
        margin-top: -40px;
    }
    50%{
        margin-top: -80px;
    }
    62.5%{
        margin-top: -80px;
    }
    75%{
        margin-top: -120px;
    }
    87.5%{
        margin-top: -120px;
    }
    100%{
        margin-top: -160px; /*最后是一个，这样可以打断动画*/
    }
}

Copier après la connexion

Avancé

Si le nombre est incertain, un calcul dynamique est nécessaire pour ajouter dynamiquement des @keyframes. car vous pouvez calculer clairement l'intervalle et le mouvement, juste la distance.

1. Obtenez d'abord la durée de

length

2. Puis calculez le pourcentage d'intervalle, n'oubliez pas d'utiliser le nombre de secondes × 2
3. épelez @keyframes avec une chaîne, 0~length, y compris la longueur, car il y en a un de plus, les nombres pairs et les nombres impairs sont séparés.
4. Clonez le premier et le deuxième dans