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>