纯css实现单张图片无限循环无缝滚动
- 2020 年 3 月 13 日
- 笔记
参考链接：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; } } }
