纯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;
}
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-03-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读