Bootstrap snippet: Responsive Parallax Navbar

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: navbar,responsive



<!-- Fixed navbar --> <div class="navbar navbar-inverse navbar-fixed-top navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> </button> </div> <div class="container bootstrap snippet"> <div class="navbar-header"> <div class="small-logo-container"> <a class="small-logo" href="#">↥Small Logo</a> </div> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Active</a> </li> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> </ul> </div> <!--/.navbar-collapse --> </div> </div> <div class="container big-logo-row"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-xs-12 big-logo-container"> <h1 class="big-logo">↧Big Logo</h1> </div> <!--/.col-xs-12 --> </div> <!--/.row --> </div> <!--/.container --> </div> <!--/.container --> <div class="container bootstrap snippet"> <div class="row"> <div class="col-lg-5 col-md-6 col-sm-8"> <h2>Lorem ipsum</h2> <p>Dolor sit amet, consectetur adipisicing elit. Id maxime repellat repellendus porro voluptas laudantium similique eveniet quis perferendis beatae commodi sunt ullam provident dolorum doloribus esse accusamus dolores. Corrupti.</p> <p>Consectetur incidunt voluptatibus ipsa nisi esse eos deleniti repudiandae at quo sit praesentium nemo optio perspiciatis sequi quaerat voluptates minus reprehenderit doloremque accusamus et quisquam nesciunt sunt consequatur explicabo excepturi!</p> <p>Sequi facilis ea dolor asperiores quibusdam eveniet optio corporis et accusantium voluptatem architecto quis iste recusandae molestias dolorem soluta ex blanditiis illo impedit laborum iusto? Iure sapiente eos molestiae est?</p> <p>Numquam delectus recusandae nesciunt rem itaque harum corporis maxime hic iste molestias adipisci excepturi ullam libero necessitatibus cum eum modi minus obcaecati est nemo quia velit earum perferendis consectetur porro?</p> <p>Accusamus dicta consequatur quos ipsum rerum tempora assumenda ex excepturi itaque soluta magnam debitis voluptatibus neque eos porro. Neque tempora ea beatae delectus facere quas voluptas accusamus maxime enim consequuntur.</p> <p>Saepe obcaecati facilis dolore numquam nam quod laudantium. Rerum esse voluptas eum aut porro beatae adipisci exercitationem ab voluptatum corporis quas placeat sapiente nisi ut officia eaque debitis. Corrupti eveniet!</p> <p>Eius natus numquam tempore alias ipsam commodi aut similique corporis beatae velit maxime obcaecati voluptatibus cum repudiandae minus inventore doloremque optio saepe nihil eum reprehenderit quas consequuntur perspiciatis quo quam.</p> <p>Ea perspiciatis incidunt unde ipsam cupiditate necessitatibus magnam quod odit. Beatae adipisci non praesentium tenetur dolores fugit repellat consequuntur unde aperiam eligendi ipsa doloribus corporis officiis ipsam quod numquam assumenda!</p> <p>Ullam ut ex cum corporis numquam quia hic aut nisi itaque laboriosam eaque earum commodi nulla magni voluptate reiciendis laborum esse odit blanditiis aperiam veniam eos velit similique eveniet ad.</p> <p>Esse veritatis inventore explicabo hic consequuntur ex autem praesentium quaerat blanditiis illo deleniti dolorum porro tenetur. Repellat sed repellendus natus cum molestias numquam vitae vel eum voluptatem praesentium tempora quae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nostrum consequatur odit eius blanditiis sit mollitia ut porro cumque nam repudiandae accusantium nisi excepturi corporis incidunt inventore ipsam? Officiis eum!</p> <p>Nostrum minus dicta quod totam autem ipsum illo velit labore obcaecati est ducimus ullam sit iusto ea pariatur sint nulla perferendis modi dolorum cumque non laboriosam ratione maiores possimus numquam!</p> <p>Deserunt ex dolor atque sapiente suscipit aspernatur et iste necessitatibus enim magni blanditiis quaerat rerum perspiciatis expedita magnam nihil neque natus quos quidem veritatis eligendi dolorem itaque laboriosam beatae dolores!</p> <p>Nostrum tenetur rem cum tempora sapiente at possimus assumenda ex quos illum facilis quibusdam facere voluptatum. Necessitatibus tempore animi earum inventore quaerat sit velit totam rem nulla consequuntur dolorem architecto!</p> <p>Illum doloremque ipsa magni fugiat explicabo nam officiis expedita architecto voluptatem beatae deserunt optio iusto nostrum facere voluptatum. Tempora dolore quasi vero aut voluptatem eaque nobis iusto enim dignissimos molestias!</p> </div> <!--/.col-xs-12 --> </div> <!--/.row --> </div> <!--/.container -->
/* ********************************* Some Style Overrides on Bootstrap ********************************** */ .navbar-inverse { background: rgba(62,195,246,0); border-bottom: none; } .navbar-inverse .navbar-toggle { border: 1px solid #333; border-color: rgba(255,255,255,0.7); } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: transparent; @media (max-width: 767px) { background: rgba(255,255,255,0.75); } } .navbar-inverse .navbar-nav > li > a { color: black; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #22F; } ul.nav { } /* ********************************* Toolbar Logo ********************************** */ .small-logo-container { padding-top: 50px; height: 50px; overflow: hidden; } .small-logo { color: white; font-size: 2.5em; padding-bottom: 2px; } /* ********************************* Big Logo ********************************** */ .big-logo-row { background: gold; .big-logo-container { padding-top: 100px; } h1 { font-size: 8em; margin:0; padding:0 0 15px 0; @media (min-width: 400px) { font-size: 4.5em; } @media (min-width: 440px) { font-size: 5.5em; } @media (min-width: 500px) { font-size: 6.5em; } @media (min-width: 630px) { font-size: 7.5em; } @media (min-width: 768px) { font-size: 9em; padding-bottom: 15px * 2; } @media (min-width: 1200px) { font-size: 12em; } } }
$(window).scroll(function() { var navbarColor = "62,195,246";//color attr for rgba var smallLogoHeight = $('.small-logo').height(); var bigLogoHeight = $('.big-logo').height(); var navbarHeight = $('.navbar').height(); var smallLogoEndPos = 0; var smallSpeed = (smallLogoHeight / bigLogoHeight); var ySmall = ($(window).scrollTop() * smallSpeed); var smallPadding = navbarHeight - ySmall; if (smallPadding > navbarHeight) { smallPadding = navbarHeight; } if (smallPadding < smallLogoEndPos) { smallPadding = smallLogoEndPos; } if (smallPadding < 0) { smallPadding = 0; } $('.small-logo-container ').css({ "padding-top": smallPadding}); var navOpacity = ySmall / smallLogoHeight; if (navOpacity > 1) { navOpacity = 1; } if (navOpacity < 0 ) { navOpacity = 0; } var navBackColor = 'rgba(' + navbarColor + ',' + navOpacity + ')'; $('.navbar').css({"background-color": navBackColor}); var shadowOpacity = navOpacity * 0.4; if ( ySmall > 1) { $('.navbar').css({"box-shadow": "0 2px 3px rgba(0,0,0," + shadowOpacity + ")"}); } else { $('.navbar').css({"box-shadow": "none"}); } });
Dey-Dey

Responsive Parallax Navbar

Dey-Dey
  May 12th 2014, 21:04
2.3K Views