ScrollSpy

Add animations to elements when scrolling. (require support to CSS3 animation).

Examples

The following example contains different animations.

Fade

The purpose of his life is to procure for himself everything that contributes to bodily welfare. He is happy enough when this causes him a lot of trouble. For if those good things are heaped on him in advance, he will inevitably lapse into boredom —— Arthur Schopenhauer

Scale-up

Scale-down

Slide Top

Slide Bottom

Slide Right

Slide Left

Fade

Fade delay: 300

Fade delay: 600

Fade delay: 900

<div class="am-panel am-panel-default" data-am-scrollspy="{animation: 'fade'}">...</div>

<div class="am-panel am-panel-default" data-am-scrollspy="{animation: 'fade', delay: 300}">...</div>

Usage

Using Data API

Add data-am-scrollspy attribute to element.

Attribute	Description
`data-am-scrollspy="{animation:'fade'}"`	Animation. See more in Amaze UI Animation. Default animation is `fade`
`data-am-scrollspy="{animation:'fade', delay: 300}"`	Delay(ms). Default value is `0`
`data-am-scrollspy="{animation:'fade', repeat: false}"`	Whether repeat the animation. Default value is `true`

Using JS

Initialize through $().scrollspy(options).

ScrollSpy via JS

<div class="am-panel am-panel-primary" id="my-scrollspy">
  <div class="am-panel-hd">ScrollSpy via JS
  </div>
  <div class="am-panel-bd">
    The purpose of his life is to procure for himself everything that contributes to bodily welfare. He is happy enough when this causes him a lot of trouble. For if those good things are heaped on him in advance, he will inevitably lapse into boredom —— Arthur Schopenhauer
  </div>
</div>
<script>
$(function() {
  $('#my-scrollspy').scrollspy({
    animation: 'slide-left',
    delay: 500
  })
});
</script>

Events

Event	Description
`inview.scrollspy.amui`	Fired when the element comes into the viewport.
`outview.scrollspy.amui`	Fired when the element get out of the viewport.

$(function() {
  $('#my-scrollspy').on('inview.scrollspy.amui', function() {
    console.log('inview');
  }).on('outview.scrollspy.amui', function() {
    console.log('outview');
  });
});

MutationObserver

Use Mutation Observer to add animation to dynamiclly loaded elements.

Insert elements here:

<p><button class="am-btn am-btn-primary" id="doc-scrollspy-insert">Insert</button></p>
<div id="doc-scrollspy-wrapper" data-am-observe>
<p>Insert elements here: </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">I am the No.' + index + ' element。</div></div>';
      $wrapper.append(panel);
    };

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

Amaze UI 2.4

JavaScript

TOC