CSS3를 사용하여 무한 루프 원활한 스크롤 효과 달성

이번에는 CSS3를 사용하여 무한 루프의 원활한 스크롤 효과를 얻는 방법을 보여 드리겠습니다. 실제 사례는 무엇입니까?

때때로 페이지의 특정 모듈에서 일부 메시지를 무한 루프로 스크롤해야 하는 경우가 있습니다. 그렇다면 js를 사용하여 원활한 스크롤을 달성한다면(예를 들어 모듈이 위쪽으로 스크롤되는 경우) 아이디어는 무엇일까요?

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 = '<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. 위의 설명은 모두 위로 스크롤하는 것이므로 왼쪽, 오른쪽, 아래가 이해하기 쉽습니다. 변환의 값을 해당 값으로 변경하면 됩니다.

4. 요약

CSS를 사용하여 애니메이션을 표시하면 페이지가 더 부드러워집니다. CSS로 구현할 수 있다면 최대한 CSS로 구현해보시면 됩니다이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. PHP 중국어 웹사이트!

추천도서:

CSS 선택기 사용법에 대한 자세한 설명

CSS 여백의 특수한 사용 기술에 대한 자세한 설명

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