Explication détaillée de 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 un exemple de code d'utilisation de CSS3 pour obtenir un défilement transparent en boucle infinie. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

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 se déplace 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 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 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 aussi suit :

2. Lorsque les données sont incertaines

Dans la sous-section ci-dessus, les données sont mort, hauteur Il est également écrit 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 des attributs CSS à la tête. Ensuite, la rangée ici écrasera le paramètre précédent. La distance de chaque défilement est. Hauteur des données A :

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

3. Défilement horizontal

Tout est expliqué ci-dessus Faites défiler vers le haut. , puis gauche, droite et bas sont plus faciles à comprendre. Remplacez simplement la valeur de transform 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 :

javascript pour obtenir l'effet de défilement transparent du carrousel

Explication détaillée de l'exemple de code de l'effet de défilement transparent JavaScript

L'effet de défilement transparent gauche et droit implémenté par JavaScript

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!