Exemples pour expliquer CSS3 pour obtenir un défilement transparent en boucle infinie

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) ? Cet article présente principalement l'exemple de code pour réaliser un défilement transparent en boucle infinie à l'aide de CSS3. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

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 ; Lorsque la distance de défilement vers le haut L est exactement la hauteur de A (L==A.height()), L=0, le défilement recommence et la boucle est sans fin.

Clonez une copie des données et placez-la à l'arrière de sorte que lorsque A monte, 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 simplement de la zone visible, le conteneur est réinitialisé à 0. L'utilisateur ne le perçoit pas et pense qu'il s'agit toujours de la première donnée de 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 être déclenchée manuellement et ne peut pas être exécutée à l'infini, et l'animation l'est. juste ce qu'il faut 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 :

Style CSS :

Format HTML :

@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);
        display: none;
    }
}
.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;
}

2 Lorsque les données sont incertaines

<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>

Dans la section ci-dessus, les données sont dead , la hauteur est également codée en dur dans 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 :

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 :

// 设置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);
}

3. Défilement horizontal

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();

Les explications ci-dessus concernent le défilement vers le haut, il est donc plus facile de comprendre la gauche, la droite et le bas. Changez simplement la valeur de transformation par 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.

Recommandations associées :

Explication détaillée du composant de défilement transparent de vue

Javascript réalise l'effet de défilement transparent des images de carrousel

Exemple de code Javascript pour obtenir un effet de défilement transparent de plusieurs images vers la gauche et la droite

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!