这是一款轻量级的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; }