jQuery固定背景视觉滚动特效插件

这是一款轻量级的jQuery固定背景视觉滚动特效插件。该jQuery固定背景视觉滚动特效插件使用CSS background-position属性和简单的js代码来完成页内滚动时的背景图片视觉差效果。

使用方法

在页面中引入jquery和paraLasic.1.1.js文件。

<script src="js/jquery.min.js"></script><script src="js/paraLasic.1.1.js""></script>                         

HTML结构

使用一个<div>元素来作为背景图片的容器。为容器添加paralasic class类，并设置data-paralasic属性。

<div class="paralasic" data-paralasic="0.5"></div>                

CSS样式

为<div>元素设置CSS属性如下：

.paralasic {  background:  linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),  url(../images/demo.jpg);    background-attachment: fixed;  background-size: cover;  background-size: 100vw;  background-position: center top;  background-repeat: no-repeat;  background-color: #000000;}                

Javascript

实现固定背景视觉滚动特效的js代码非常简单，它只是简单的修改background-position属性值，来实现视觉差滚动效果。

var paralasicValue = $('.paralasic').attr('data-paralasic');$('.paralasic').css('background-position', 'center top -' + scrollTop * paralasicValue + 'px');                                  

 jQuery固定背景视觉滚动特效插件的github地址为：https://github.com/alexlupoz/ParaLasic-JS