轮播动画简单实现
<h2>轮播动画简单实现</h2> <p>现在的前端,越来越注重用户交互和体验,有很多动画和效果是很常见的,如本篇要讲的主题:轮播动画。这和以前经常听到的一个名词–”跑马灯“效果一样。在CSS3出来之前,都是通过JavaScript实现的动画,现在我们完全可以使用CSS3,性能有很大的提升,兼容性也已经很不错,尤其是移动端。</p> <h2>JavaScript与轮播</h2> <p>首先看看Js实现:</p> <p>html结构如下:</p> <pre> <code class="language-css"> <h2>Js实现</h2> <div class="wrapper-js"> <div class="container-js marquee"> <p>今天</p> <p>明天</p> <p>后天</p> <p>今天</p><!-- 辅助元素,为实现循环轮播 --> </div> </div></code></pre> <p>Js代码:</p> <pre> <code class="language-css"> <script type="text/javascript"> /** * [marquee 轮播效果] * @param {[type]} ele [轮播元素容器] * @param {[type]} delay [轮播间隔时间] * @param {[type]} duration [轮播动画时间] * @return {[type]} [description] */ function marquee(ele, delay, duration) { if (!ele) { return false; } delay = delay || 2000; duration = duration || 500; var height = ele.clientHeight; var active = true; var len = ele.querySelectorAll('p').length - 1; setTimeout(function() { active = true; ele.scrollTop = 1;// 开始动画 setInterval(function() {// 一个一个元素轮播 if (!active) return; if (ele.scrollTop % height === 0) { // 当有某一元素轮播完成时,重置active,并开始下一元素的轮播 active = false; setTimeout(function() { active = true; ele.scrollTop += 1; }, delay); if (ele.scrollTop == len * height) { ele.scrollTop = 0; } } else { // 通过scrollTop值实现轮播滚动效果 ele.scrollTop += 1; } }, duration / height); }, delay); } marquee(document.querySelector('.marquee')); </script></code></pre> <p>通过以上代码可以看出,其主要使用元素的scrollTop值不断改变实现轮播滚动效果,同时为了达到循环轮播效果,必须在最后添加一个重复辅助元素。</p> <h2>CSS3实现</h2> <p>CSS3实现动画性能会有极大提升,特别是当页面动画较多或定时器较多时。</p> <p>html结构:</p> <pre> <code class="language-css"> <h2>CSS实现</h2> <div class="wrapper-css"> <div class="container-css marquee"> <p>今天</p> <p>明天</p> <p>后天</p> <p>今天</p><!-- 辅助元素,为实现循环轮播 --> </div> </div></code></pre> <p>可以看到,依然需要在后面添加一个重复辅助元素,实现循环轮播效果。</p> <p>CSS代码:</p> <pre> <code class="language-css"> // 轮播动画 @-webkit-keyframes marquee { 0% { -webkit-transform: translate3d(0, 0, 0); } 27% { -webkit-transform: translate3d(0, 0, 0); } 33% { -webkit-transform: translate3d(0, -100%, 0); } 60% { -webkit-transform: translate3d(0, -100%, 0); } 67% { -webkit-transform: translate3d(0, -200%, 0); } 94% { -webkit-transform: translate3d(0, -200%, 0); } 100% { -webkit-transform: translate3d(0, -300%, 0); } } @keyframes marquee { 0% { transform: translate3d(0, 0, 0); } /* 100/3 * (2s/2.5s) => 26.7% => 27% */ 27% { transform: translate3d(0, 0, 0); } /* 100/3 =>33.3 => 33% */ 33% { transform: translate3d(0, -100%, 0); } 60% { transform: translate3d(0, -100%, 0); } 67% { transform: translate3d(0, -200%, 0); } 94% { transform: translate3d(0, -200%, 0); } 100% { transform: translate3d(0, -300%, 0); } } .wrapper-css { width: 200px; height: 30px; margin: 10px; overflow: hidden; } .container-css { height: 30px; -webkit-animation: marquee 7.5s linear infinite;/* 2.5s(2s + 0.5s) * 3 => 7.5s */ animation: marquee 7.5s linear infinite; } .container-css p { width: 100%; height: 30px; margin: 0; line-height: 30px; font-size: 18px; }</code></pre> <p>如上,我们使用CSS3定义动画关键帧,并结合transform位移实现无缝轮播动画,通过移动容器实现轮播效果,主要需要根据轮播元素计算动画关键帧点。</p> <p> </p> <p>来自:http://blog.codingplayboy.com/2017/03/14/marquee/</p> <p> </p>
本文由用户 JulissaCaus 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!