"Fixed Header + Navbar + Animation Effects"
Bootstrap 3.3.0 Snippet by balakrishna

<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 ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dize Design aos-header</title> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/fixed-header.css"> <!-- you can place that css code here in a new fixed-header.css or else --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css"> <!-- thats important for animation effekcts --> <link rel="stylesheet" href="assets/css/styles.css"> <!-- if you use the same structur you didn't need to chance here anything --> </head> <body> <header> <!-- I used some style code in HTML, remove it for display Bootstrap default options --> <nav class="navbar navbar-default navbar-fixed-top" data-aos="fade-down" data-aos-duration="3000" style="background-image:url("none");background-color:rgba(229,76,124,0.521569);"> <div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand navbar-link" href="#">Dize Design | AOS-Header Beta</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="active" role="presentation"><a href="#" style="background-color:#fafafa;color:#303030;">Home </a></li> <li role="presentation"><a href="#" style="color:#fafafa;">Project </a></li> <li role="presentation"><a href="#" style="color:#fafafa;">About Us</a></li> <li role="presentation"><a href="#" style="color:#fafafa;">Contact </a></li> </ul> </div> </div> </nav> <div class="container"> <div class="row" style="margin-top:232px;"> <div class="col-md-12"> <h1 class="text-center" data-aos="fade-right" data-aos-duration="3000" style="color:#fafafa;"><strong>We Love Bootsnipp.com</strong></h1> <p class="lead text-center" data-aos="fade-left" data-aos-duration="3000" style="color:#fafafa;background-color:rgba(229,76,124,0.15);padding:21px;margin-top:38px;"><em>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</em> </p> </div> <div class="col-lg-3 col-lg-offset-3 col-md-3 col-md-offset-3 col-sm-3 col-sm-offset-3 col-xs-12" data-aos="fade-up" data-aos-duration="3000"> <center> <button class="btn btn-default btn-lg" type="button">Lorem Ipsum </button> </center> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" data-aos="fade-up" data-aos-duration="3000"> <center> <button class="btn btn-default btn-lg" type="button">Lorem Ipsum </button> </center> </div> </div> </div> </header> <script src="assets/js/jquery.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script> <script src="assets/js/bs-animation.js"></script> <!-- pleae make sure, you have the JS code in youre JS file for animation effects --> <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script> <!-- Important for animation --> </body> </html>
body { height:100%; width:100%; } header { background-image:url('http://www.dizedesign.de/snippets/headerx.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center center; background-attachment:fixed; height:1000px; } .btn.btn-default.btn-lg { letter-spacing:2px; } .btn-default { background-image:none; background-image:none; background-image:none; background-image:none; background-repeat:no-repeat; filter:none; -webkit-filter:none; filter:none; border:1px solid #fefefe; background-color:rgba(229,76,124,0.521569); color:#fefefe; } .navbar-default { border-bottom:#fefefe; } .btn-default:hover { opacity:.4; background-color:rgba(229,76,124,0.521569); color:#fefefe; border:1px solid #fefefe; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color:#fafafa; background-color:none; } .navbar-brand.navbar-link { color:#fefefe; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color:#000; background-color:#fafafa; }
$(document).ready(function(){ AOS.init({ disable: 'mobile' }); });

Related: See More


Questions / Comments: