MAJOR PROJECT: PARALLAX.JS

pjs

Now I had all of my drawings on my structure I decided to begin implementing the code, and the first piece of code I wanted to implement was Parallax.JS. This is the main effect of the whole experience, adding depth to my images almost making it three dimensional for the user to explore the world I have created with their cursor.

This was a big learning curve for me, because i have never used Parallax.JS before, it is a piece of code that is used widely across many different websites and is classed as one of best parallax effects on Github. 


HOW IT WORKS

– HTML –

parallaxjshtml.png

Within the HTML you need to create a container, and set this to 120% within CSS, by doing this the container where your Parallax.js elements are located will now be within a container that spreads passed the canvas of your screen the reason for this will be described later.

Within the container, an un-ordered list tag with both ID and Class must be created with the name scene for both (this links directly into the Parallax.js javascript file and allows for the file to register that the containing elements will be parallax elements). Within the ul scene tag list items must be created to implement the imagery into, once this has been added an attribute titled data-depth must be added to each list item. This allows you to add the movement of each image within the list tag, in relation to the x and y overflow.

listeitems.png

The gif as seen bellow shows this effect in action:

As you can see with Parallax.JS Linked with the HTML list elements, allows the user to use the cursor to view behind each element.

JAVASCRIPT

Within the Javascript, the class layer that is added to each list item is connected within the Parallx.JS Javascript file. As it can be seen within the code bellow the javascript then changes the movement of each list item depending on cursor position.

javaparal.png

The gif as seen bellow shows this effect in action:

Using the inspect element on chrome you can see the changes of position of each element depending on the cursors position.

parallaxmove.gif

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s