首页 > > 网页制作 > css >

纯css实现单张图片无限循环无缝滚动

2020-03-12 16:01:15来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

纯css实现单张图片无限循环无缝滚动

参考链接：https://blog.csdn.net/qq_20777797/article/details/77916029

https://www.xiabingbao.com/css3/2017/07/03/css3-infinite-scroll.html

需求是一共有两个，
1、单张竖图持续向上无缝滚动，

2、单张竖图滚动到正中间之后，停留3s，继续滚动。

一、用js setInterval定时器实现

js实现要通过不断的改变定位、复制图片的方式来做，效果极其不稳定

二、用css3 animation动画实现

需求1动画：

 @-webkit-keyframes scrollUp {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -webkit-transform: translateY(-400px);
                transform: translateY(-400px);
            }
        }

        @-moz-keyframes scrollUp {
            0% {
                -moz-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -moz-transform: translateY(-400px);
                transform: translateY(-400px);
            }
        }

        @-o-keyframes scrollUp {
            0% {
                -o-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -o-transform: translateY(-400px);
                transform: translateY(-400px);
            }
        }

        @keyframes scrollUp {
            0% {
                -webkit-transform: translateY(0);
                -moz-transform: translateY(0);
                -o-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -webkit-transform: translateY(-400px);
                -moz-transform: translateY(-400px);
                -o-transform: translateY(-400px);
                transform: translateY(-400px);
            }
        }

需求2动画：

@-webkit-keyframes scrollUpAndPause {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            25% {
                -webkit-transform: translateY(-350px);
                transform: translateY(-350px);
            }
            100% {
                -webkit-transform: translateY(-350px);
                transform: translateY(-350px);
            }
        }

        @-moz-keyframes scrollUpAndPause {
            0% {
                -moz-transform: translateY(0);
                transform: translateY(0);
            }
            25% {
                -moz-transform: translateY(-350px);
                transform: translateY(-350px);
            }
            100% {
                -moz-transform: translateY(-350px);
                transform: translateY(-350px);
            }
        }

        @-o-keyframes scrollUpAndPause {
            0% {
                -o-transform: translateY(0);
                transform: translateY(0);
            }
            25% {
                -o-transform: translateY(-350px);
                transform: translateY(-350px);
            }
            100% {
                -o-transform: translateY(-350px);
                transform: translateY(-350px);
            }
        }

        @keyframes scrollUpAndPause {
            0% {
                -webkit-transform: translateY(0);
                -moz-transform: translateY(0);
                -o-transform: translateY(0);
                transform: translateY(0);
            }
            25% {
                -webkit-transform: translateY(-350px);
                -moz-transform: translateY(-350px);
                -o-transform: translateY(-350px);
                transform: translateY(-350px);
            }
            100% {
                -webkit-transform: translateY(-350px);
                -moz-transform: translateY(-350px);
                -o-transform: translateY(-350px);
                transform: translateY(-350px);
            }
        }

html

<div class="box">
    <div class="image-item">
    </div>
    <div class="image-item">
    </div>
    <div class="image-item">
    </div>
</div>

style:

 .box {
            width: 500px;
            height: 500px;
            overflow: hidden;
        }

应用动画：

.image-item {
            width: 500px;
            height: 400px;
            background: url("./猫咪咪.jpg") repeat-y center center; /* 什么图片都可以*/
            /*animation-delay: 2s;!*延迟2s在进行滚动*!*/
            -webkit-animation: 3s scrollUp linear infinite normal;/* 3s持续滚动图片*/
            animation: 3s scrollUp linear infinite normal;
            /*-webkit-animation: 4s scrollUpAndPause linear infinite normal;*/ /* 每停3s滚动一次*/
            /*animation: 4s scrollUpAndPause linear infinite normal;*/
 }

另外自己做好css的兼容写法即可实现。

注意：

1、前提是把一张图片复制成3张，以实现无缝滚动，网上看了很多人此类无缝循环滚动的方法，实现出来之后，每次回到起点都会有跳动的感觉，这里经过摸索，给动画上移的距离设为图片的高度，就不会有跳动问题了，完美无限循环+无缝滚动；

2、图片每停3s滚动一次，且每次刚好停在正中间，上线留的衔接的图片距离相等，这里就要计算一下，每次动画上移距离= 图片实际显示高度-（所在区域的总高度-上间距高度）。

以下是图片滚动的js，如果要实现动态获取图片高度，则需要写下面的js：

function addKeyFrames(height,offsetHeight){
    let style = document.createElement('style');
    style.type = 'text/css';
    let keyFrames = '\
    @-webkit-keyframes scrollUpAndPause {\
        0% {\
            -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        40% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
    }\
    @-moz-keyframes scrollUpAndPause {\
        0% {\
            -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        40% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
    }\
    @-o-keyframes scrollUpAndPause {\
        0% {\
            -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        40% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
    }\
    @keyframes scrollUpAndPause {\
        0% {\
            -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        40% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
    }\
    @-webkit-keyframes scrollUp {\
        0% {\
             -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(B_DYNAMIC_VALUE);\
        }\
    }\
    @-moz-keyframes scrollUp {\
        0% {\
             -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(B_DYNAMIC_VALUE);\
        }\
    }\
    @-o-keyframes scrollUp {\
        0% {\
             -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(B_DYNAMIC_VALUE);\
        }\
    }\
    @keyframes scrollUp {\
        0% {\
             -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(B_DYNAMIC_VALUE);\
        }\
    }';
    keyFrames = keyFrames.replace(/A_DYNAMIC_VALUE/g, '-'+(height-(offsetHeight-height)/2)+'px');
    keyFrames = keyFrames.replace(/B_DYNAMIC_VALUE/g, '-'+height+'px');
    style.innerHTML = keyFrames;
    document.getElementsByTagName('head')[0].appendChild(style);
}
// 初始化图片滚动动画高度
function initAnimate() {
    const adLeftHeight = document.getElementById("adLeft").offsetHeight; // 左侧区域高度
    const adLeftWidth = document.getElementById("adLeft").offsetWidth; // 左侧区域宽度
    let leftImage = new Image();
    let leftImageWidth = "";
    let leftImageHeight = "";
    leftImage.src = window.campaign.image_url;
    leftImage.onload = function () {
        leftImageWidth = leftImage.width;
        leftImageHeight = leftImage.height;
        let imageRealHeight = adLeftWidth * (leftImageHeight / leftImageWidth);
        // const imageBoxScrollHeight = document.getElementById("imageBox").scrollHeight; // 三张图片的总高度
        // const imageHeight = imageBoxScrollHeight/3;// 单张图片高度
        addKeyFrames(imageRealHeight,adLeftHeight);
    }
}

以上js对应的html:

<div class="ad_left" id="adLeft">
        <div class="image-box" id="imageBox">
            <img class="image-item" src="xxx.jpg" alt="">
            <img class="image-item" src="xxx.jpg" alt="">
            <img class="image-item" src="xxx.jpg" alt="">
        </div>
</div>

以上html对应的css:

.ad_left{
        width:44vw;
        height: 100vh;
        overflow: hidden;
        .image-box{
          width:100%;
          height: auto;
          .image-item {
            width: 100%;
            height: auto;
            display: block;
            animation: 5s scrollUpAndPause linear infinite normal;
          }
        }
      }

 


原文链接:https://www.cnblogs.com/beileixinqing/p/12465029.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：关于前端学习路线的一些建议

下一篇：web前端零基础，按照这样的学习步骤，6个多月找到了工作

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签