Basics of creating Parallax Effect using HTML CSS and JavaScript

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
background.

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?

Practically a parallax is composed of more than one layer in parallel, moving along on scroll at different speeds, giving us the feel that they're at different distance. You're free to add as many layers to create a parallax but more than one. CSS is there to do all the layers for you and JavaScript will update the CSS values every time you scroll through the contents. That's all it takes to create it. Let's see now how we do it with a demo.

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.

Finally, the JavaScript which make the effect come into picture:
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:
**************************************************************************************************************************



Parallax Sample


.background{
background: url('https://lorempixum.com/1024/768') repeat;
position: fixed;
width: 100%;
height: 300%; /* adjust the height according to the length of contents */
top:0;
left:0;
z-index: -1;
}
.contents{
color: #fff;
font-family: arial;
width: 600px;
margin: auto;
line-height: 20px;
font-size: 16px;
}



function parallax(){
var scrolled = $(window).scrollTop();
$('.background').css('top',-(scrolled*0.2)+'px');
}
$(window).scroll(function(){
parallax();
});

“rem” units in css

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.5emmeans 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:
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 🙂

New Inheritance Features in CSS

let’s explore the new inheritance features that you may not be aware of and see where these features fit-in well to use and how to use them effectively.

Inheritance in CSS is actually very straightforward. Imagine you had to specify the font-size or font-family of every element, instead of simply adding it to the body element? That would cumbersome, which is why inheritance is so helpful. You specify a font-size for all common and obvious elements in a single rule (body{}) and it’s applied to all of them. 

Well, that’s not today’s agenda. I’m going to talk about the keywords used for inheritance in CSS: “inherit /initial & unset”.

A little basics… the word “Cascade” in CSS means, the final style is calculated based on the last value assigned for a particular property of a selector. For example,

In the following CSS snippet, the value of property “color” for selector “P” will have the value “green” being the last value assigned, not “red”.


How inheritance works in CSS
In CSS, Inheritance is a way of propagating property values from parent elements to their children. It should not be confused with Object Oriented Programming Inheritance as it’s quite different than that.

The CSS specification determines whether each property is inherited by default or not. Not all properties are inherited, but you can force ones to be by using the inherit value.

The final value of a property is the result of a four-step calculation: the value is determined through specification (the “specified value”), then resolved into a value that is used for inheritance (the “computed value”), then converted into an absolute value if necessary (the “used value”), and finally transformed according to the limitations of the local environment (the “actual value”).

A little In-Depth of the terms

Specified Value: The user agent determines whether the value of the property comes from a style sheet, is inherited or should take its initial value.

Computed Value: The specified value is resolved to a computed value and exists even when a property doesn’t apply. The document doesn’t have to be laid out for the computed value to be determined.

Used Value: The used value takes the computed value and resolves any dependencies that can only be calculated after the document has been laid out (like percentages).

Actual Value: This is the value used for the final rendering, after any approximations have been applied (for example, converting a decimal to an integer).

If you look at any CSS property’s specification, you’ll see that it defines it’s initial (or default) value, the elements it applies to, its inheritance status and its computed value (among others). For example, the background-colorspecification states the following:


For example
Observe the code snippet below:


Here we have two div elements, one is container (parent) and other is child.

Both the pictures have some height and width mentioned. In the first picture, with “background-color” property omitted, you can see there’s no color available for child div. It inherits no background property but uses its initial/default value i.e. “transparent”.

Whereas, in the second picture you can see there is a green background color if the property is applied.

When an element inherits a value from its parent, it inherits its computed value. Because the computed value exists even if it isn’t specified in the style sheet, a property can be inherited even then: the initial value will be used.


property: inherit;
The inherit keyword means “use whatever value is assigned to my parent”. If no value was explicitly defined on the parent element, the browser works up the DOM tree until the property is found. Ultimately, it ends at the browser default, e.g.


Please note, it’s rarely necessary to use inherit. Many of the more useful properties automatically cascade down, e.g. fonts, font sizes, colors, etc. but it may not all of them.

inherit is safe to use and It’s supported from IE8 and plus but your design is unlikely to break without it.

property: initial;
The new CSS3 keyword! initial sets a property back to its starting value – the default defined by the browser, e.g.


Is it useful? Well, potentially, and after all-it depends on the context of requirement. Support is reasonable – Chrome, Firefox, Safari and Opera 15+. It won’t work in IE.

property: unset;
This is a slightly unusual one. When unset is used, it acts as if it were inherit when an inherited value is available. If it can’t find one – for example, it’s a non-inherited property such as box-shadow – it acts like initial and applies the default browser value.

As if now it’s not much of use and has a little support.

all: [ inherit | initial | unset ];
Finally, all is a property rather than a value. You can assign either inherit, initial or unset to affect all properties, e.g. to reset every CSS property back to the browser default:


This can play a vital role if you’re trying to implement a third party widget or a portion of the page having different look and feel.
Summary

We have learnt the inheritance values-inherit , initial and unset as well the property “all” to override all the inheritance for each element inside a container.
 
Thanks for reading. Feedback and comments are highly appreciated 🙂 

Creating Reusable Calendar Icon which can Scale

Have you ever tried creating a reusable calendar icon which can scale? Well , this article explains how you can create one in HTML5 and CSS3.

This article explains how to create a reusable calendar icon for your blog or website, and yes, it is scalable, so you can resize it to any ratio and it will not be blurred just by changing a font-size.

jquery resizable calendar

You’re free to change the color/size of the text or an icon or anything as you prefer. I’m going to show you how.

The following is the template that I will be modifying to get the desired output.

It contains a main wrapper Div and three elements inside for Day, Month and Date respectively.

I had the option to put all the three in a span but just to reduce the complexity of the CSS I put them in separate tags.

jquery resizable calendar div template

And here’s the style for this icon wrapper, you can change the size of the icon in just one go by changing the wrapper’s font-size attribute.

jquery resizable calendar change size css

Here’s the complete HTML and CSS:


body
{
font-family: “Segoe UI”, Frutiger, “Frutiger Linotype”, “Dejavu Sans”,
“Helvetica Neue”, Arial, sans-serif;
font-size: 100%;

margin: 10px
color: #333;
background-color: #cecece;
}
div.calendarDate{
font-size:1em; /*change calendarIcon size */
display: block;
position: relative;
width: 7em;
height: 7em;
background-color: #fff;
border-radius: 0.7em;
-moz-border-radius: 0.7em;
box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd,
0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
overflow: hidden;
}
div.calendarDate *
{
display: block;
width: 100%;
font-size: 1em;
font-weight: bold;
font-style: normal;
text-align: center;
}
div.calendarDate strong
{
position: absolute;
top: 0;
padding: 0.4em 0;

color: #fff;
background-color: #19aaaa;
border-bottom: 1px dashed #ddd;
box-shadow: 0 2px 0 #19aaaa;
}
div.calendarDate em
{
position: absolute;
bottom: 0em;
color: #fff;
padding-top:.2em;
height: 1.6em;
background-color: #19aaaa;
}
div.calendarDate span
{
font-size: 2.8em;
letter-spacing: -0.05em;
padding-top: 0.65em;
color: #2f2f2f;
}


Just in case you may want to fiddle around, see: http://jsfiddle.net/sunnykumar08/ZqcrA/

Thanks for reading this article on devsdaily.com, I hope you find this article useful. Feedback and comments are highly appreciated!