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

页面滚动元素动画效果jQuery插件

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

页面滚动元素动画效果jQuery插件

简介

使用该插件需要在页面中引入jquery和jquery.scrollfx.js文件。

```html
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollfx.js"></script>  
```               
#####  HTML结构
可以使用div或section作为分段容器，里面放置内容。

```html
<section id="first" class="container-fluid">
  <div class="image"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-6">
        <h2>First section with an animation</h2>
        <hr>
        <p class="lead">
          Scroll down to see these texts scale down and see the background change it's opacity.
        </p>
        <a href="#top" class="btn btn-lg btn-primary" data-to-top>
          Scroll to top
          <i class="fa fa-chevron-top"></i>
        </a>
      </div>
    </div>
  </div>
</section>
 
<section id="second" class="container-fluid">
  <div class="image"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2>Second section with an animation</h2>
        <hr>
        <p class="lead">
          Scroll down to see these texts scale down and see the background change it's opacity.
        </p>
        <a href="#top" class="btn btn-lg btn-primary" data-to-top>Scroll to top</a>
      </div>
    </div>
  </div>
</section>
......
```

#####  初始化插件
在页面DOM元素加载完毕之后，可以通过scrollFx()方法来初始化该插件。

```html
$(selector).scrollFx(function() {
  scaleElements:    '',   // required
  opacityElements:  '',   // required
  precision:        ''    // optional
});    
```            
#####  配置参数
- scaleElements：类型：String，默认值：''。在页面滚动时被缩放的元素，可以使用“,”来分隔多个元素。
- opacityElements：类型：String，默认值：''。在页面滚动时被修改透明度的元素，可以使用“,”来分隔多个元素。
- precision：类型：integer，默认值：10。该参数用于调整性能。该参数值越大，动画越平滑，但是GPU 或 CPU的消耗页越大。

web299.com

页面滚动元素动画效果jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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