这是一款效果非常炫酷的Material Design风格内容幻灯片特效。该幻灯片使用js和CSS3来制作,在点击分页圆点按钮时,按钮有非常酷的弹性gooey变形动画效果。
HTML结构
该Material Design风格内容幻灯片的基本HTML结构如下:
<div class="center"> <div class="slider" data-pos="0"> <div class="slider__slides"> <div class="slider__slide"></div> <div class="slider__slide"></div> <div class="slider__slide"></div> <div class="slider__slide"></div> </div> <div class="slider__dots"> <a href="#" class="slider__indicator"></a> <a href="#" class="slider__dot" data-pos="0"></a> <a href="#" class="slider__dot" data-pos="1"></a> <a href="#" class="slider__dot" data-pos="2"></a> <a href="#" class="slider__dot" data-pos="3"></a> </div> </div> </div>
CSS样式
为幻灯片添加以下一些基本的CSS样式。
.slider { position: relative; width: 100%; height: 100%; overflow: hidden; } .slider__slides { position: relative; width: 400%; height: 100%; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); transition: -webkit-transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1), -webkit-transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); will-change: transform; } .slider[data-pos="0"] .slider__slides { -webkit-transform: translateX(0%); transform: translateX(0%); } .slider[data-pos="1"] .slider__slides { -webkit-transform: translateX(-25%); transform: translateX(-25%); } .slider[data-pos="2"] .slider__slides { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .slider[data-pos="3"] .slider__slides { -webkit-transform: translateX(-75%); transform: translateX(-75%); } .slider__slide { float: left; width: 25%; height: 100%; } .slider__dots { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; bottom: 1.5em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .slider__dot, .slider__indicator { display: block; margin: 0 0.5em; width: 1em; height: 1em; background: rgba(255, 255, 255, 0.5); border-radius: 100px; } .slider__indicator { position: absolute; background: white; width: auto; } .slider__indicator--left { -webkit-transition: left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15); transition: left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15); } .slider__indicator--right { -webkit-transition: left 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15); transition: left 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15); } .slider[data-pos="0"] .slider__indicator { left: 0em; right: 6em; } .slider[data-pos="1"] .slider__indicator { left: 2em; right: 4em; } .slider[data-pos="2"] .slider__indicator { left: 4em; right: 2em; } .slider[data-pos="3"] .slider__indicator { left: 6em; right: 0em; }
JavaScript
特效中使用JavaScript代码来遍历所有的圆点导航按钮,并为它们分别附加click
事件,然后根据当前圆点按钮的位置来判断是该向前还是向后移动幻灯片,并为相应的元素添加或移除相应的class类。
'use strict'; var dots = 4; var sliderElem = document.querySelector('.slider'); var dotElems = sliderElem.querySelectorAll('.slider__dot'); var indicatorElem = sliderElem.querySelector('.slider__indicator'); Array.prototype.forEach.call(dotElems, function (dotElem) { dotElem.addEventListener('click', function (e) { var currentPos = parseInt(sliderElem.getAttribute('data-pos')); var newPos = parseInt(dotElem.getAttribute('data-pos')); var newDirection = newPos > currentPos ? 'right' : 'left'; var currentDirection = newPos < currentPos ? 'right' : 'left'; indicatorElem.classList.remove('slider__indicator--' + currentDirection); indicatorElem.classList.add('slider__indicator--' + newDirection); sliderElem.setAttribute('data-pos', newPos); }); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!