Overview

scrollCue.js is a JavaScript plugin that works without jQuery.
Show elements by scrolling.
It works on modern browser as Chrome, Firefox, Safari, Edge, IE11.

Demo

https://prjct-samwest.github.io/scrollCue/

Version

The latest version is -

License

Created by SamWest.
Copyright (c) 2020 SamWest.
This plugin is released under the MIT License.

Install

Install it from npm or download the file.

npm install

npm install scrollcue

File Download

aaa

Usage

Add a CSS to the <head> tag.

<link rel="stylesheet" href="scrollCue.css">

Add a JavaScript to just before the </body> tag.

<script src="scrollCue.min.js"></script>

Initialize scrollCue.js

<script>scrollCue.init();</script>

Markup Examples

See the "Examples" page to see how it works and to test the animation.

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

See the "Examples" page to see how it works and to test the animation.

[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>

Animation types

There are 15 different animations available.
You can add / custom animation by editing slideCue.css. Click here for details

・fadeIn
・slideInLeft
・slideInRight
・slideInDown
・slideInUp
・zoomIn
・zoomOut
・rotateIn
・bounceIn
・bounceInLeft
・bounceInRight
・bounceInDown
・bounceInUp
・flipInX
・flipInY

Options

Option	Type	Default	Description
duration	Number	600	Time to show the element.(ms)
interval	Number	-0.7	Time interval for showing side-by-side elements. You can use negative numbers.(Integer or Real number) Integer : (ms) Real number : Percentage of duration time of the previous element.
percentage	Number	0.75	Percentage of screen height to start showing elements.(Real number from 0 to 1)
enable	Boolean	true	Whether or not to start the process automatically when the site loads. If false, call scrollCue.enable(true) at optional time.
docSlider	Boolean	false	Used in combination with docSlider.js. More information about docSiider.js. can be found here.
pageChangeReset	Boolean	false	Used in combination with docSlider.js. Each time you change the pages, the animation will play over again.

Examples

scrollCue.init({
    duration : 300,
    interval : -200,
    percentage : 0.8
});

Methods

Method	Arguments	Description
init	options	Initialize scrollCue.js
update		Update scrollCue.js
enable	toggle (boolean)	Enable / disable all scrollCue.js's operations.

Add animation types

If you want to add a new animation type, write it in scrollCue.css or scrollCue.scss as follows.

/**  ---------------
     foo
*/
[data-cue="foo"],[data-cues="foo"]>*{
  opacity: 0;
}
@keyframes foo {
  from{
    ...
  }
  to{
    opacity : 1;
    ...
  }
}

Default values change in SCSS

You can control some animation types at once by changing the value of the variable.

scrollCue.scss LINE : 13 to 17


// COMMON SETTING VALUE

$shift : 30px;       // Used by slideInLeft, slideInRight, slideInDown, slideInUp
$zoom : 0.8;         // Used by ZoomIn, ZoomOut
$rotate : -15deg;    // Used by rotateIn

Basic

Advanced