幻灯片/轮播
带视觉差效果jQuery幻灯片特效
PetitQ
这是一款简单效果非常炫酷的带视觉差效果的 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();
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
