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();
Well, if you’re a designer, web developer, you must be aware of rem units. In this post we will go through the basics and learn how to use it. First, lets go through the little basics for those who are not aware of the “rem” unit.
As per the specs, we have two kind of Distance Units or the Length type:
- First one is Absolute lengths, i.e.: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units
- Second one is Relative lengths having two sub categories:
- Font-Relative lengths: “em”,”ex”,”ch”,”rem” units &
- Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
For example, observe this CSS rule:
It specifies that every element in the body will have a font-size of 50 pixels and Div element will have a font-size of 0.5em, means half of its parent. So, let’s see how it affects your styling in below example:
You can see here, that every inside div is inheriting the font-size length from its parent div. Here pixels (“px”) is an absolute length unit whereas “em” is relative. To mitigate this problem – Rem unit has been introduced.
The “rem” unit is for “root em”. What “em” unit does is, it inherits the length from its immediate parent element and then scale it on the given ratio. This one is not relative to its parent but to the root.
If you just replace the em to rem in sample CSS rule above and see the change in Output:
Scaling document elements
You can use rem to scale some elements in a document while leaving others in place. It provides a way to specify lengths as fractions of the root element’s font size. In practical terms, this almost always means the font size of the element. The most obvious use for rem is replacing em to protect inner element font sizes from being changed by outer elements, thus avoiding the classic nested em scaling problem. Let’s look at how rem works and how it differs from the em unit. An em value is calculated against the font-size of a current element, so boxessized with it will consequently scale as font sizes are adjusted by the element or its ancestors. Meanwhile, rem is defined as the font-size of the root element. So, all references to rem will return the same value, regardless of ancestor font size. In effect, rem is a document-wide CSS variable.
Q. Why should you bother?
A. Well, let’s say you want to enlarge everything on your site as soon as it exceeds a certain width limit. With everything rem you just set the font-size of the tag to 120% and, magic, everything is 20% bigger. But what to do with everything px in this case? Good luck with that! Make a media query and overwrite every single element that is supposed to be larger? No way!
Also, it’s a much better option than “zoom”ing as zooming isn’t as easy as it looks. By increasing the single “root em” font-size, all our elastic pixels increase!
Hope you find this post useful. Thanks for reading 🙂