Swiper Parallax(视差) - parallax

设置为true开启Swiper的视差效果,内容在切换时更有层次感。
效果可以应用于container或slide的子元素。当应用于container的子元素(常用于视差背景图),每次切换时视差效果仅有设定值的1/(slide个数-1)
参数名 类型 默认 描述
enabled boolean true 组件的默认设置,启用Parallax

1.视差位移变化
    在所需要的元素上增加data-swiper-parallax属性(与Swiper切换方向相同)或data-swiper-parallax-x (x方向) data-swiper-parallax-y(y方向)
    data-swiper-parallax接受两种类型的参数。
          number(单位:px),如-300,从右边300px进入左边出去。
          percentage(百分比),移动距离=该元素宽度 * percentage。
2.视差透明度变化
    在所需要的元素上增加data-swiper-parallax-opacity属性。可选值0-1,如0.5,从半透明进入半透明出去。
    *设定透明度或缩放必须同时设定位移,否则无效(4.5.1前) <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
3.视差缩放变化
    在所需要的元素上增加data-swiper-parallax-scale属性。可选值如0.5,从一半大小进入一半大小出去。 还可通过data-swiper-parallax-duration设定视差动画持续时间(ms)。默认值是Swiper的speed,与切换时间同步。

parallax信息

类型:
boolean | ParallaxOptions
默认:
false
举例:
true
启用版本:
4.0.0

效果演示

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<div class="swiper">
<div style="background-image:url(/img/Parallax.jpg)" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
    <div class="swiper-wrapper">
       <div class="swiper-slide">
            <div class="title" data-swiper-parallax="-100">从右边100px开始进入</div>
            <div class="subtitle" data-swiper-parallax="-200">从右边200px开始进入</div>
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>从右边300px开始进入,时间600ms</p>
            </div>
            <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
            <div data-swiper-parallax-scale="0.15" >缩放变化</div>
        </div>
    </div>
</div>
<script language="javascript"> 
    var mySwiper = new Swiper('.swiper',{
            parallax : true,
    })
</script>