Parallax with Javascript
Parallax is common applying for website,which bring mordern style. Actually it is kind of animation by changing the position of targets when scrolling the page.
Github DOWNLOAD
Step1:
HTML
Three images display as list with same class name.
data-x and data-y are the attributes for setting in Js file.
Step2:
css
Gradient background.
Items in the center of page.
Step3:
js
When window listened scrolling event, there is a function should happend next.
Get the target through DOM .
Loop all the targets one by one, and get the position of the scroll with pageXOffset and the dataset from html. So the total number of position is the combination of two which based on scrolling and dataset.
The last step is to add the calculated position to the style with translate3d.
There are tons of plugin for parallax. You can try the plugin named Parallax.js which is simple to use.
