ABOUT

scrollCue.js is a JavaScript plugin that works without jQuery.
Show elements by scrolling.

USAGE

  1. Add a CSS link to <head> tag.

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

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

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

  3. and initialize scrollCue.js

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

MARKUP EXAMPLES

ANIMATION TYPES

There are 15 different animations available.

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

You can add / custom animation by editing slideCue.css

CSS CUSTOMIZE

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>

MORE EXAMPLES

See below for animation confirmation and other markup.

MORE EXAMPLES

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 docSlider.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.

EXAMPLE

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.