In today's tutorial we're going to use JavaScript to create a simple, flexible, parallax effect where a logo seemingly changes colors with the background it's on when the user scrolls. The Slip Scroll effect in actionWe'll be creating a “default” element which holds true to its placement (position: fixed), and a bunch of “moveable” elements whose position is dependent on that “default” element. We’ll use JavaScript to make this happen every time the user scrolls. Note: to cover all bases I've provided the explanation in video and written form.
We'll start by creating a couple of containing elements. Let’s make one of their backgrounds dark and one light so we can have a contrasting image contained in them. Let’s also go ahead and make our first image the "default" image by giving it a class of default, whilst the other images will get the class of moveable.
1
2
3
4
5
6
7
<divclass="container dark">
<imgsrc="img/acme-light.svg"class="default">
</div>
<divclass="container light">
<imgsrc="img/acme-dark.svg"class="moveable">
</div>
Base Styles
Now let’s make sure our images don’t end up scrolling outside of their containers by setting overflow: hidden. We’ll also go ahead and say these containers have relative position, so the absolutely positioned elements will align to these containers instead of directly to the fixed element when we write our JavaScript. For the sake of scrollability, let’s give these containers a min-height of around 400px. And to hold our logos away from the edges, let's give them some padding of 1em.
1
2
3
4
5
6
.container {
overflow: hidden;
position: relative;
min-height: 400px;
padding: 1em;
}
Each container needs some contrasty color so:
1
2
3
4
5
6
7
.dark {
background: #333;
}
.light {
background: #fff;
}
And finally, as promised, let's set our default and moveable CSS so one is stuck with the page as the user scrolls, and the other is moving along with it without bumping into other elements:
1
2
3
4
5
6
7
.default{
position: fixed;
}
.moveable {
position: absolute;
}
That should take care of the markup and styling. If you view the page, you should see the default logo scrolling down and hiding behind the other containers, whilst all the moveable logos should appear as normal elements in the top-left of their respective containers.
Introducing JavaScript
Now for the fun part, making it work with JavaScript. First we'll load jQuery and our custom script at the bottom of our index.html:
Create and open a file named js/slipScroll.js. Within that file, the first thing we’ll do is create a function called setLogo and throw this function into a jQuery scroll event so that every time the user scrolls a pixel, this event fires. We'll also want to make sure we fire this event when the user first arrives at the page (before they scroll):
1
2
3
4
5
6
7
8
9
varsetLogo = function() {
};
$(document).scroll(function() {
setLogo();
});
setLogo();
Getting Things Working
Now for the magic. Let’s say that every single instance of .moveable on the page should change its CSS top position to however far the default image is from the top of the page, minus however far this .moveable element's container is from the top of the page.
01
02
03
04
05
06
07
08
09
10
varsetLogo = function() {
$('.moveable').each(function() {
$(this).css('top',
$('.default').offset().top -
$(this).closest('.container').offset().top
);
});
};
Refresh your page, and voila! You’ve just created a pseudo-parallax scrolling effect from scratch in just a few lines of code.
Conclusion
I encourage you to tinker around with this solution. Try playing with the JavaScript function itself to see what kind of weird offsets you get if you add or remove a few pixels. Try using different elements (navigation anyone?) instead of just images for your scrollable content
No comments:
Post a Comment