"Full animated Header + One-Page scroll effects [Free Feelings v.1]"
Bootstrap 3.3.0 Snippet by Glgcoder

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Free Feelings v.1</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aclonica"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aladin"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" data-aos="slide-right" data-aos-duration="2800" data-aos-once="true"> <div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand navbar-link" target="blank" href="https://www.instagram.com/dize_designer/"><i class="material-icons">center_focus_weak</i></a> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> </div> <div class="collapse navbar-collapse" id="navcol-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Explore <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#">First Item</a></li> <li role="presentation"><a href="#">Second Item</a></li> <li role="presentation"><a href="#">Third Item</a></li> </ul> </li> </ul> </div> </div> </nav> <header data-aos="slide-up" data-aos-duration="3000" data-aos-once="true"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1 text-bg" data-aos="fade-up" data-aos-duration="2800" data-aos-once="true"> <h1>Welcome on free feelings</h1></div> <div class="col-md-12"> <p>Animated header with scroll engine </p> </div> <div class="col-md-2 col-md-offset-5 hidden-xs"> <button class="btn btn-default btn-block scroll-link" type="button" data-id="demo">Show more</button> </div> <div class="col-xs-3 col-xs-offset-4 hidden-sm hidden-md hidden-lg"> <button class="btn btn-default scroll-link" type="button" data-id="demo">Show more</button> </div> </div> <div class="row hidden-xs no-space"> <div class="col-md-12"> <p><i class="fa fa-instagram" data-bs-hover-animate="rubberBand"></i><i class="fa fa-facebook-official" data-bs-hover-animate="rubberBand"></i><i class="fa fa-pinterest-square" data-bs-hover-animate="rubberBand"></i></p> </div> </div> </div> </header> <section id="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-center">Silence is here ... =(</h1></div> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
header { height:100vh; background-image:url('https://img2.picload.org/image/daapipii/header-2.jpg'); background-size:cover; background-position:center center; background-attachment:fixed; } @media (max-width:767px) { header { /*height:100%;*/ background-attachment:inherit; height:100vh; } } header .row { margin-top:40vh; } @media (max-width:767px) { header .row { margin-top:30vh; } } header h1 { /*background-color:rgba(255,255,255,0.36);*/ padding:10px; text-align:center; border:5px solid rgba(108,111,119,0.19); /*box-shadow:0px 0px 1px #333;*/ } header h1 { font-family:'Aladin'; font-size:71px; color:#fff; text-shadow:1px 1px 1px #333; } @media (max-width:767px) { header h1 { font-size:41px; } } header p { text-align:center; padding-top:20px; font-size:26px; font-weight:600; font-family:'Source Sans Pro'; /*letter-spacing:2px;*/ color:#f5f5f5; text-shadow:1px 1px 1px #111; padding-bottom:20px; } @media (max-width:767px) { header p { font-size:17px; } } header .row.no-space p { text-align:right; } header .row.no-space { margin-top:initial; bottom:0px; position:fixed; right:20px; } header .fa { color:#fff; text-shadow:1px 1px 1px #333; padding:7px; } .navbar-default { background-image:none; background-image:none; background-image:none; background-image:none; border-radius:0px; -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075); box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075); background-color:rgba(255,255,255,0.36); } .navbar-default .navbar-nav > li > a { color:#fff; text-shadow:1px 1px 1px #333; font-size:17px; letter-spacing:1px; } .nav > li > a:focus, .nav > li > a:hover { text-decoration:none; background-color:transparent; } .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { color:#eee; background-color:transparent; transition:all 0.5s; } .navbar-default .navbar-link { color:#fff; text-shadow:1px 1px 1px #333; } .navbar-default .navbar-link:hover { color:#eee; transition:all 0.3s; } header .btn.btn-default { background:transparent; color:#fff; text-shadow:1px 1px 1px #333; box-shadow:1px 1px 6px #333; } #demo { padding-top:45px; padding-bottom:45px; height:100vh; background-color:#f5f5f5; } @media (max-width:767px) { #demo { height:100%; } }
// Animation, to disable animation for mobile please write the *mobile* in *sr* on line 3 $(document).ready(function(){ AOS.init({ disable: 'sr' }); $('[data-bs-hover-animate]') .mouseenter( function(){ var elem = $(this); elem.addClass('animated ' + elem.attr('data-bs-hover-animate')) }) .mouseleave( function(){ var elem = $(this); elem.removeClass('animated ' + elem.attr('data-bs-hover-animate')) }); }); // Scroll effect $(document).ready(function() { // navigation click actions $('.scroll-link').on('click', function(event){ event.preventDefault(); var sectionID = $(this).attr("data-id"); scrollToID('#' + sectionID, 750); }); // scroll to top action $('.scroll-top').on('click', function(event) { event.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); // mobile nav toggle $('#nav-toggle').on('click', function (event) { event.preventDefault(); $('#main-nav').toggleClass("open"); }); }); // scroll function function scrollToID(id, speed){ var offSet = 50; var targetOffset = $(id).offset().top - offSet; var mainNav = $('#main-nav'); $('html,body').animate({scrollTop:targetOffset}, speed); if (mainNav.hasClass("open")) { mainNav.css("height", "1px").removeClass("in").addClass("collapse"); mainNav.removeClass("open"); } } if (typeof console === "undefined") { console = { log: function() { } }; }

Related: See More


Questions / Comments: