" Animated Logo Resize on Scroll "
Bootstrap 4.1.1 Snippet by divyalahad

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>untitled document</title> <link rel="stylesheet" href="screen.css" media="screen"> <style media="screen"> html, body { height: 100%; margin: 0 0.5em; } body { height: 150%; /* this is only for scroll testing */ background-color: #f0f0f0; } #header { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; border-bottom: 0.062em solid #fff; background-color: #203989; } #header img { display: block; height: auto; } .grow { padding: 1.8745em 0; transition: 0.5s ease-in-out; } .grow img { width: 25.75em; transition: 0.5s ease-in-out; } .shrink { padding: 0; transition: 0.5s ease-in-out ; } .shrink img { width: 9.375em; transition: 0.5s ease-in-out; } </style> </head> <body> <div id="header" class="grow"> <img src="https://www.indior.tours/images/indior_transperent%20cropped.ae58292c.png" height="10px" alt="logo"> </div> <script> (function() { 'use strict'; var he = document.getElementById('header'); var startShrink = 50; window.addEventListener('scroll', function() { if( window.pageYOffset > startShrink ) { he.classList.remove( 'grow' ); he.classList.add( 'shrink' ); } else { he.classList.remove( 'shrink' ); he.classList.add( 'grow' ); } },false); }()); </script> </body> </html>

Questions / Comments: