MAJOR PROJECT: JAVASCRIPT ANIMATION

 

designicon

One of the most important aspects of this experience is to make sure that it is as immersive as possible, by using animation effects with javascript this will allow me to bring my artwork to life, and again adding a further feeling of depth to my project.

I wanted to add this animation to the vehicles and clouds in the first and second sections to bring out the feeling of a city that is alive, and not using static imagery.

 


 

How It Works

HTML

The first step was to add a class to the HTML elements that I wanted to animate, for this one I wanted to animate a car move from left to right on the screen. On the parallax.js list item I added an ID – object4.

vehhtml

CSS

Within the CSS I selected my ID tag and then move it to -100% left this means that the vehicle is now out of the screen canvas (out of the view port).

vehcss

This ID is then linked up to the JAVASCRIPT that changes the position of the element, in other words it changes the positioning of the object by changing the position in relation to the left function within the css.

JAVASCRIPT

Within the javascript animation functions, the left -100% added within the CSS to the ID tag is then changed to +200 which in turn pulls the ID tag +200 pixels across the screen and back into the view port.

vehj1

After the animation function has been implemented with the correct information entered in, you can then edit the speed of each individual animation depending on the ID selected, so you can have one moving faster than the other.

vehj2

Here is The Animation Working:

vehicle.gif


 

after

Why I Didn’t Use After Effects

Before going into the animation of objects within my project I would like to point out that originally I considered doing this through Adobe After Effects. However, I discovered easier ways of doing this through the use of Javascript, so in the end didn’t use Adobe After Effects to do so.

Also, it would have been hard to learn to use whilst developing everything else for the project, such as artwork, music, writing a story and using javascript.

 

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