무한 루프 원활한 스크롤을 달성하기 위한 CSS3에 대한 자세한 설명

페이지의 특정 모듈에서 일부 메시지를 무한 루프로 스크롤해야 하는 경우가 있습니다. 그렇다면 js를 사용하여 원활한 스크롤을 달성한다면(예를 들어 모듈이 위쪽으로 스크롤되는 경우) 아이디어는 무엇일까요? 이 기사는 주로 CSS3를 사용하여 무한 루프 원활한 스크롤을 구현하는 예제 코드를 소개합니다. 관심 있는 친구들이 이를 참조하여 모든 사람에게 도움이 되기를 바랍니다.

1. A를 복제하고 원본 데이터 A 뒤에 동일한 데이터 B 복사본을 배치합니다.

2. setInterval을 사용하여 A의 상위 컨테이너를 위로 스크롤합니다.

3. 위로 스크롤하는 거리 L이 정확하게 A (L==A.height()), L=0, 스크롤 다시 시작, 무한 루프.

A가 위쪽으로 움직일 때 뒤쪽에 데이터가 있어 유출된 공백을 메울 수 있도록 데이터 복사본을 복제하여 뒤쪽에 배치합니다. B가 가시 영역의 맨 위로 이동하고 A가 가시 영역 밖으로 이동하면 컨테이너는 0으로 재설정됩니다. 사용자는 이를 인식하지 못하고 여전히 B의 첫 번째 데이터라고 생각합니다. 그런 다음 계속 위로 스크롤하세요.

1. CSS3을 사용하여 구현

CSS3 속성을 사용하여 구현하려면 애니메이션이어야 합니다. 전환은 수동으로 실행해야 하고 무한히 실행할 수 없으며 애니메이션이 이 문제를 해결할 수 있기 때문입니다. .

데이터가 하드 코딩된 경우 데이터 복사본을 수동으로 복사하여 뒤에 넣은 다음 원본 데이터의 높이를 CSS에 쓸 수 있습니다. 구현 아이디어는 위와 동일합니다.

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>

실행 효과는 다음과 같습니다.

2. 데이터가 불확실할 때

위 섹션에서는 데이터가 죽고 높이가 증가합니다. 하드 코딩된 CSS3입니다. 하지만 인터페이스에서 얻은 데이터의 개수가 불확실하고, 각 데이터의 길이도 불확실하다면 어떻게 해야 할까요?

여기서는 데이터를 기반으로 높이를 다시 계산하여 CSS에 써야 합니다. 그러나 키프레임을 수정하는 것이 더 번거롭기 때문에 덮어쓰기를 사용하여 키프레임의 데이터를 다시 계산합니다.

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

원본 데이터 계산 A의 높이를 설정한 후 addKeyFrames 메소드를 실행하고 헤드에 CSS 속성을 추가합니다. 그러면 여기의 행은 이전 설정을 덮어씁니다. 각 스크롤의 거리는 데이터 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 . 가로 스크롤

위의 설명은 모두 위로 스크롤하는 것이므로 왼쪽, 오른쪽, 아래로 변환하는 값을 해당 값으로 변경하면 이해하기 쉽습니다.

4. 요약

CSS를 사용하여 애니메이션을 표시하면 페이지가 더 부드러워집니다. CSS로 구현할 수 있다면 최대한 CSS로 구현해 보세요

관련 권장 사항:

캐러셀의 원활한 스크롤 효과를 얻기 위한 javascript

JavaScript 원활한 스크롤의 예제 코드에 대한 자세한 설명 효과

javascript로 구현됨 왼쪽 및 오른쪽으로 원활한 스크롤 효과

위 내용은 무한 루프 원활한 스크롤을 달성하기 위한 CSS3에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!