这是一款简单效果非常炫酷的带视觉差效果的jQuery幻灯片特效。该幻灯片特效基于flickity幻灯片插件来制作,通过切换背景图片层来实现视觉差效果。
使用方法
在页面中引入jquery,flickity.pkgd.js和flickity.css文件,以及特效需要的样式文件style.css。
<link rel="stylesheet" type="text/css" href="css/flickity.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/flickity.pkgd.js"></script>
HTML结构
该幻灯片特效的基本HTML结构如下:使用一个<div>
作为容器。parallax__layer--bg
是背景层,两个背景层之间为制作视觉差效果的单元图层。
<div class="parallax sprite"> <div class="parallax__layer parallax__layer--bg sprite"></div> <div class="parallax__carousel"> <div class="parallax__carousel__cell sprite"></div> <div class="parallax__carousel__cell sprite"></div> <div class="parallax__carousel__cell sprite"></div> <div class="parallax__carousel__cell sprite"></div> <div class="parallax__carousel__cell sprite"></div> </div> <div class="parallax__layer parallax__layer--fg sprite"></div> </div>
JavaScript
该视觉差幻灯片特效通过Flickity的on
方法来监听幻灯片的滚动,然后修改前景和背景的left
属性,使背景层按不同的速率进行移动,形成视觉差效果。
var flkty = new Flickity('.parallax__carousel'); var paraBG = document.querySelector('.parallax__layer--bg'); var paraFG = document.querySelector('.parallax__layer--fg'); var cellRatio = 1; var bgRatio = 0.75; var fgRatio = 2; flkty.on( 'scroll', function( progress ) { paraBG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * bgRatio ) * 100 + '%'; paraFG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * fgRatio ) * 100 + '%'; }); flkty.reposition();
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!