纯css实现单张图片无限循环无缝滚动
程序员文章站
2022-04-16 09:46:50
参考链接:https://blog.csdn.net/qq_20777797/article/details/77916029 https://www.xiabingbao.com/css3/2017/07/03/css3-infinite-scroll.html 需求是一共有两个,1、单张竖图持续 ......
参考链接:
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; } } }