摘要：
*延迟2s在进行滚动*!注意：1、前提是把一张图片复制成3张，以实现无缝滚动，网上看了很多人此类无缝循环滚动的方法，实现出来之后，每次回到起点都会有跳动的感觉，这里经过摸索，给动画上移的距离设为图片的高度，就不会有跳动问题了，完美无限循环+无缝滚动；2、图片每停3s滚动一次，且每次刚好停在正中间，上线留的衔接的图片距离相等，这里就要计算一下，每次动画上移距离=图片实际显示高度-。
参考链接：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：
functionaddKeyFrames(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); } //初始化图片滚动动画高度 functioninitAnimate() { const adLeftHeight = document.getElementById("adLeft").offsetHeight; //左侧区域高度 const adLeftWidth = document.getElementById("adLeft").offsetWidth; //左侧区域宽度 let leftImage = newImage(); 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; }} }