집 > 기사 > 웹 프론트엔드 > Html5 모바일 터미널 수상 경력에 빛나는 원활한 스크롤 애니메이션 구현

Html5 모바일 터미널 수상 경력에 빛나는 원활한 스크롤 애니메이션 구현

不言원래의: 2018-06-26 09:26:404118검색

이 글은 주로 Html5 모바일 단말기에서 수상 경력이 있는 원활한 스크롤 애니메이션의 구현 예를 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

이 기사에서는 Html5 모바일 단말기에서 수상 경력이 있는 연속 스크롤 애니메이션의 구현 예를 소개합니다. 자세한 내용은 다음과 같습니다.

요구 사항 분석

하하, 정말 이해하기 쉽습니다. 동적 다이어그램을 본 후.

구르구구르는데 이걸 만드는 방법은 뭔가요? 요약하자면:

html 뼈대

는 실제로 매우 간단합니다. 가장 바깥쪽 e388a4556c0f65e1904146cc1a846bee는 고정 창으로 사용되고, 내부 ff6d136ddc5fdfeffaf53ff6ee95f185는 애니메이션을 표시하는 데 사용됩니다.

기본 CSS 스타일

먼저 기본 CSS 스타일을 구현하세요

<p class="roll" id="roll">
    <ul>
         <li>第一个结构</li>
         <li>第二个结构</li>
         <li>第三个结构</li>
         <li>第四个结构</li>
         <li>第五个结构</li>
         <li>第六个结构</li>
         <li>第七个结构</li>
         <li>第八个结构</li>
    </ul>
</p>

일반 스타일을 살펴보세요:

구현 아이디어

1.jquery의 애니메이션 애니메이션을 사용하세요

애니메이션 ( )방법

$(selector).animate(styles,speed,easing,callback)매개변수:

styles: 필수 매개변수, 애니메이션을 위해 생성해야 하는 CSS 스타일(카멜 케이스 이름 사용)

speed: 애니메이션 속도 지정
@number:1000(ms)
@ string: "slow", "normal", "fast"
easing: 애니메이션 속도(스윙, 선형)
callback: 함수 실행 후 콜백 함수

*{
    margin:0;
    padding:0;
}
.roll{
    margin: 100px auto;
    width: 200px;
    height: 40px;
    overflow:hidden;
    border: 1px solid aquamarine;
}
.roll ul{
    list-style: none;
}
.roll li{
    line-height:20px;
    font-size:14px;
    text-align:center;
}

효과 살펴보기:

2. 사용 css3 animation

CSS3의 키프레임을 통해 점프하는 듯한 효과를 얻을 수 있습니다. 먼저 아이디어를 간단히 살펴보겠습니다.

예비

1. 하드로 쓴 상이라면 앞부분을 한 장씩 굴리면 첫 번째 것을 두 장씩 굴려야 합니다. 을 클릭한 다음 첫 번째와 두 번째를 복사하세요.

    $(document).ready(function(){
            setInterval(function(){  // 添加定时器，每1.5s进行转换
                $("#roll").find("ul:first").animate({
                        marginTop:"-40px"  //每次移动的距离
                },500,function(){   // 动画运动的时间
                        //$(this)指的是ul对象，
                        //ul复位之后把第一个元素和第二个元素插入
                        //到ul的最后一个元素的位置
                        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                        $(this).find("li:first").appendTo(this);
                });
            },1500)
        });

2. 그런 다음 스크롤해야 하는 횟수와 매번 몇 초를 계산합니다. 예는 두 개의 스크롤이므로 5초가 걸리므로 CSS3의 애니메이션 시간은 5초입니다. 그러면 @keyframe을 몇 부분으로 나누어야 할까요? 일시 중지이므로 각 스크롤에는 두 개의 복사본이 필요하고 마지막 스크롤은 점프해야 하므로 복사본이 하나만 있으므로 5 * 2 - 1 = 9 개의 복사본이 필요합니다. 코드를 보면 알 수 있습니다.

<p class="roll" id="roll">
        <ul>
             <li>第一个结构</li>
             <li>第二个结构</li>
             <li>第三个结构</li>
             <li>第四个结构</li>
             <li>第五个结构</li>
             <li>第六个结构</li>
             <li>第七个结构</li>
             <li>第八个结构</li>
             <li>第一个结构</li>
             <li>第二个结构</li>
        </ul>
</p>

Advanced숫자가 확실하지 않아 동적으로 계산해야 하는 경우 js를 사용하여 @keyframes를 동적으로 추가해야 합니다. 이때 간격과 이동 거리를 명확하게 계산할 수 있으면 됩니다. 괜찮은.

1. 먼저 25edfb22a4f469ecb59f1190150159c6

2의 길이를 구하세요. 그런 다음 일시 중지가 있으므로 초 × 2

3을 사용하는 것을 잊지 마세요. 그런 다음 문자열을 사용하여 @keyframes를 0으로 입력하세요. ~길이 포함, 길이가 하나 더 있기 때문에 짝수와 홀수가 구분됩니다.
4. ff6d136ddc5fdfeffaf53ff6ee95f185의 첫 번째와 두 번째를 복제하고 93f0f5c25f18dab9d176bd4f6de5d30e에 추가합니다.

코드에 관해 할 말이 많지 않습니다:

/*这里不做兼容性处理*/
.roll ul{
    list-style: none;
    animation: ani 5s  linear infinite;  /*动画ani，5s，循环匀速播放*/
}
@keyframes ani{  
    0%{
        margin-top: 0;
    }
    12.5%{
        margin-top: 0;
    }
    25%{
        margin-top: -40px;
    }
    37.5%{
        margin-top: -40px;
    }
    50%{
        margin-top: -80px;
    }
    62.5%{
        margin-top: -80px;
    }
    75%{
        margin-top: -120px;
    }
    87.5%{
        margin-top: -120px;
    }
    100%{
        margin-top: -160px; /*最后是一个，这样可以打断动画*/
    }
}

3. Zepto+transition 구현

모바일 측 Zepto에는 CSS3 속성을 사용하지 않는 경우 js로 작성하는 방법이 있습니다. ?

   function addKeyFrame(){
       var ulObj = $("#roll ul"),  //获取ul对象
             length = $("#roll li").length,  //获取li数组长度
             per = 100 / (length / 2 * 2 );  //计算中间间隔百分比
       // 拼接字符串
       var keyframes = `\    
       @keyframes ani{`;
       for(var i = 0 ; i<=length ; i++ ){
           keyframes+=`${i * per}%{
                           margin-top: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px;
                       }`;
       }
       keyframes+=&#39;}&#39;;
       var liFirst = $("#roll li:first"),   //获取第一个元素
           liSec = liFirst.next();    //获取第二个元素
       ulObj.append(liFirst.clone()).append(liSec.clone());   //将两个元素插入到ul里面
       $("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));    //创建style标签把关键帧插入到头部
       ulObj.css("animation","ani 5s linear infinite");  //给ul添加css3动画
   }
   addKeyFrame();

다른 방법이 있으면 다음에 수시로 업데이트하도록 하겠습니다. 하지만 모바일의 경우 이것만으로도 충분합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

Html5 모바일 터미널 수상 경력에 빛나는 원활한 스크롤 애니메이션 구현

관련 기사