带视觉差效果的jQuery幻灯片特效 |幻灯片和轮播图|下载

简要教程

这是一款简单效果非常炫酷的带视觉差效果的jQuery幻灯片特效。该幻灯片特效基于flickity幻灯片插件来制作，通过切换背景图片层来实现视觉差效果。

使用方法

在页面中引入jquery，flickity.pkgd.js和flickity.css文件，以及特效需要的样式文件style.css。

HTML结构

该幻灯片特效的基本HTML结构如下：使用一个

作为容器。parallax__layer--bg是背景层，两个背景层之间为制作视觉差效果的单元图层。

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();