带视觉差效果的jQuery幻灯片特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款简单效果非常炫酷的带视觉差效果的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();