Bootstrap Parallax Template
LIVE PREVIEW
We are using Bootstrap 3.7 for this template. Feel free to use the latest version if you like.
What's included?
- Fixed top navbar,
- Data-Spy works on scroll or click,
- Smooth scrolling,
- Responsive Parallax headings with text shadows.
- Panels, buttons & HTML5 form,
- Placeholder images are hosted on Lorempixel.com. These are for demo purposes only. For best results, change all images and backgrounds to assets hosted on your own server.
HTML Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Parallax Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--***********************************
***Template Courtesy of Nancy O'Shea***
******Alt-Web Design & Publishing******
***********https://alt-web.com**********
************November 2015, updated September 2017***********
************************************-->
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--INSERT CSS CODE HERE OR IN AN EXTERNAL CSS FILE-->
</head>
<body>
<body data-spy="scroll" data-target=".navbar" data-offset="55">
<!--BEGIN NAVBAR-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="/TUTORIALS/?id=bootstrap_parallax_template">
Parallax Demo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#content1"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#content2">Menu 2</a></li>
<li><a href="#content3">Menu 3</a></li>
<li><a href="#content4">Menu 4</a></li>
</ul>
</div>
</div>
</nav>
<!--/navbar-->
<!--parallax 1-->
<section class="bg-1 text-center" id="content1">
<h1>Bootstrap Parallax</h1>
<p class="lead">Add Some Motion</p>
<p><a class="btn btn-primary btn-lg" href="/TUTORIALS/?id=bootstrap_parallax_template">BACK TO TUTORIAL</a></p>
</section>
<!--/parallax 1-->
<div class="container">
<div class="row">
<div class="divider"></div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Heading 3</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
</div>
<div class="panel-footer text-right">
<a href="#" class="btn btn-info">More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Heading 3</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
</div>
<div class="panel-footer text-right">
<a href="#" class="btn btn-info">More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Heading 3</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
</div>
<div class="panel-footer text-right">
<a href="#" class="btn btn-info">More</a>
</div>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
<div class="divider"></div>
<!--parallax 2-->
<section class="bg-2" id="content2">
<div class="col-sm-10 col-sm-offset-1 text-center">
<h1>Keep Going</h1>
<p class="lead">Lorem ipsum dolor</p>
<p><a class="btn btn-default btn-lg" href="/TUTORIALS/?id=bootstrap_parallax_template">BACK TO TUTORIAL</a></p>
</div>
</section>
<!--/parallax 2-->
<div class="divider"></div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center">Heading 3</h3>
</div>
<div class="panel-body">
<img class="img-thumbnail" src="https://placeimg.com/400/300/people/4" alt="...">
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center">Heading 3</h3>
</div>
<div class="panel-body">
<img class="img-thumbnail" src="https://placeimg.com/400/300/people/5" alt="...">
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center">Heading 3</h3>
</div>
<div class="panel-body">
<img class="img-thumbnail" src="https://placeimg.com/400/300/people/3" alt="...">
</div>
</div>
</div>
</div>
</div>
<!--/container-->
<div class="divider"></div>
<!--parallax 3 -->
<section class="bg-3 text-center" id="content3">
<h1>Keep Going</h1>
<p class="lead">Lorem ipsum dolor...</p>
<p><a class="btn btn-danger btn-lg" href="/TUTORIALS/?id=bootstrap_parallax_template">BACK TO TUTORIAL</a></p>
</section>
<!--/parallax 3-->
<div class="divider"></div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Heading 3</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
<ul>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Heading 3</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
<ul>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Form</h3>
</div>
<div class="panel-body">
<!--begin HTML5 Form, you will need to provide your own form processing script-->
<form class="form-horizontal" role="form" method="post" action=" ">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last" required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email: </label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" placeholder="you@domain.com" required>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-3 control-label">Message:</label>
<div class="col-sm-9">
<textarea class="form-control" row="4" name="message" placeholder="Comments" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6 col-sm-offset-3">
<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>
</div>
</div>
<!--end Form--></form>
</div>
</div>
</div>
</div>
</div>
<!--/container-->
<div class="divider"></div>
<!--parallax 4 -->
<section class="bg-4 text-center" id="content4">
<h1>Bootstrap Parallax</h1>
<p class="lead">Lorem ipsum dolor...</p>
<p><a class="btn btn-info btn-lg" href="/TUTORIALS/?id=bootstrap_parallax_template">BACK TO TUTORIAL</a></p>
</section>
<!--/parallax 4-->
<footer>
<div class="container">
<p class="text-muted">This Bootstrap Example courtesy <a href="https://alt-web.com">Alt-Web.com</a><br>
Placeholder images from <a href="https://placeimg.com/">placeimg.com</a></p>
</div>
</footer>
<!--INSERT JAVASCRIPTS HERE-->
</body>
</html>CSS goes on line 19 or in your custom stylesheet, below Bootstrap CSS.
<style>
body {
padding-top:50px;
color:#000;
}
h1 {
font-size: 67px;
font-size:6vw;
text-shadow: 1px 2px 3px red, -2px 3px 1px #000}
/**backgrounds**/
.bg-1, .bg-2, .bg-3, .bg-4 {
background-color:#000;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment:fixed;
}
/**These placholder images should be replaced with your own images**/
.bg-1 {background-image: url(http://placeimg.com/900/700/nature);}
.bg-2 {background-image: url(http://placeimg.com/900/700/people);}
.bg-3 {background-image: url(http://placeimg.com/900/700/tech);}
.bg-4 {background-image: url(http://placeimg.com/900/700/arch);}
.divider { height: 50px; }
section {
height: 425px;
padding-top: 50px;
padding-bottom: 50px;
overflow: auto;
color:#FFF;
}
footer {
background-color:rgba(0,0,0,0.9);
padding-top: 20px;
padding-bottom: 20px;
}
footer a { color: #efefef; }
</style>JavaScript goes on line 251 above your closing </body> tag.
<!--jQuery-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">
</script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
<!--Parallax Plugin-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-parallax/1.1.3/jquery-parallax-min.js"></script>
<script>
//active class on nav
$("nav li").on("click", function() {
$("nav li").removeClass("active");
$(this).addClass("active");
});
//smooth scrolling
$("nav ul li a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
// animate
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 700, function(){
// when done, add hash to url
// (default click behavior)
window.location.hash = hash;
});
});
</script>That's all there is to it. Enjoy your Bootstrap Parallax Template.
