投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 图片相册背景 / jQuery固定背景视觉滚动特效插件
jQuery固定背景视觉滚动特效插件
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-02
    阅读:

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;
}