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

blog 6
blog 5
blog 4
blog 3
blog 2
blog 1 
<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

blog 6
blog 5
blog 4
blog 3
blog 2
blog 1 
 <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

blog 6
blog 5
blog 4
blog 3
blog 2
blog 1 
 <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

blog 6
blog 5
blog 4
blog 3
blog 2
blog 1 
 <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

blog 6
blog 5
blog 4
blog 3
blog 2
blog 1 
 <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>