Amaze UI

ScrollSpy


窗口滚动时为根据设置页面元素添加动画效果(仅在支持 CSS3 动画的浏览器上有效)。

基础用法

使用鼠标滚轮查看动画效果。

Fade
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Scale-up
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Scale-down
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Slide Top
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Slide Bottom
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Slide Right
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Slide Left
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Fade
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Fade delay: 300
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Fade delay: 600
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Fade delay: 900
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Copy
<div class="am-g">
  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'fade'}">
      <div class="am-panel-hd">Fade</div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>
</div>

<div class="am-g">
  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3 am-u-md-offset-4 am-u-lg-offset-3">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'scale-up'}">
      <div class="am-panel-hd">Scale-up</div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>
</div>

<div class="am-g">
  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3 am-u-md-offset-8 am-u-lg-offset-6">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'scale-down'}">
      <div class="am-panel-hd">Scale-down
      </div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>
</div>

<div class="am-g">
  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3 am-u-md-offset-8 am-u-lg-offset-9">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'slide-top'}">
      <div class="am-panel-hd">Slide Top
      </div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>
</div>

<div class="am-g">
  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3 am-u-md-offset-8 am-u-lg-offset-6">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'slide-bottom'}">
      <div class="am-panel-hd">Slide Bottom
      </div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>
</div>

<div class="am-g">
  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3 am-u-md-offset-4 am-u-lg-offset-3">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'slide-right'}">
      <div class="am-panel-hd">Slide Right
      </div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>
</div>

<div class="am-g">
  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'slide-left'}">
      <div class="am-panel-hd">Slide Left</div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>
</div>

<div class="am-g">
  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'fade'}">
      <div class="am-panel-hd">Fade</div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>

  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'fade', delay: 300}">
      <div class="am-panel-hd">Fade delay: 300</div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>

  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'fade', delay: 600}">
      <div class="am-panel-hd">Fade delay: 600
      </div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>

  <div class="am-u-sm-12 am-u-md-4 am-u-lg-3">
    <div class="am-panel am-panel-primary" data-am-scrollspy="{animation: 'fade', delay: 900}">
      <div class="am-panel-hd">Fade delay: 900
      </div>
      <div class="am-panel-bd">
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </div>
    </div>
  </div>
</div>

使用 data-am-scrollspy 属性中的 animation 参数来使用动画效果。

  • fade
  • scale-up
  • slide-top
  • slide-bottom
  • slide-left
  • slide-right
  • scale-down

在线运行

调用方式

通过 Data API

添加 data-am-scrollspy 属性,并设置相关属性。

属性描述
data-am-scrollspy="{animation:'fade'}"动画类名,参见 Amaze UI 动画库,默认为 fade
data-am-scrollspy="{animation:'fade', delay: 300}"延迟动画执行时间(ms),默认为 0
data-am-scrollspy="{animation:'fade', repeat: false}"是否重复动画,默认为 true

JS 调用

ScrollSpy via JS
大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
Copy
<div class="am-panel am-panel-primary" id="my-scrollspy">
  <div class="am-panel-hd">ScrollSpy via JS
  </div>
  <div class="am-panel-bd">
    大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。
  </div>
</div>
<script>
$(function() {
  $('#my-scrollspy').scrollspy({
    animation: 'slide-left',
    delay: 500
  })
});
</script>

通过 $().scrollspy(options) 设置,参数同上。

在线运行

自定义事件

事件名称描述
inview.scrollspy.amui元素进入窗口可视区域时触发
outview.scrollspy.amui元素离开窗口可视区域时触发
$(function() {
  $('#my-scrollspy').on('inview.scrollspy.amui', function() {
    console.log('进入视口');
  }).on('outview.scrollspy.amui', function() {
    console.log('离开视口');
  });
});

MutationObserver

通过 Mutation Observer 可以实现动态加载元素的动画效果。

点击插入按钮来查看效果。

Copy
<p><button class="am-btn am-btn-primary" id="doc-scrollspy-insert">插入</button></p>
<div id="doc-scrollspy-wrapper" data-am-observe>
<p>点击插入按钮来查看效果。</p>
</div>
<script>
  $(function() {
    var i = 1;
    var $wrapper = $('#doc-scrollspy-wrapper');
    var appendPanel = function(index) {
      var panel = '<div class="am-panel am-panel-primary" ' +
        'data-am-scrollspy="{animation: \'scale-up\'}">' +
        '<div class="am-panel-bd">我是第' + index + '个插入的元素。</div></div>';
      $wrapper.append(panel);
    };

    $('#doc-scrollspy-insert').on('click', function() {
      appendPanel(i);
      i++;
    });
  });
</script>