带视觉差效果的jQuery幻灯片特效

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 带视觉差效果的jQuery幻灯片特效
带视觉差效果的jQuery幻灯片特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:07-14
    阅读:
简要教程

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