页面滚动元素动画效果jQuery插件-灵象搜搜资源网

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

发布2020-11-08 浏览700次下载20次

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长（171373236#qq.com）！将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

jquery.scrollfx是一款可以制作页面滚动元素动画效果的jQuery插件。通过该插件，用户在滚动页面的时候，可以改变文字的大小以及背景颜色的透明度等，制作出很酷的效果。

安装

可以通过npm来安装该插件。

npm install jquery.scrollfx --save

使用方法

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

<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollfx.js"></script>

HTML结构

可以使用<div>或<section>作为分段容器，里面放置内容。

<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()方法来初始化该插件。

$(selector).scrollFx(function() {
  scaleElements:    '',   // required
  opacityElements:  '',   // required
  precision:        ''    // optional
});