HTML
<div name="top" class="cover">
<div class="background-image-fixed cover-image bg-2" style="background-image: url(https://unsplash.imgix.net/photo-1418065460487-3e41a6c84dc5?q=25&fm=jpg&s=127f3a3ccf4356b7f79594e05f6c840e);"></div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="text-inverse">Full height panels with a subtle parallax effect.</h1>
<p class="text-inverse">Click the button below to continue.
<br>
<br>
<a class="btn btn-lg btn-primary" href="#about">Click me</a>
</div>
</div>
</div>
</div>
<div class="cover" name="about">
<div class="background-image-fixed cover-image bg-2" style="background-image: url(https://unsplash.imgix.net/photo-1418479631014-8cbf89db3431?w=1024&q=50&fm=jpg&s=478a9a2196033db7c0bf3c8ba3707f4d);"></div>
<div class="container">
<div class="row">
<div class="col-md-6 text-inverse">
<p>I've set the cover css to be a min-height of 100vh. if the content of the page it will adapt the the height of the content.</p>
<p class="text-center"><a class="btn btn-lg btn-primary" href="#three">Click me</a></p>
</div>
<div class="col-md-6 text-inverse">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a neque ipsum. Donec placerat eros magna, vel eleifend libero scelerisque in. Sed rutrum nibh quis bibendum pulvinar. In hac habitasse platea dictumst. Cras ultrices sapien eget consectetur condimentum. Phasellus mi arcu, venenatis et nulla tempor, dapibus pharetra felis. Phasellus euismod condimentum tristique. Fusce sed luctus ipsum, varius sollicitudin orci. Curabitur rutrum et turpis non consectetur. Nullam imperdiet eros eu mi pellentesque, quis aliquet massa egestas. Duis bibendum porta quam. Nunc elit dolor, mollis a maximus a, tincidunt et metus. Integer ac ornare tortor. Cras metus lacus, aliquet commodo pellentesque nec, porta in odio.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque id laoreet nisl. Aliquam nec justo ac libero egestas euismod eu volutpat risus. Nunc semper blandit eros eget tincidunt. In molestie maximus mi porttitor mattis. Ut augue tellus, vehicula id nibh quis, rhoncus congue dolor. Aliquam eleifend felis quis varius sodales. Fusce maximus enim auctor scelerisque faucibus. Nullam porttitor malesuada sem dapibus molestie. Sed semper suscipit magna et vulputate. Aliquam ultricies mauris vel viverra faucibus. Proin mollis, mauris vitae blandit lacinia, purus lacus ultricies magna, lobortis imperdiet massa neque id tellus. Nunc ipsum sapien, porta imperdiet magna id, malesuada tincidunt arcu. Fusce ullamcorper accumsan ex ac rutrum. Praesent tellus nibh, molestie ut nibh ut, eleifend tincidunt nunc.</p>
<p>Vestibulum consectetur, augue vitae cursus egestas, velit nibh pretium dolor, vel aliquet velit nulla non elit. Integer a dignissim ante. Etiam scelerisque luctus neque vestibulum semper. Phasellus sed suscipit mi. Vestibulum eu luctus risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sit amet justo fermentum, maximus metus eget, vehicula turpis.</p>
<p>Quisque tempor, est vitae sagittis mattis, metus justo vestibulum turpis, ut cursus nunc metus a lacus. Ut eleifend vel mi id porta. Donec at rutrum nunc, accumsan venenatis lacus. Donec suscipit dolor sagittis mauris convallis, pellentesque ornare arcu hendrerit. Nunc ut mi sollicitudin, molestie mi eget, condimentum nisl. Nunc porta risus eget diam cursus, ac aliquam tellus tempor. Quisque vestibulum, lectus in convallis faucibus, mauris ex bibendum neque, gravida tincidunt leo erat quis mauris. Nulla non mi at dui ullamcorper commodo. Sed risus ipsum, varius quis mattis non, vulputate non felis.</p>
<p>Vestibulum diam eros, convallis vel enim vel, ultricies dictum ex. Donec hendrerit risus arcu, eget lobortis massa convallis in. Proin quis venenatis erat. Mauris elementum tellus vitae magna gravida lobortis. Curabitur feugiat ultricies lobortis. Curabitur rutrum tristique commodo. In vulputate quis turpis at imperdiet. Nullam turpis tellus, porttitor nec risus tristique, aliquam dignissim sapien.</p>
</div>
</div>
</div>
</div>
<div class="cover" name="three">
<div class="background-image-fixed cover-image bg-2" style="background-image: url(https://ununsplash.imgix.net/photo-1422479516648-9b1f0b6e8da8?w=1024&q=50&fm=jpg&s=c5f2b3df2a4c71532b3b354b8766503c);"></div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="text-inverse">I'm aware this is not original</h1>
<p class="text-inverse">I just like to see how things are done, and maybe add a personal touch to them.</p>
<br>
<br>
<a class="btn btn-lg btn-primary" href="#four">Click me</a>
</div>
</div>
</div>
</div>
<div class="cover" name="four">
<div class="background-image-fixed cover-image bg-2" style="background-image: url(https://ununsplash.imgix.net/reserve/yzu1CGEoRQ6IE7yj8rc9_IMG_8812%20copy.jpg?w=1024&q=50&fm=jpg&s=8dbbf6d023b5f6cdbef2f585074feaae);"></div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="text-inverse">Thank you for your time.</h1>
<p class="text-inverse">This is the last panel.</p>
<br>
<br>
<a class="btn btn-lg btn-primary" href="#top">Back to Top</a>
</div>
</div>
</div>
</div>
<div class="scrolly-top"><a href="#top"><i class="fa fa-arrow-up" aria-hidden="true"></i></a></div>
JAVASCRIPT
$( document ).ready(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
/**
* Author: Heather Corey
* jQuery Simple Parallax Plugin
*
*/
(function($) {
$.fn.parallax = function(options) {
var windowHeight = $(window).height();
// Establish default settings
var settings = $.extend({
speed : 0.15
}, options);
// Iterate over each object in collection
return this.each( function() {
// Save a reference to the element
var $this = $(this);
// Set up Scroll Handler
$(document).scroll(function(){
var scrollTop = $(window).scrollTop();
var offset = $this.offset().top;
var height = $this.outerHeight();
// Check if above or below viewport
if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) {
return;
}
var yBgPosition = Math.round((offset - scrollTop) * settings.speed);
// Apply the Y Background Position to Set the Parallax Effect
$this.css('background-position', 'center ' + yBgPosition + 'px');
});
});
};
}(jQuery));
$('.bg-1').parallax({
speed : -0.2
});
$('.bg-2').parallax({
speed : 0.125
});
});
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 40) {
$('.scrolly-top').fadeIn();
} else {
$('.scrolly-top').fadeOut();
}
});
