MAJOR PROJECT: RESEARCHING INTO THE CODE

designicon

 

RESEARCHING CODE

Before jumping into building this interactive experience I thought it would be a good idea to first look through different types of javascript code, to develop and understanding of exactly what the functionality of this experience is going to be, and how I was going to lay out the different imagery on top of each other.


 

pjs

Resource: parallax.js

Parallax.JS works buy overlaying vector images over the top of each other, then adding ¬†the Parallx.JS code which in turn changes the movement of each image depending on cursor movement. This will allow me to add depth to my project, almost allowing it to become some what three dimensional and will improve the experience for the user allowing them to look behind object and discovering things they didn’t even know where there.

 

aosfade

Resource: AOS animate on scroll

AOS animate on scroll allows me to add in some scroll animation, as the user scrolls down the page elements with transition in and will add a little more movement to the project and allow it to seem as though the imagery is coming to life as the user scroll down the screen.

AUDIO FADE ON SCROLL JAVASCRIPT

Resource: AUDIO FADE

AUDIO FADE ON SCROLL will allow me to fade in my the music I have created for the project depending on the position the user is on the screen, when the user scrolls down the music with fade into one another again adding a greater experience for the user.

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