参考链接: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;
}
}
}