"Anirudha Bhowmik trigger animation with header link"
Bootstrap 4.0.0 Snippet by anirudhabhowmik

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"> <!-- or --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script> <h3 class="revealOnScroll" data-animation="lightSpeedIn">Other animation</h3> <div class="row"> <div class="col-lg-6"> <div class="revealOnScroll" data-animation="bounceInUp" data-timeout="400"> <div class="image"> <img src="images/6.jpg"> </div> </div> </div> <div class="col-lg-6"> <div class="revealOnScroll" data-animation="rollIn" data-timeout="400"> <div class="image"> <img src="images/5.jpg"> </div> </div> </div> </div> </body>
$(function() { var $window = $(window), win_height_padded = $window.height() * 1.1, isTouch = Modernizr.touch; if (isTouch) { $('.revealOnScroll').addClass('animated'); } $window.on('scroll', revealOnScroll); function revealOnScroll() { var scrolled = $window.scrollTop(), win_height_padded = $window.height() * 1.1; // Showed... $(".revealOnScroll:not(.animated)").each(function () { var $this = $(this), offsetTop = $this.offset().top; if (scrolled + win_height_padded > offsetTop) { if ($this.data('timeout')) { window.setTimeout(function(){ $this.addClass('animated ' + $this.data('animation')); }, parseInt($this.data('timeout'),10)); } else { $this.addClass('animated ' + $this.data('animation')); } } }); // Hidden... $(".revealOnScroll.animated").each(function (index) { var $this = $(this), offsetTop = $this.offset().top; if (scrolled + win_height_padded < offsetTop) { $(this).removeClass('animated fadeInUp flipInX lightSpeedIn fadeOutRight hinge rollIn bounceInUp') } }); } revealOnScroll(); });

Related: See More

Gaia Bootstrap Template Pro
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: