MARKUP EXAMPLES

STANDARD

Set the "data-cue" attribute in the target element and specify the animation type.

<img src="001.jpg" data-cue="fadeIn">
<img src="002.jpg" data-cue="fadeIn">
<img src="003.jpg" data-cue="fadeIn">
<img src="004.jpg" data-cue="fadeIn">
<img src="005.jpg" data-cue="fadeIn">
<img src="006.jpg" data-cue="fadeIn">

PARENT WRAP

You can wrap it in a parent element by setting the "data-cues" attribute.

<div data-cues="fadeIn">
    <img src="001.jpg">
    <img src="002.jpg">
    <img src="003.jpg">
    <img src="004.jpg">
    <img src="005.jpg">
    <img src="006.jpg">
</div>

GROUPING WRAP

You can group target elements by setting the "data-group" attribute.

With grouping, when the first element is triggered, the remaining elements are also triggered sequentially, regardless of the scroll amount.

<div data-cues="fadeIn" data-group="images">
    <img src="001.jpg">
    ...
    <img src="008.jpg">
</div>

ADVANCED EXAMPLES

[data-duration]

You can set the showing time of the element.(ms)

<div data-cues="fadeIn" data-duration="2000">
    <img src="001.jpg">
    <img src="002.jpg">
    <img src="003.jpg" data-duration="500">
    <img src="004.jpg" data-duration="500">
    <img src="005.jpg">
    <img src="006.jpg">
</div>

[data-interval]

You can set the showing interval time of the element.(ms)

<div data-cues="fadeIn" data-interval="-200">
    <img src="001.jpg">
    <img src="002.jpg">
    <img src="003.jpg" data-interval="1000">
    <img src="004.jpg" data-interval="-0.2">   <!-- 200ms -->
    <img src="005.jpg">
    <img src="006.jpg">
</div>

[data-delay]

You can set the showing delay time of the element.(ms)

<div data-cues="fadeIn" data-delay="1000">
    <img src="001.jpg">
    <img src="002.jpg" data-delay="2000">
    <img src="003.jpg">
    <img src="004.jpg">
    <img src="005.jpg">
    <img src="006.jpg">
</div>

[data-order]

You can set the showing order of the elements individually.

If you set a negative number, the order will be from the end.

<div data-cues="fadeIn" data-group="images">
    <img src="001.jpg" data-order="-1">        <!--  6  -->
    <img src="002.jpg">                                <!--  3  -->
    <img src="003.jpg">                                <!--  4  -->
    <img src="004.jpg">                                <!--  5  -->
    <img src="005.jpg" data-order="1">         <!--  1  -->
    <img src="006.jpg" data-order="2">         <!--  2  -->
</div>

[data-addClass]

You can set any class names when showing the element.

<div data-cues="fadeIn" data-addClass="border foo bar">
    <img src="001.jpg">
    <img src="002.jpg" data-order="border-red">
    <img src="003.jpg">
    <img src="004.jpg" data-order="border-red">
    <img src="005.jpg">
    <img src="006.jpg">
</div>

[data-sort="reverse"]

You can reverse the showing order of the elements.

<div data-cues="fadeIn" data-group="images" data-sort="reverse">
    <img src="001.jpg">
    <img src="002.jpg">
    <img src="003.jpg">
    <img src="004.jpg">
    <img src="005.jpg">
    <img src="006.jpg">
</div>

[data-sort="random"]

You can randomize the showing order of the elements.

<div data-cues="fadeIn" data-group="images" data-sort="random">
    <img src="001.jpg">
    <img src="002.jpg">
    <img src="003.jpg">
    <img src="004.jpg">
    <img src="005.jpg">
    <img src="006.jpg">
</div>