Verwenden Sie CSS3, um einen nahtlosen Endlosschleifen-Scrolleffekt zu erzielen

Dieses Mal werde ich Ihnen den nahtlosen Scrolleffekt einer Endlosschleife mit CSS3 vorstellen. Was ist zu beachten? Werfen wir einen Blick darauf.

Manchmal müssen in einem bestimmten Modul der Seite einige Nachrichten in einer Endlosschleife gescrollt werden. Was ist also die Idee, wenn wir js verwenden, um einen nahtlosen Bildlauf zu erreichen (z. B. scrollt unser Modul nach oben)?

1. Klonen Sie A und platzieren Sie eine identische Kopie der Daten B hinter den Originaldaten A.

2. Verwenden Sie setInterval, um im übergeordneten Container von A nach oben zu scrollen ;

3. Wenn der Aufwärtsscrollabstand L genau der Höhe von A entspricht (L==A.height()), L=0, starten Sie den Scrollvorgang erneut und führen Sie eine Endlosschleife durch.

Klonen Sie eine Kopie der Daten und platzieren Sie sie hinten, sodass bei einer Bewegung von A nach oben Daten hinten vorhanden sind, um die Lücken zu füllen. Wenn B sich an den oberen Rand des

sichtbaren Bereichs bewegt und A sich gerade aus dem sichtbaren Bereich bewegt, wird der Container auf 0 zurückgesetzt. Der Benutzer nimmt es nicht wahr und denkt, es sei immer noch das erste Stück davon Daten in B. . Dann scrollen Sie weiter nach oben.

1. Verwenden Sie CSS3 zur Implementierung

Wenn Sie CSS3-Attribute zur Implementierung verwenden möchten, muss es sich um eine Animation handeln, da der Übergang erforderlich ist kann manuell ausgelöst werden und kann nicht auf unbestimmte Zeit ausgeführt werden. Eine Animation kann dieses Problem lösen.

Wenn die Daten fest codiert sind, können wir manuell eine Kopie der Daten kopieren und dahinter einfügen und dann die Höhe der Originaldaten in CSS schreiben. Die Implementierungsidee ist dieselbe wie oben:

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>

Der Laufeffekt ist wie folgt:

2. Wenn die Daten unsicher sind

Im obigen Abschnitt sind die Daten tot und die Höhe ist fest in CSS3 codiert. Aber was sollen wir tun, wenn die Anzahl der von der Schnittstelle erhaltenen Daten ungewiss ist und auch die Länge jedes Datenelements ungewiss ist?

Hier müssen wir die Höhe basierend auf den Daten neu berechnen und in CSS schreiben. Da es jedoch schwieriger ist, Keyframes zu ändern, verwenden wir das Überschreiben, um die Daten in Keyframes neu zu berechnen:

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

Führen Sie nach der Berechnung der Höhe der Originaldaten A die Methode addKeyFrames aus und fügen Sie das CSS-Attribut zum Kopf hinzu. Dann überschreibt das Rowup hier die vorherige Einstellung. Der Abstand jedes Bildlaufs entspricht der Höhe der Daten 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. Horizontales Scrollen

Die obigen Erklärungen beziehen sich ausschließlich auf das Scrollen nach oben, daher sind Links, Rechts und Unten leichter zu verstehen. Ändern Sie einfach den Wert in transform in den entsprechenden Wert.

4. Zusammenfassung

Die Verwendung von CSS zur Anzeige von Animationen lässt die Seite flüssiger erscheinen. Wenn es mit CSS implementiert werden kann, können Sie versuchen, es so weit wie möglich mit CSS zu implementieren.

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von CSS Selector

Detaillierte Erläuterung der besonderen Verwendungsfähigkeiten von CSS Margin

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um einen nahtlosen Endlosschleifen-Scrolleffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!