建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

Parallax Scroll轻量级但强大的jQuery视差效果和CSS3滚动动画插件

来源:易助科技网浏览量:26收藏

简介


parallax-scroll 是一个 jQuery插件,用于创建具有背景图像的元素,这些元素的背景附件属性介于滚动和固定之间,类似于你在 Spotify 上看到的视差滚动效果,大致基于 Peder Andreas Nielsen 的 Parallax ImageScroll。

它巧妙地利用了背景位置和背景大小属性,而不是 CSS3 变换。它运行起来像黄油一样光滑,并保留了 Safari 中的橡皮筋滚动行为。在移动设备上也很管用。

(下载的附件中附有DEMO)


用于视差效果和CSS3滚动动画jQuery插件parallax scroll



使用


1.  引入文件


<script src="path/jquery.min.js"></script>
<script src="path/jquery.parallax-scroll.js"></script>



2.  HTML


像这样使用 data-parallax 属性将自定义滚动动画应用到元素


<img src="1.jpg" alt="Parallax" data-parallax='{"y":230}'>

<li data-parallax='{"x":750,"from-scroll":50,"distance":0,"smoothness":10}'>1</li>
<li data-parallax='{"x":-750,"from-scroll":80,"distance":30}'>A</li>


或者,您也可以如下代码所示使用。基本标记由放置在背景持有者之间的内容部分组成。原始图像的宽度和高度必须通过数据属性提供。它们是计算纵横比所必需的。


<div id="pic1" class="bg-holder" data-width="1024" data-height="768"></div>

<section>
  Content that "slides" over the backgrounds
</section>

<div id="pic2" class="bg-holder" data-width="1024" data-height="768">
  Optional content to be displayed on top of the backgrounds
</div>


使用以下样式将背景图像添加到.bg支架元素中。


<style>
/* All parent elements of .bg-holder must be 100% height for vertical stretch to work */
html,
body {
  width: 100%;
  height: 100%;
}

.bg-holder {
  width: 100%;
  height: 100%;
}

.bg-holder#pic1 {
  background-image: url('pic1.jpg');
}

.bg-holder#pic2 {
  background-image: url('pic2.jpg');
}
</style>


使用CSS背景图像最好的一点是,通过添加媒体查询,我们可以实现响应图像大小。


<style>
@media (min-width: 768px) {
  .bg-holder#pic1 {
    background-image: url('pic1_bigger.jpg');
  }
  .bg-holder#pic2 {
    background-image: url('pic2_bigger.jpg');
  }
}
</style>



3.  用法


要初始化插件,请在元素上调用 parallaxScroll 方法。


$('.bg-holder').parallaxScroll({
  friction: 0.5
});


该插件接受一个选项——摩擦 friction 。它应该是一个大于0且小于1的浮点值。0使背景表现为具有背景附件:滚动。1(最大摩擦力)与背景附件相同:固定。大于1的值将导致背景反向滚动!Pederan 的插件中提供的其他功能,如 holderMinHeight 和 coverRatio ,可以完全使用CSS实现,而且应该是这样。关闭移动设备中视差的回退选项是不必要的,因为该插件在移动设备上运行顺利。


data-parallax 属性的所有参数和属性


// vertical scroll position the animation starts
distance : // default: the window visible height

// vertical scroll position the animation ends 
to-scroll :  // default: from-scroll + distance

// factor that slowdown the animation, the more the smoothier
smoothness : 30

// 3d perspective applied on parent element in case of z axe use
perspective : 800

// X axis translation
x : // in pixels

// Y axis translation
y : // in pixels

// Z axis translation
z : in pixels

// X axis rotation
rotateX : // degress

// Y axis rotation (degrees)
rotateY : // degress

// Z axis rotation (degrees)
rotateZ : // degress

// Global scale
scale: // ratio

// X axis scale
scaleX: // ratio

// Y axis scale
scaleY: // ratio

// Z axis scale
scaleZ: // ratio


💡  说明:建议1.8.0或更高版本。唯一的限制是IE<9不支持背景大小属性,所以这个插件不能在那个古老的浏览器上工作。



相关链接


GitHub 地址 : https://github.com/Necrocter/Parallax-Scroll

文档地址 :  https://parallax-scroll.aenism.com/

易助科技网效果演示地址1 :  http://demo.easyzone.net.cn/plugin/ParallaxScroll/demo.html

易助科技网效果演示地址2 :  http://demo.easyzone.net.cn/plugin/ParallaxScroll/stars.html