首页 > 网页制作 > html5

Html5移动端获奖无缝滚动动画实现示例

admin html5 2022-02-06 13:27:26 Html5   移动端   无缝滚动"

本文介绍了Html5移动端获奖无缝滚动动画实现示例,分享给大家,具体如下:

需求分析

哈哈,上动态图真的是一下就明了了。

就是滚动么滚动,那么制作这个有什么方法呢?我们来总结一下:

html骨架

其实很简单,最外面的

是做固定的窗口,里面的
    控制运动,
  • 里面是展示动画

    • 第一个结构
    • 第二个结构
    • 第三个结构
    • 第四个结构
    • 第五个结构
    • 第六个结构
    • 第七个结构
    • 第八个结构

    基本css样式

    先把基本的css样式实现

    *{
        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;
    }
    

    可以看看大致的样式:

    实现思路

    一、使用jquery的animate动画

    animate()方法

    $(selector).animate(styles,speed,easing,callback)

    参数:
    styles:必需参数,需要产生动画的css样式(使用驼峰式命名)
    speed: 规定动画的速度
    @number:1000(ms)
    @string:"slow","normal","fast"
    easing:动画速度(swing,linear)
    callback:函数执行完之后的回调函数

        $(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)
            });
    

    看看效果:

    二、使用css3的animation动画

    通过css3中的关键帧,可以得到跳步的效果。先通过一个短的看一下思路。

    初步

    1.如果是写死的获奖,那么需要把前面的那个复制一份到后面去,如果是一个一个滚动那么就复制第一个,如果是两个两个滚动的就复制第一个和第二个。

    • 第一个结构
    • 第二个结构
    • 第三个结构
    • 第四个结构
    • 第五个结构
    • 第六个结构
    • 第七个结构
    • 第八个结构
    • 第一个结构
    • 第二个结构

    2.然后计算需要滚动多少次,一次多少秒,例子是两个两个滚动,需要5s,所以css3的animation的时间是5s。那么@keyframe需要分成几份呢?因为是停顿,每一个滚动都需要两份,最后一个要跳动所以只有一份,所以需要5 * 2 - 1 = 9份,看代码就晓得了:

    /*这里不做兼容性处理*/
    .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; /*最后是一个,这样可以打断动画*/
        }
    }
    

    进阶

    如果个数不确定,那么就需要动态的计算,用js动态地添加@keyframes ,到时候只要自己可以计算清楚间隔还有移动的距离就好。

    1.首先获取

  • 的长度length
    2.然后计算间隔百分比,因为有停顿所以记得要用秒数×2
    3.然后用字符串拼写@keyframes,0~length,包括length,因为多一个,双数和单数分开。
    4.把
      中的第一个和第二个克隆到
        的最后
        5.创建一个