AOS
Animate On Scroll library using CSS3.
Installation
Add styles in <head></head>
<link rel="stylesheet" href="src/plugins/aos/dist/aos.css">
Add script right before closing </body> tag, and initialize AOS
<!-- Plugin js -->
<script src="src/plugins/aos/dist/aos.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
If you want to remove AOS js editing theme.js in this function myAos();
Example
Latest Bootstrap
Bootstrap 4 the world’s most popular front-end component library.
NPM Software
Enjoy with the public registry tools you already love to use.
Built with Gulp
Gulp making your project automatic and easy to running.
How to use
You can use animation with paste this code data-aos="fade-up" or data-aos="fade-right" or other style in your layout. You also can set delay time with this code data-aos-delay="100" and dont forget to change 100 with your value.
<!-- row -->
<div class="row text-center">
<div class="col-12 col-sm-6 col-lg-4" data-aos="fade-up">
<!-- service block -->
<div class="shadow-sm rounded-3 bg-white p-4 mb-5 hover-box-up">
<div class="text-primary mb-4">
<!-- icon -->
<svg class="bi bi-bootstrap" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M12 1H4a3 3 0 00-3 3v8a3 3 0 003 3h8a3 3 0 003-3V4a3 3 0 00-3-3zM4 0a4 4 0 00-4 4v8a4 4 0 004 4h8a4 4 0 004-4V4a4 4 0 00-4-4H4z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.537 12H5.062V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396zM6.375 4.658v2.467h1.558c1.16 0 1.764-.428 1.764-1.23 0-.78-.569-1.237-1.541-1.237H6.375zm1.898 6.229H6.375V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377z" clip-rule="evenodd"></path>
</svg>
</div>
<h3 class="h5 fw-medium mb-1">Latest Bootstrap</h3>
<p class="text-light-blue">Bootstrap 4 the world’s most popular front-end component library.</p>
</div> <!-- end service block -->
</div>
<div class="col-12 col-sm-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
<!-- service block -->
<div class="shadow-sm rounded-3 bg-white p-4 mb-5 hover-box-up">
<div class="text-primary mb-4">
<!-- icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="3rem" height="3rem" viewBox="0 0 512 512"><rect x="227.6" y="213.1" width="28.4" height="57.1" style="fill:currentColor"></rect><path d="M0,156V327.4H142.2V356H256V327.4H512V156ZM142.2,298.9H113.8V213.2H85.3v85.7H28.4V184.6H142.2Zm142.2,0H227.5v28.6H170.6V184.6H284.4V298.9Zm199.2,0H455.2V213.2H426.8v85.7H398.4V213.2H370v85.7H313.1V184.6H483.8V298.9Z" style="fill:currentColor"></path></svg>
</div>
<h3 class="h5 fw-medium mb-1">NPM Software</h3>
<p class="text-light-blue">Enjoy with the public registry tools you already love to use.</p>
</div><!-- end service block -->
</div>
<div class="col-12 col-sm-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<!-- service block -->
<div class="shadow-sm rounded-3 bg-white p-4 mb-5 hover-box-up">
<div class="text-primary mb-4">
<!-- icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="3rem" height="3rem" viewBox="0 0 256 512"><path style="fill:currentColor" d="M209.8 391.1l-14.1 24.6-4.6 80.2c0 8.9-28.3 16.1-63.1 16.1s-63.1-7.2-63.1-16.1l-5.8-79.4-14.9-25.4c41.2 17.3 126 16.7 165.6 0zm-196-253.3l13.6 125.5c5.9-20 20.8-47 40-55.2 6.3-2.7 12.7-2.7 18.7.9 5.2 3 9.6 9.3 10.1 11.8 1.2 6.5-2 9.1-4.5 9.1-3 0-5.3-4.6-6.8-7.3-4.1-7.3-10.3-7.6-16.9-2.8-6.9 5-12.9 13.4-17.1 20.7-5.1 8.8-9.4 18.5-12 28.2-1.5 5.6-2.9 14.6-.6 19.9 1 2.2 2.5 3.6 4.9 3.6 5 0 12.3-6.6 15.8-10.1 4.5-4.5 10.3-11.5 12.5-16l5.2-15.5c2.6-6.8 9.9-5.6 9.9 0 0 10.2-3.7 13.6-10 34.7-5.8 19.5-7.6 25.8-7.6 25.8-.7 2.8-3.4 7.5-6.3 7.5-1.2 0-2.1-.4-2.6-1.2-1-1.4-.9-5.3-.8-6.3.2-3.2 6.3-22.2 7.3-25.2-2 2.2-4.1 4.4-6.4 6.6-5.4 5.1-14.1 11.8-21.5 11.8-3.4 0-5.6-.9-7.7-2.4l7.6 79.6c2 5 39.2 17.1 88.2 17.1 49.1 0 86.3-12.2 88.2-17.1l10.9-94.6c-5.7 5.2-12.3 11.6-19.6 14.8-5.4 2.3-17.4 3.8-17.4-5.7 0-5.2 9.1-14.8 14.4-21.5 1.4-1.7 4.7-5.9 4.7-8.1 0-2.9-6-2.2-11.7 2.5-3.2 2.7-6.2 6.3-8.7 9.7-4.3 6-6.6 11.2-8.5 15.5-6.2 14.2-4.1 8.6-9.1 22-5 13.3-4.2 11.8-5.2 14-.9 1.9-2.2 3.5-4 4.5-1.9 1-4.5.9-6.1-.3-.9-.6-1.3-1.9-1.3-3.7 0-.9.1-1.8.3-2.7 1.5-6.1 7.8-18.1 15-34.3 1.6-3.7 1-2.6.8-2.3-6.2 6-10.9 8.9-14.4 10.5-5.8 2.6-13 2.6-14.5-4.1-.1-.4-.1-.8-.2-1.2-11.8 9.2-24.3 11.7-20-8.1-4.6 8.2-12.6 14.9-22.4 14.9-4.1 0-7.1-1.4-8.6-5.1-2.3-5.5 1.3-14.9 4.6-23.8 1.7-4.5 4-9.9 7.1-16.2 1.6-3.4 4.2-5.4 7.6-4.5.6.2 1.1.4 1.6.7 2.6 1.8 1.6 4.5.3 7.2-3.8 7.5-7.1 13-9.3 20.8-.9 3.3-2 9 1.5 9 2.4 0 4.7-.8 6.9-2.4 4.6-3.4 8.3-8.5 11.1-13.5 2-3.6 4.4-8.3 5.6-12.3.5-1.7 1.1-3.3 1.8-4.8 1.1-2.5 2.6-5.1 5.2-5.1 1.3 0 2.4.5 3.2 1.5 1.7 2.2 1.3 4.5.4 6.9-2 5.6-4.7 10.6-6.9 16.7-1.3 3.5-2.7 8-2.7 11.7 0 3.4 3.7 2.6 6.8 1.2 2.4-1.1 4.8-2.8 6.8-4.5 1.2-4.9.9-3.8 26.4-68.2 1.3-3.3 3.7-4.7 6.1-4.7 1.2 0 2.2.4 3.2 1.1 1.7 1.3 1.7 4.1 1 6.2-.7 1.9-.6 1.3-4.5 10.5-5.2 12.1-8.6 20.8-13.2 31.9-1.9 4.6-7.7 18.9-8.7 22.3-.6 2.2-1.3 5.8 1 5.8 5.4 0 19.3-13.1 23.1-17 .2-.3.5-.4.9-.6.6-1.9 1.2-3.7 1.7-5.5 1.4-3.8 2.7-8.2 5.3-11.3.8-1 1.7-1.6 2.7-1.6 2.8 0 4.2 1.2 4.2 4 0 1.1-.7 5.1-1.1 6.2 1.4-1.5 2.9-3 4.5-4.5 15-13.9 25.7-6.8 25.7.2 0 7.4-8.9 17.7-13.8 23.4-1.6 1.9-4.9 5.4-5 6.4 0 1.3.9 1.8 2.2 1.8 2 0 6.4-3.5 8-4.7 5-3.9 11.8-9.9 16.6-14.1l14.8-136.8c-30.5 17.1-197.6 17.2-228.3.2zm229.7-8.5c0 21-231.2 21-231.2 0 0-8.8 51.8-15.9 115.6-15.9 9 0 17.8.1 26.3.4l12.6-48.7L228.1.6c1.4-1.4 5.8-.2 9.9 3.5s6.6 7.9 5.3 9.3l-.1.1L185.9 74l-10 40.7c39.9 2.6 67.6 8.1 67.6 14.6zm-69.4 4.6c0-.8-.9-1.5-2.5-2.1l-.2.8c0 1.3-5 2.4-11.1 2.4s-11.1-1.1-11.1-2.4c0-.1 0-.2.1-.3l.2-.7c-1.8.6-3 1.4-3 2.3 0 2.1 6.2 3.7 13.7 3.7 7.7.1 13.9-1.6 13.9-3.7z"></path></svg>
</div>
<h3 class="h5 fw-medium mb-1">Built with Gulp</h3>
<p class="text-light-blue">Gulp making your project automatic and easy to running.</p>
</div><!-- end service block -->
</div>
</div>
For complete documentation read in here
Counter Up2
A lightweight module that counts up to a targeted number when the number becomes visible.
Installation
Add script right before closing </body> tag, and initialize Counter Up2. Counter Up2 required to install Waypoints Js
<!-- Plugin js -->
<script src="src/plugins/waypoints/lib/noframework.waypoints.min.js"></script>
<script src="src/plugins/counterup2/dist/index.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
If you want to remove Counter js editing theme.js in this function myCounters();
Example
1500+
Customers
250+
Company
520+
Project
450+
Complete
How to use
You can use counter up animation with add this counter classes
<div class="row text-center text-uppercase">
<div class="col-lg-3 col-sm-6">
<div class="p-4 bg-white rounded shadow-sm position-relative mb-4 mb-lg-0">
<div class="display-4 text-primary mb-1">
<span class="counter">1500<span class="small">+</span></span>
</div>
<small class="d-block text-uppercase text-primary">Customers</small>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="p-4 bg-white rounded shadow-sm position-relative mb-4 mb-lg-0">
<div class="display-4 text-primary mb-1">
<span class="counter">250<span class="small">+</span></span>
</div>
<small class="d-block text-uppercase text-primary">Company</small>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="p-4 bg-white rounded shadow-sm position-relative mb-4 mb-lg-0">
<div class="display-4 text-primary mb-1">
<span class="counter">520<span class="small">+</span></span>
</div>
<small class="d-block text-uppercase text-primary">Running Project</small>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="p-4 bg-white rounded shadow-sm position-relative mb-4 mb-lg-0">
<div class="display-4 text-primary mb-1">
<span class="counter">450<span class="small">+</span></span>
</div>
<small class="d-block text-uppercase text-primary">Complete Project</small>
</div>
</div>
</div>
For complete documentation read in here
Flickity
Touch, responsive, flickable carousels.
How to install?
Paste the following css link source before </head>
<link rel="stylesheet" href="src/plugins/flickity/dist/flickity.min.css">
And paste the following <script>s near the end of your pages before </body>
<!-- plugins -->
<script src="src/plugins/flickity/dist/flickity.pkgd.min.js"></script>
Basic Example
<div id="thumbnail-slider" class="mb-7 mb-lg-3 carousel" data-flickity='{ "cellAlign": "left","rightToLeft": true, "wrapAround": true, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
<div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
<img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking1.jpg">
</div>
<div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
<img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking2.jpg">
</div>
<div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
<img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking3.jpg">
</div>
</div>
If want to use dark navigation and light dots, use following code .nav-dark-button and .nav-light-dots
Make navigation inset .nav-inset-button
<div id="thumbnail-slider" class="mb-7 mb-lg-3 carousel nav-inset-button nav-dark-button nav-light-dots" data-flickity='{ "cellAlign": "left","rightToLeft": true, "wrapAround": true, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
<div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
<img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking1.jpg">
</div>
<div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
<img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking2.jpg">
</div>
<div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
<img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking3.jpg">
</div>
</div>
For responsive design, you can use Bootstrap responsive grid
More example slider in Reviews section and Hero slider
Plugin documentation
For more detailed information, see the official documentation: Flickity.
HC Sticky
JavaScript library that makes any element on your page visible while you scroll. Dependency free, but lso works as a jQuery plugin.
Installation
Add script right before closing </body> tag, and initialize Sticky
<!-- Plugin js -->
<script src="src/plugins/hc-sticky/dist/hc-sticky.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
If you want to editing Hc sticky js, open file theme.js and edit this function mySticky();
How to trigger sticky
Add .sticky classes in your element
Example sticky
Main content
<section>
<div class="row">
<div class="col-md-8">
<div class="ex-content text-center py-9 border bg-light mb-5">
<p>Main content</p>
</div>
</div>
<div class="col-md-4">
<aside class="sticky">
<div class="ex-sidebar text-center py-4 border bg-light mb-4">
<p>Sticky content</p>
</div>
<div class="ex-sidebar text-center py-4 border bg-light mb-4">
<p>Sticky content</p>
</div>
</aside>
</div>
</div>
</section>
For complete documentation read in here
Isotope
Filter & sort magical layouts.
Installation
Add script right before closing </body> tag, and initialize Isotope
<!-- Plugin js -->
<script src="src/plugins/isotope-layout/dist/isotope.pkgd.min.js"></script>
If you want to remove Isotope js editing theme.js in this function myIsotope_filter();
Example
Logo Design
Branding
Web Development
Web
Graphic Design
Graphic
Video بازاریاب
Video
Photography
Photo
Apps Development
AppsHow to use
You can use isotope with add class in data filter like this data-filter=".web" and use caption text with data-sub-html="title images"
<!-- navigation -->
<div class="button-group filters-button-group portfolio-nav text-center">
<button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5 active" data-filter="*">All</button>
<button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".web">Web</button>
<button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".branding">Branding</button>
<button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".graphic">Graphic</button>
<button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".photovid">Photograpy</button>
</div><!-- end navigation -->
<!-- Portfolio Content -->
<div id="thumbnail-images" class="grid portfolio row g-0">
<figure data-src="assets/img-min/portfolio/digital1.jpg" class="col-sm-6 col-lg-4 portfolio-item branding" data-sub-html="title images">
<img class="portfolio-image" src="assets/img-min/portfolio/digital1-small.jpg" alt="Image Description">
<figcaption class="portfolio-info text-center">
<h3 class="h6 my-1 text-light">Logo Design</h3>
<small class="d-block">Branding</small>
</figcaption>
</figure>
<figure data-src="assets/img-min/portfolio/digital2.jpg" class="col-sm-6 col-lg-4 portfolio-item photovid branding web" data-sub-html="title images">
<img class="portfolio-image" src="assets/img-min/portfolio/digital2-small.jpg" alt="Image Description">
<figcaption class="portfolio-info text-center">
<h3 class="h6 my-1 text-light">Web Development</h3>
<small class="d-block">Web</small>
</figcaption>
</figure>
<figure data-src="assets/img-min/portfolio/digital3.jpg" class="col-sm-6 col-lg-4 portfolio-item graphic" data-sub-html="title images">
<img class="portfolio-image" src="assets/img-min/portfolio/digital3-small.jpg" alt="Image Description">
<figcaption class="portfolio-info text-center">
<h3 class="h6 my-1 text-light">Graphic Design</h3>
<small class="d-block">Graphic</small>
</figcaption>
</figure>
<figure data-src="assets/img-min/portfolio/digital4.jpg" class="col-sm-6 col-lg-4 portfolio-item branding graphic" data-sub-html="title images">
<img class="portfolio-image" src="assets/img-min/portfolio/digital4-small.jpg" alt="Image Description">
<figcaption class="portfolio-info text-center">
<h3 class="h6 my-1 text-light">Video بازاریاب</h3>
<small class="d-block">Video</small>
</figcaption>
</figure>
<figure data-src="assets/img-min/portfolio/digital5.jpg" class="col-sm-6 col-lg-4 portfolio-item photovid" data-sub-html="title images">
<img class="portfolio-image" src="assets/img-min/portfolio/digital5-small.jpg" alt="Image Description">
<figcaption class="portfolio-info text-center">
<h3 class="h6 my-1 text-light">Photography</h3>
<small class="d-block">Photo</small>
</figcaption>
</figure>
<figure data-src="assets/img-min/portfolio/digital6.jpg" class="col-sm-6 col-lg-4 portfolio-item web" data-sub-html="title images">
<img class="portfolio-image" src="assets/img-min/portfolio/digital6-small.jpg" alt="Image Description">
<figcaption class="portfolio-info text-center">
<h3 class="h6 my-1 text-light">Apps Development</h3>
<small class="d-block">Apps</small>
</figcaption>
</figure>
</div>
For complete documentation read in here
Jarallax
NO dependencies JavaScript parallax scrolling.
Installation
Add script right before closing </body> tag, and initialize Jarallax
<!-- Plugin js -->
<script src="src/plugins/jarallax/dist/jarallax.min.js"></script>
<script src="src/plugins/jarallax/dist/jarallax-video.min.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
If you want to remove Jarallax js editing theme.js in this function myJarallax();
Example
1500+
Customers250+
Company520+
Running450+
CompleteHow to use
You can use jarallax with add class jarallax and jarallax-img. You also can add background video with jarallax and data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0"
<!-- Background Image Parallax -->
<div class="jarallax">
<img class="jarallax-img" src="<background_image_url_here>" alt="">
Your content here...
</div>
<!-- Background YouTube Parallax -->
<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0">
Your content here...
</div>
For complete documentation read in here
lightgallery.js
Full featured javascript lightbox gallery, No dependencies.
Installation
Add styles in <head></head>
<link rel="stylesheet" href="src/plugins/lightgallery.js/dist/css/lightgallery.min.css">
Add script right before closing </body> tag, and initialize lightgallery.js
<!-- Plugin js -->
<script src="src/plugins/lightgallery.js/dist/js/lightgallery.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-thumbnail.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-video.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
If you want to edit lightgallery.js open theme.js and edit in this function myLightgallery();
Example gallery
Logo Design
Rebranding Your Brand with new Logo
Web
Web Development Service
Graphic
Graphic Design for بازاریاب
Video
Video Sales and بازاریاب
Photography
Record Your Best Moment
Apps
Apps Development and Games
<div class="container">
<!-- Portfolio Content -->
<div class="portfolio row g-0 lightgallery-thumbnail">
<figure data-src="src/img-min/portfolio/digital1.jpg" class="col-sm-6 col-lg-4 portfolio-item branding" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/portfolio/digital1-small.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Logo Design</h4>
<small class="d-block text-light">Rebranding Your Brand with new Logo</small>
</div>
</figcaption>
</figure>
<figure data-src="src/img-min/portfolio/digital2.jpg" class="col-sm-6 col-lg-4 portfolio-item photovid branding web" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/portfolio/digital2-small.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Web</h4>
<small class="d-block text-light">Web Development Service</small>
</div>
</figcaption>
</figure>
<figure data-src="src/img-min/portfolio/digital3.jpg" class="col-sm-6 col-lg-4 portfolio-item graphic" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/portfolio/digital3-small.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Graphic</h4>
<small class="d-block text-light">Graphic Design for بازاریاب</small>
</div>
</figcaption>
</figure>
<figure data-src="src/img-min/portfolio/digital4.jpg" class="col-sm-6 col-lg-4 portfolio-item branding graphic" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/portfolio/digital4-small.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Video</h4>
<small class="d-block text-light">Video Sales and بازاریاب</small>
</div>
</figcaption>
</figure>
<figure data-src="src/img-min/portfolio/digital5.jpg" class="col-sm-6 col-lg-4 portfolio-item photovid" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/portfolio/digital5-small.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Photography</h4>
<small class="d-block text-light">Record Your Best Moment</small>
</div>
</figcaption>
</figure>
<figure data-src="src/img-min/portfolio/digital6.jpg" class="col-sm-6 col-lg-4 portfolio-item web" data-sub-html="title images">
<img class="portfolio-image-2" src="src/img-min/portfolio/digital6-small.jpg" alt="Image Description">
<figcaption class="portfolio-info-2">
<div class="portfolio-info-content-2">
<h4 class="h5 mb-3 text-white">Apps</h4>
<small class="d-block text-light">Apps Development and Games</small>
</div>
</figcaption>
</figure>
</div>
</div>
More example lightgallery.js in here Portfolio section
Popup video
<div class="d-inline-block lightgallery-thumbnail">
<a class="btn btn-light border text-primary mb-3 mb-md-0 hover-button-up" href="https://www.youtube.com/watch?v=BGPSIUZdTkc">
<!-- <i class="fas fa-play"></i> -->
<svg class="bi bi-play-fill ms-1 mb-1 me-2 rtl-180" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"></path>
</svg>Watch Video
</a>
</div>
More example lightgallery.js in here Portfolio section
For complete documentation read in here
Slider popup
<!-- slider -->
<div class="lightgallery-slider mb-7 mb-lg-3 carousel nav-inset-button nav-dark-button" data-flickity='{ "cellAlign": "left","rightToLeft": true, "wrapAround": true, "pageDots": false, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
<!-- item -->
<div class="carousel-cell slider-item text-center col-12 col-md-6 px-2" data-src="src/img-min/portfolio/digital1.jpg" data-sub-html="Screenshot 1">
<img class="img-fluid d-inline-block" src="src/img-min/portfolio/digital1.jpg">
</div>
<!-- item -->
<div class="carousel-cell slider-item text-center col-12 col-md-6 px-2" data-src="src/img-min/portfolio/digital2.jpg" data-sub-html="Screenshot 2">
<img class="img-fluid d-inline-block" src="src/img-min/portfolio/digital2.jpg">
</div>
<!-- item -->
<div class="carousel-cell slider-item text-center col-12 col-md-6 px-2" data-src="src/img-min/portfolio/digital3.jpg" data-sub-html="Screenshot 3">
<img class="img-fluid d-inline-block" src="src/img-min/portfolio/digital3.jpg">
</div>
</div><!-- end slider -->
Note: This features is required Flickity slider and can't applied in flickity draggable style, other style work fine.
For complete documentation read in here
Smooth Scroll
Smooth Scroll allows for easy implementation of smooth scrolling for Pages.
How to install ?
This very simple, just add this javascript before your </body>
<script src="src/plugins/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
If you want to remove Smooth Scroll js editing theme.js in this function mySmooth();
You can read more documentation about smooth scroll In here.
Typed Js
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set..
Installation
Add script right before closing </body> tag, and initialize Typed.js
<!-- Plugin js -->
<script src="src/plugins/typed.js/dist/typed.umd.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
If you want to remove Typed.js editing theme.js in this function myTyped();
Example
Template for
How to use
You can set text with editing this code data-options='{"strings": ["Apps", "StartUp", "Company", "Portfolio"]}' and initializes the plugin with this code data-toggle="typed"
<p>Template for <span data-toggle="typed" data-options='{"strings": ["Apps", "StartUp", "Company", "Portfolio"]}'></span></p>
For complete documentation read in here
Vanilla LazyLoad
Lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport.
Installation
Add script right before closing </body> tag, and initialize Lazyload
<!-- Plugin js -->
<script src="src/plugins/vanilla-lazyload/dist/lazyload.min.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
If you want to editing Lax js open file theme.js and edit this function myLazyload();
How to trigger lazyload
In order to make your content be loaded by LazyLoad, you must use some data- attributes instead of the actual attributes.
Example
Lazy image:
<img alt="A lazy image" class="lazy" data-src="lazy.jpg">
Lazy image with low quality placeholder:
<img alt="A lazy image" class="lazy" src="lazy-lowQuality.jpg" data-src="lazy.jpg">
background image:
<div class="lazy" data-bg="lazy.jpg"></div>
Lazy video:
<video class="lazy" controls width="620" data-src="lazy.mp4" data-poster="lazy.jpg">
<source type="video/mp4" data-src="lazy.mp4" />
<source type="video/ogg" data-src="lazy.ogg" />
<source type="video/avi" data-src="lazy.avi" />
</video>
Lazy iframe:
<iframe class="lazy" data-src="lazyFrame.html"></iframe>
For complete documentation read in here
Waves
Create SVG wave background in section quick and easily.
Installation
Wave can add in top or bottom section, use this css waves-top-center or waves-bottom-center
Example code
<figure class="waves-bottom-center text-primary z-index-n1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="currentColor" your path code .... ></path>
</svg>
</figure>
Dont forget to add position relative and z-index-1 in parent this code
<div class="section bg-white z-index-1">
<figure class="waves-bottom-center text-primary z-index-n1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="currentColor" your path code .... ></path>
</svg>
</figure>
</div>
Generate Waves
We use tools from https://getwaves.io/ for generate wave background with fast and easy
Generate and copy svg code from here and editing svg code like this
This original wave svg code from Getwaves.io
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1" d="M0,0L48,48C96,96,192,192,288,197.3C384,203,480,117,576,101.3C672,85,768,139,864,160C960,181,1056,171,1152,154.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
This code after editing
<svg xmlns="http://www.w3.org/2000/svg" class="text-primary" viewBox="0 0 1440 320">
<path fill="currentColor" fill-opacity="1" d="M0,0L48,48C96,96,192,192,288,197.3C384,203,480,117,576,101.3C672,85,768,139,864,160C960,181,1056,171,1152,154.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
Replace this code fill="#0099ff" with this class fill="currentColor" and after changes this code, add text color from Bootstrap like .text-primary or other color.
if svg images use stroke replace code with this code stroke="currentColor"
Want to add multi waves, you can use following example code
<svg xmlns="http://www.w3.org/2000/svg" class="text-primary" viewBox="0 0 1440 320">
<path class="opacity-20 translate-top-2" fill="currentColor" fill-opacity="1" d="M0,0L48,48C96,96,192,192,288,197.3C384,203,480,117,576,101.3C672,85,768,139,864,160C960,181,1056,171,1152,154.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
<path class="opacity-30 translate-top-1" fill="currentColor" fill-opacity="1" d="M0,0L48,48C96,96,192,192,288,197.3C384,203,480,117,576,101.3C672,85,768,139,864,160C960,181,1056,171,1152,154.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
<path fill="currentColor" fill-opacity="1" d="M0,0L48,48C96,96,192,192,288,197.3C384,203,480,117,576,101.3C672,85,768,139,864,160C960,181,1056,171,1152,154.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
Duplicate path code and add class="opacity-30 translate-top-1" and class="opacity-20 translate-top-2"
Opacity classes available from 1 to 90, example opacity 35 opacity-35
Translate top available from 1 to 5 translate-top-1 or for bottom translate-bottom-2
Single Waves
Your Content in here
Example Code
<div id="hero" class="section pt-5 pt-md-7 pb-7 pb-md-9 bg-white z-index-1">
<h2 class="text-center">Your Content in here</h2>
<!-- waves start -->
<figure class="waves-bottom-center z-index-n1">
<svg xmlns="http://www.w3.org/2000/svg" class="text-primary" viewBox="0 0 1440 320">
<path fill="currentColor" fill-opacity="1" d="M0,160L60,186.7C120,213,240,267,360,245.3C480,224,600,128,720,106.7C840,85,960,139,1080,149.3C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>
</figure>
</div>
Multi Waves
Your Content in here
Example Code
<div id="hero" class="section pt-5 pt-md-7 pb-7 pb-md-9 bg-white z-index-1">
<h2 class="text-center">Your Content in here</h2>
<!-- waves start -->
<figure class="waves-bottom-center z-index-n1">
<svg xmlns="http://www.w3.org/2000/svg" class="text-primary" viewBox="0 0 1440 320">
<path class="opacity-20 translate-top-2" fill="currentColor" fill-opacity="1" d="M0,160L60,186.7C120,213,240,267,360,245.3C480,224,600,128,720,106.7C840,85,960,139,1080,149.3C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
<path class="opacity-30 translate-top-1" fill="currentColor" fill-opacity="1" d="M0,160L60,186.7C120,213,240,267,360,245.3C480,224,600,128,720,106.7C840,85,960,139,1080,149.3C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
<path fill="currentColor" fill-opacity="1" d="M0,160L60,186.7C120,213,240,267,360,245.3C480,224,600,128,720,106.7C840,85,960,139,1080,149.3C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>
</figure>
</div>
Mix Waves
Your Content in here
Example Code
<div id="hero" class="section pt-5 pt-md-7 pb-7 pb-md-9 bg-white z-index-1">
<h2 class="text-center">Your Content in here</h2>
<!-- waves start -->
<figure class="waves-bottom-center z-index-n1">
<svg xmlns="http://www.w3.org/2000/svg" class="text-primary" viewBox="0 0 1440 320">
<path class="opacity-30" fill="currentColor" fill-opacity="1" d="M0,192L48,165.3C96,139,192,85,288,90.7C384,96,480,160,576,186.7C672,213,768,203,864,186.7C960,171,1056,149,1152,144C1248,139,1344,149,1392,154.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
<path fill="currentColor" fill-opacity="1" d="M0,160L60,186.7C120,213,240,267,360,245.3C480,224,600,128,720,106.7C840,85,960,139,1080,149.3C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>
</figure>
</div>
Waypoints Js
Waypoints is the easiest way to trigger a function when you scroll to an element.
Installation
Add script right before closing </body> tag, and initialize Typed.js
<!-- Plugin js -->
<script src="src/plugins/waypoints/lib/noframework.waypoints.min.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
Waypoints required if you need activate Counter Up and Progress Bar features. Waypoints available in theme.js in this function myProgressBar(); and myCounters();
You can refresh waypoints with add .way-refresh classes in your section or other area.
For complete documentation read in here