Back

Background transitions with jQuery Scrollify

Soak Blog - Background transitions with jQuery Scrollify - Mac Mouse and Keyboard

Scrollify is an excellent jQuery plugin created by London-based developer, Luke Haas. It allows for full page scrolling that smoothly snaps to sections. You can see a working example on the Scrollify page.

For a recent project, we needed a configurable scrolling solution that, on mousewheel scroll or arrow key press, would snap a number of infographic slides to the full height of the iframe.

Scrollify is easy to implement, only needing you to declare a group of sections, articles, divs etc to scroll through.
<script>
$(function() {
$.scrollify({
section : “section”,
});
});
</script>

Of course this can be customised with features such as scroll speed, easing and removing scrollbars. The documentation offers further options and methods. However something not mentioned is how best to transition between different background images from slide to slide. Our client required this feature, using one background image for the first two slides and a second background image for the rest.

Our solution to this was to make use of the before and after functions. As you may have guessed, the before option allows you to run any function as soon as you choose to scroll to the next slide; after performs the function once the new slide has scrolled into place. For the background image to transition smoothly to the next whilst the infographic is scrolling to the following slide, we needed before. The two background images were given their own class with a fixed position so they didn’t move on scroll. The .intro-bg class was added to the body with a background transition of 1 second which gave a subtle fade effect.

.bg-intro {
background: url(‘../images/slideintro-bg.png’) no-repeat fixed 50% 0 / cover;
}

.bg-main {
background: url(‘../images/slidemain-bg.png’) no-repeat fixed 50% 0 / cover;
}

The function itself tells Scrollify to add the class of .bg-main only after the first 2 slides, otherwise remove the class, leaving the .bg-intro to show the intro background. Simple.

$.scrollify({
section : “#container > div”,
scrollbars : false,
before: function(index){
if(index >= 2) {
$(‘body’).addClass(‘bg-main’);
} else {
$(‘body’).removeClass(‘bg-main’);
}
}
});

With fully responsive touch features and at only 5kb minified, Scrollify was the ideal solution for our project.

Download
https://github.com/lukehaas/Scrollify