In this article I'll explain what a Parallax is? What does it mean? How to create one from scratch? There're so many JS libraries out there that I used to the effect in action but I never thought of getting into the basics of its What & How. Trust me, it's that simple. Let's move ahead and explore what's in there. This article is useful for all Beginners in Web Design & Development.
What is Parallax?
Definition: The effect whereby the position or direction of an object appears to differ when viewed from different positions.
Well, that's a bit tough to understand what exactly a Parallax mean. Putting it simple, Imagine you're in a forest. You know how when you move sideways and look at the trees, the ones at the distance seem to move at a different rate (slower) than the ones near you?
Another easy way to understand this is to hold your index finger about 6 inches from your face. Look at it with just your right eye, then just your left eye, and notice how its position changes with respect to the
Or, when you play old side-scrolling video games, the backgrounds will have three layers that move at different speeds to make it look like you're moving?
That moving of different layers at different speeds effect is parallax. I hope now you understand what does that heavy word mean? Okay, let's move now and see what composes a parallax.
What is takes to create a Parallax?
Demo: How we do it?
I will take two layers for demo purposes (you may include as many as you want as I explained earlier).
Here you can see I've two divs having class "background" for background layer and "contents" for the layer on top.
I'm going to include more contents to "contents" div so that we can have the space to scroll. Below is the CSS which does all the magic of creating the layers from the two Divs above:
So, to reveal the secret behind, we fix the layers in background using CSS and later increase/decrease the at a desired rate on scroll. That's all a parallax has to do with it.
Here I've a function named "parallax" which updates the "top" CSS property for fixed layer which is in background as per the scrolling has been done. Later I bind this function to "onscroll" event of window object so that it does the magic.
I've used lorempixem.com for sample images that you see appearing in background.
Here's the complete code:
background: url('http://lorempixum.com/1024/768') repeat;
height: 300%; /* adjust the height according to the length of contents */
var scrolled = $(window).scrollTop();
I always keep trying latest applications of my interest in market from internet and often came across this scary word and for many softwares that I downloaded without knowing whether it’s a fully working or pre-release or anything else, had this title as “Nightly Build” version of X software. Probably I was frightened of any ghost thinking of that it may get’s build at mid night or only at nights and not during day time so I just kept ignoring the term and using the softwares. But so far in the journey, I got the courage (lol.. after so long time) to explore what really it means. Hence my this post is for the “Geeks” like me who never try to search for the such keywords just avoiding any unfortunate consequence.
What is a “Nightly Build” version of any software?
Nightly builds are automated Alpha builds from the latest development code in Testing. By nature, these builds are experimental, unstable, untested, hence – may contain Bugs and Errors and may be harmful to your machine. It’s the build before release of any Beta version or a Release Candidate (RC).
Nightly Build = An automatic build from a codebase
In software development, a neutral build is a build that reflects the current state of the source code checked into the source code version control system by the developers, but without any developer-specific changes.
A nightly build is a neutral build that takes place automatically. These typically take place when no one is likely to be working in the office so that there are no changes to the source code during the build.
Obviously, it may or may not be usable, depending on what stage of development it’s at, what the release strategy for that project is, etc. What you are testing is a snapshot of unfinished software at one moment in time.