当前位置：首页 > 网页特效 > 滚动

jQuery滚动视觉差插件Parallax.js

分类：滚动日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="js/jquery.min.js"></script>
<script src="dist/jquery.parallax.js"></script> 
```                 
#####  HTML结构
使用一个块级元素作为视觉差效果的容器，并在里面放置一个用于制作图片背景的元素。

```html
<section class="parallax-wrapper">
  <figure class="parallax-demo"></figure>
</section>
```
#####  CSS样式
为背景图片添加一些样式。

```html
.parallax-demo {
  position: relative;
  background-image: url(img/demo.img);
  background-size: cover;
  height: 1203px;
}        
```          
另外视觉差容器需要有一个固定的高度。

```html
.parallax-wrapper {
  position: relative;
  height: 400px;
  overflow: hidden;
}    
```              
#####  初始化插件
在页面DOM元素机制完毕之后，通过parallax()方法来初始化该背景图片视觉差插件。

```html
$(function(){
 
  $(".parallax-demo").parallax();
 
});
```
#####  配置参数
1、可以通过配置参数来设置滚动的速度。

```html
$(function(){
 
  $(".parallax-demo").parallax({
    speed: '100'
  });
 
});     
```            
2、可以通过配置参数来设置滚动的方向。

```html
$(function(){
 
  $(".parallax-demo").parallax({
    ascending: true, // false = bottom to top
  });
 
});     
```        
3、可以通过配置参数来设置视觉差滚动的延迟时间。

```html
$(function(){
 
  $(".parallax-demo").parallax({
    delay: '1000'
  });
 
});       
```

web299.com

jQuery滚动视觉差插件Parallax.js

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果