# ScrollCue.js

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.

Requires JS.
assets/js/vendors/scrollcue.js
Note that this component requires the use of the third-party scrollCue.js plugin.

### Fade In

    <div class="row row-cols-2 row-cols-lg-6 row-cols-md-3 g-2">
    <div class="col" data-cue="fadeIn">
       <div>
          <img src="../../assets/images/blog/blog-img-6.jpg" alt="blog 6" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="fadeIn">
       <div>
          <img src="../../assets/images/blog/blog-img-5.jpg" alt="blog 5" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="fadeIn">
       <div>
          <img src="../../assets/images/blog/blog-img-4.jpg" alt="blog 4" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="fadeIn">
       <div>
          <img src="../../assets/images/blog/blog-img-3.jpg" alt="blog 3" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="fadeIn">
       <div>
          <img src="../../assets/images/blog/blog-img-2.jpg" alt="blog 2" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="fadeIn">
       <div>
          <img src="../../assets/images/blog/blog-img-1.jpg" alt="blog 1" class="img-fluid w-100" />
       </div>
    </div>
    </div>

### Slide in left

     <div class="row row-cols-2 row-cols-lg-6 row-cols-md-3 g-2">
    <div class="col" data-cue="slideInLeft">
       <div>
          <img src="../../assets/images/blog/blog-img-5.jpg" alt="blog 6" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInLeft">
       <div>
          <img src="../../assets/images/blog/blog-img-4.jpg" alt="blog 5" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInLeft">
       <div>
          <img src="../../assets/images/blog/blog-img-3.jpg" alt="blog 4" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInLeft">
       <div>
          <img src="../../assets/images/blog/blog-img-2.jpg" alt="blog 3" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInLeft">
       <div>
          <img src="../../assets/images/blog/blog-img-1.jpg" alt="blog 2" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInLeft">
       <div>
          <img src="../../assets/images/blog/blog-img-6.jpg" alt="blog 1" class="img-fluid w-100" />
       </div>
    </div>
    </div>

### Slide in right

     <div class="row row-cols-2 row-cols-lg-6 row-cols-md-3 g-2">
    <div class="col" data-cue="slideInRight">
       <div>
          <img src="../../assets/images/blog/blog-img-3.jpg" alt="blog 6" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInRight">
       <div>
          <img src="../../assets/images/blog/blog-img-2.jpg" alt="blog 5" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInRight">
       <div>
          <img src="../../assets/images/blog/blog-img-1.jpg" alt="blog 4" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInRight">
       <div>
          <img src="../../assets/images/blog/blog-img-4.jpg" alt="blog 3" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInRight">
       <div>
          <img src="../../assets/images/blog/blog-img-6.jpg" alt="blog 2" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInRight">
       <div>
          <img src="../../assets/images/blog/blog-img-5.jpg" alt="blog 1" class="img-fluid w-100" />
       </div>
    </div>
    </div>

### Slide in down

     <div class="row row-cols-2 row-cols-lg-6 row-cols-md-3 g-2">
    <div class="col" data-cue="slideInDown">
       <div>
          <img src="../../assets/images/blog/blog-img-4.jpg" alt="blog 6" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInDown">
       <div>
          <img src="../../assets/images/blog/blog-img-6jpg" alt="blog 5" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInDown">
       <div>
          <img src="../../assets/images/blog/blog-img-2.jpg" alt="blog 4" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInDown">
       <div>
          <img src="../../assets/images/blog/blog-img-5.jpg" alt="blog 3" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInDown">
       <div>
          <img src="../../assets/images/blog/blog-img-3.jpg" alt="blog 2" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="slideInDown">
       <div>
          <img src="../../assets/images/blog/blog-img-1.jpg" alt="blog 1" class="img-fluid w-100" />
       </div>
    </div>
    </div>

### Zoom in

     <div class="row row-cols-2 row-cols-lg-6 row-cols-md-3 g-2">
    <div class="col" data-cue="zoomIn">
       <div>
          <img src="../../assets/images/blog/blog-img-1.jpg" alt="blog 6" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="zoomIn">
       <div>
          <img src="../../assets/images/blog/blog-img-3.jpg" alt="blog 5" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="zoomIn">
       <div>
          <img src="../../assets/images/blog/blog-img-2.jpg" alt="blog 4" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="zoomIn">
       <div>
          <img src="../../assets/images/blog/blog-img-6.jpg" alt="blog 3" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="zoomIn">
       <div>
          <img src="../../assets/images/blog/blog-img-5.jpg" alt="blog 2" class="img-fluid w-100" />
       </div>
    </div>
    <div class="col" data-cue="zoomIn">
       <div>
          <img src="../../assets/images/blog/blog-img-4.jpg" alt="blog 1" class="img-fluid w-100" />
       </div>
    </div>
    </div>