The Parallax website, Vanilla Javascript and the .getBoundingClientRect

The parallax style website is pretty nice and I’ve seen a lot of people use it on their website to show parallax effect seen in movies from Disney or pop Video games. That sense of depth and the illusion that things are moving with you so it gives you nice internet browsing experience. So I did the basic one with pure Javascript.  I know most people are using libraries but I’ll keep it old school and shit. So here’s few things going on. The basic on is the background stays still, the text moves up and down. The images are moving left and right as you scroll up or down.  The most common one that I see is the background is moving and the objects in front of you are doing something to catch your attention.

I see a lot of Business websites use this function to shrink the logo or make the navigation smaller so there’s more real estate on the page screen.

sample_start_typical

Obviously all screen sizes have a fixed window size on a mobile phone or computer with a finite number of photos, text or ads that you can squeeze in without zooming out or click to another page.  The important question in terms of designing and the use that space so the text is legible and the design looks good is to experiment.  One of the biggest annoying features that a lot of people complain about with websites are the clicking on the “top” button to go back to the top of the websites instead of a fixed menu. or try 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’s have become popular, no matter how many times your scroll down or up, the menu will always be at the top (or bottom etc) in a fixed position.   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 an example.

http://seattleninja.com/parallax/corporate.html

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 fucking toy car and subscribe now button gets all big and shit 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 pushy ass salesman 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 go out of sight. It’s like a shadow or glue.  You’ll see what I mean as you scroll. The buy it now is all up in your fucking face and it’s not leaving the page accordingly. So anyways, another example is this fish one on the bottom. 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.

 

http://seattleninja.com/parallax/

example-parallax

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, holy crap, that looked like shit.  Its still kinda meh but I made the imperative fixes.  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 shit done but until then. shine on!

 

Share on FacebookShare on Google+Pin on PinterestShare on RedditTweet about this on TwitterShare on TumblrShare on LinkedInEmail this to someonePrint this page

Leave a Reply