Utilisez CSS3 pour obtenir un effet de défilement transparent en boucle infinie

Cette fois, je vais vous présenter l'effet de défilement transparent d'une boucle infinie en utilisant CSS3. CSS3 peut réaliser l'effet de défilement transparent d'une boucle infinie Quelles sont les choses à noter Ce qui suit est un cas pratique. Jetons un coup d'oeil.

Parfois dans un certain module de la page, certains messages doivent défiler dans une boucle infinie. Alors, quelle est l'idée si nous utilisons js pour obtenir un défilement transparent (par exemple, notre module défile vers le haut) ?

1. Clonez A et placez une copie identique des données B derrière les données originales A

2. Utilisez setInterval pour faire défiler le conteneur parent de A ; ;

3. Lorsque la distance de défilement vers le haut L est exactement la hauteur de A (L==A.height()), L=0, redémarrez le défilement et boucle infinie.

Clonez une copie des données et placez-la à l'arrière de sorte que lorsque A monte vers le haut, il y ait des données à l'arrière pour combler les lacunes. Lorsque B se déplace vers le haut de la zone visible , et que A sort juste de la zone visible, alors le conteneur est réinitialisé à 0. L'utilisateur ne le perçoit pas et pense que c'est toujours le premier morceau de données en B. . Continuez ensuite à faire défiler vers le haut.

1. Utilisez CSS3 pour implémenter

Si vous souhaitez utiliser les attributs CSS3 pour l'implémenter, il doit s'agir d'une animation, car la transition doit le faire. être effectué manuellement et ne peut pas être exécuté indéfiniment, et l'animation peut résoudre ce problème.

Si les données sont codées en dur, nous pouvons copier manuellement une copie des données et la mettre derrière, puis écrire la hauteur des données originales en CSS. L'idée d'implémentation est la même que ci-dessus :

css :

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -307px, 0);
        transform: translate3d(0, -307px, 0);
    }
}
.list{
    width: 300px;
    border: 1px solid #999;
    margin: 20px auto;
    position: relative;
    height: 200px;
    overflow: hidden;
}
.list .rowup{
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}

html :

<p class="list">
    <p class="cc rowup">
        <p class="item">1- 121233fffffr国家认可更健康进口价格困扰</p>
        <p class="item">2- 3123233</p>
        <p class="item">3- 个人口结构俄跨入国际科技馆客人感觉</p>
        <p class="item">4- ggrgerg</p>
        <p class="item">5- fvdgdv</p>
        <p class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</p>
        <p class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</p>
  <p class="item">8- 德国网红致信默克尔</p>
     <p class="item">9- 国资委原</p>
        <p class="item">1- 121233fffffr国家认可更健康进口价格困扰</p>
        <p class="item">2- 3123233</p>
        <p class="item">3- 个人口结构俄跨入国际科技馆客人感觉</p>
        <p class="item">4- ggrgerg</p>
        <p class="item">5- fvdgdv</p>
        <p class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</p>
        <p class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</p>
        <p class="item">8- 德国网红致信默克尔</p>
     <p class="item">9- 国资委原</p>
    </p>
</p>

L'effet de course est le suivant :

2. Lorsque les données sont incertaines

Dans la section ci-dessus, les données sont mortes et la hauteur est codée en dur en CSS3. Mais que devons-nous faire si le nombre de données obtenues à partir de l’interface est incertain et la longueur de chaque donnée est également incertaine ?

Ici, nous devons recalculer la hauteur en fonction des données et l'écrire en CSS. Cependant, il est plus difficile de modifier les images clés, nous utilisons donc l'écrasement pour recalculer les données dans les images clés :

// 设置keyframes属性
function addKeyFrames(y){
    var style = document.createElement('style');
    style.type = 'text/css';
    var keyFrames = '\
    @-webkit-keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }\
    @keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }';
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    document.getElementsByTagName('head')[0].appendChild(style);
}

Après avoir calculé la hauteur des données d'origine A, exécutez la méthode addKeyFrames et ajoutez l'attribut CSS à la tête. Ensuite, le rowup ici écrasera le paramètre précédent. La distance de chaque défilement est la hauteur des données A :

function init(){
    var data = '塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。羌管悠悠霜满地，人不寐，将军白发征夫泪。', //样例数据
        data_len = data.length,
        len = parseInt(Math.random()*6)+6, // 数据的长度
        html = '<p class="ss">';
    
    for(var i=0; i<len; i++){
        var start = parseInt( Math.random()*(data_len-20) ),
            s = parseInt( Math.random()*data_len );
        html += &#39;<p class="item"v>'+i+'- '+data.substr(start, s)+'</p>';
    }
    html += '</p>';
    document.querySelector('.list .cc').innerHTML = html+html; // 复制一份数据
    var height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度
    addKeyFrames( '-'+height+'px' ); // 设置keyframes
    document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup
}
init();

3. Défilement horizontal

Les explications ci-dessus concernent le défilement vers le haut, donc vers la gauche, la droite et le bas sont plus faciles à comprendre. Changez simplement la valeur de transform en la valeur correspondante.

4. Résumé

L'utilisation de CSS pour afficher les animations rendra la page plus fluide. S'il peut être implémenté avec CSS, vous pouvez essayer de l'implémenter avec CSS autant que possible

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site php chinois !

Lecture recommandée :

Explication détaillée de l'utilisation du sélecteur CSS

Explication détaillée des compétences d'utilisation particulières de la marge CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!