Sunday, 6 April 2014

Second Class: Parallax

After learning page navigation, we started our new lesson on Parallax Scrolling. It is a technique to make images move along or fade in, fade out when scrolling up and down the page.


Type a text


After typing out the text, type the code for the parallax to work.


 When press on Command + Enter, it didn't appear anything when didn't scroll up and down.


When scroll down, the word slowly appear.



To make the parallax more obvious or interesting, I add in one circle, and adjust the timing.
Then I press on Command + Enter to play it, the text and the circle will appear slowly as I scroll down the page.


I add in one more circle...

Then I make some changed in the code by deleting "http..." to make the loading faster when scroll up and down.



When slowly scroll down, the images will slowly appear.

Below is the video of how the parallax should be.

No comments:

Post a Comment