parallax (n.) "apparent displacement of an object observed, due to an actual displacement of the observer," 1570s, from French parallaxe (mid-16c.), from Greek parallaxis "change, alteration, inclination of two lines meeting at an angle," from parallassein "to alter, make things alternate," from para- (see para- (1)) + allassein "to change," from allos "other" (from PIE root *al- "beyond"). Related: Parallactic.
Etymonline
This is a simple project that I did to try and experiment with something that fascinated me--using parallax to create the appearance of interaction in a three dimensional environment (think x, y, z axis).
The parallax effect assigns x, y, and z values to separate graphic elements and then calculates actions and movement in response to the movement of the mouse or to the tilt of the tablet if you are on a tablet or phone with an accelerometer.
I used the parallax.js library from Matthew Wagerfield for the javascript. Therefore I cannot take credit for the logic that controls the motion.
To use the app simply click on the View Project button or visit https://trrapp12.github.io/parallax-example/.
-
Ability to teach myself interests outside of formal instruction.
-
Integration of Photoshop layers and images in wireframing.
-
Create a custom logo in Photoshop.
-
Created the custom CSS using CSS3.
-
Integration of JavaScript libraries.
-
Use of HTML5.
-
Accomplish a goal I didn't think I'd be able to do when I began the course.
-
All art assets created by myself in Photoshop.
-
This was my first time using a third-party library
-
Learning how to read documentation and experiment within the parameters of another person's code base.
- Artwork and layout.
-
Parallax library written by Matthew Wagerfield - @mwagerfield
-
All artwork is my own
For more information see my LinkedIn, or return to my Github