Blogger Ever

How to create parallax scrolling effect using CSS and Jquery?


The parallax scrolling is quite famous because of it adds a new beauty in your design,specially on homepage where it normally exist.To create this effect I got a simple trick make it,just have a look at the pen below:
See the Pen Parallax Scrolling using Jquery & CSS3 by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen

Actually this phenomenon work under a simple principle.For that you need two make sure that the header should be attached to the top without any space.Secondly,make sure that the header should scroll along the whole page.

Parallax work under three things:

  1. Fixed top header.
  2. Middle banner must have fixed position and have margin-top of height of header.
  3. Content should be having position relative and have margin of sum of height of header and content.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.