The parallax style website is pretty nice and I’ve seen a lot of people use it to show parallax effects seen in movies from Disney films or side-scrolling video games. That sense of depth and the illusion that things are moving gives you nice browsing experience. So I did the basic one with pure vanilla Javascript. I know most people are using libraries but I’ll keep it old school. So here’s few things going on. The basic on is the background stays still, the text might move up and down. The images could also move left and right as you scroll up or down. The most common one that I see is the background is still but the panels are moving so you get this effect that panels are catching your attention.
I see a lot of Websites use this function to shrink the logo or make the navigation smaller so there’s more real estate on the screen. This is a boring looking “Company Logo – Products are us” screenshot but wanted to give an example below. The important question in terms of designing and use of space is so the text is legible and the design looks good is to experiment. Another feature is “top” or up arrow button to jump to the top of the websites instead of a fixed menu. Especially trying to scroll up on those websites that have like 100 parallax scrolls aka infinite scroll- you know that finger jerk motion like you’re DJing on tablet.
That’s where fixed menu becomes popular, no matter how many times you scroll down or up, the menu will always be at the top (or bottom etc) in a fixed position but more screen means better photos and no menu. At any rate, parallax comes in handy for a lot of other purposes like 3D effect, motion, and bringing in something crucial as they are scrolling to the view. Here’s a simple, quick, boring, and kind of ugly and exaggerated example.
When you click on that link, you’ll see that the padding area of the header/logo shrinks a bit when you go scroll down. So you still get the menu but it’s not as big, thus giving your more real estate for the middle pages. I can imagine that marketing companies love the shit out of it and they probably have ads and pop parallax buttons all over the fucking place. As you see the example above and I did it intentionally, the annoying toy car and subscribe now button gets big on purpose. I even made the buy it now button a lot more obnoxious. How so? I made the buy it scroll slower so it’s kinda hanging out on the screen longer as you scroll down. It’s like that aggressive salesperson that follows you around the store but not in the sense of a stalker but as you move away farther, they back off but the closer you are, the more they won’t let you out of their sight. It’s like a shadow. You’ll see what I mean as you scroll. The buy it now is all up in your face and it’s not leaving the page so it’s not my favorite moment in life.
So anyways, another example is this (bad design) of a fish parallax. It’s pretty simple and just gives you the idea of how the animation can be used by adding classes to a div and triggering it when it reaches a X or Y (horizontal/vertical) position of the section.
You’ll see that the image of the fishes aren’t fixed or they would be scrolling up with the text. They’re kinda just chillin on the screen. As you scrolled down, the fish will do two things. Normally, they just scroll at a slower speed so it gives it that parallax effect but in this case I wanted the blue one to swim to the right and the left one to go right as you scroll so it’s doing a little more.
I also added add class function when it hits a certain part of the screen from the top. That’s where the .getBoundingClientRect() function comes in pretty handy. When the seahorse appears on the screen I add a class that makes it fade in and appear larger and gets smaller as you scroll up. here’s the basic Javascript code.
function ninjaScroll(){
var layer1 = document.getElementById('layer1');
var layer2 = document.getElementById('layer2');
var layer3 = document.getElementById('layer3');
var layer4 = document.getElementById('layer4');
var seahorse1 = document.getElementById('sh1');
var seahorse2 = document.getElementById('sh2');
var img1 = seahorse1.getBoundingClientRect();
var img2 = seahorse2.getBoundingClientRect();
layer2.style.top = -(window.pageYOffset / 7) + 'px';
layer2.style.left = (window.pageYOffset / 4) + 'px';
layer3.style.top = -(window.pageYOffset / 7) + 'px';
layer3.style.left = -(window.pageYOffset) + 'px';
if( img1.top < 600 && img1.top > 40){
seahorse1.className = 'ninja-action';
} else {
seahorse1.className = '';
}
if (img2.top < 600 && img2.top > 40){
seahorse2.className = 'ninja-action';
} else {
seahorse2.className = '';
}
}
window.addEventListener('scroll', ninjaScroll, false);
As you can see, the seahorse does some kind of action when the Y axis of the element is a certain position from the screen. I also added a banner on the bottom that just kicks it at the bottom. Of course, you can put multiple banners that parallax but if you do that you might run into a bunch of ads and crazy shit moving around all over the place. it should be simple and have a main focus area. Well Sorry this is sort of incomplete blog but for the most part it’s just to mention how awesome the “object.getBoundingClientRect();” can be used when you need to find an exact element position from the top or left side of the screen.
One of the warnings or problems that you will have to deal with is when you get onto a mobile device. I caught that error when I checked it on my phone, it doesn’t look good but it’s a quick and dirty example. The images, background-size and text had to change. Obviously if you have over 5,000 words in a paragraph or body of a website screen about 2000 pixels wide and the you keep the same font size and shrink the screen to about 480 pixels will wide…you know text is going to have to fit and it’ll create this long ass scrolling page. So thus, had to bring it down so when you scroll it will hit the same point/parameters and trigger the effects. One more thing to mention, there is this scroll into view but some people are saying it’s garbage.
Mozilla say it’s an experimental technology but its a good start. I’m guessing that JQuery will be the fast and “hot” way to get it done but until then. shine on!