Product designer
natwarl_themb.jpg

Parallax Website

Web Development, Web Design, Interaction Design, Motion/Animation

Created using HTML5, CSS3, JavaScript

 

Narwhals

Narwhals, the unicorns of the sea. Narwhals are one of my favorite animals, and I wanted to create an interactive site that would teach visitors about the near threatened species. My goal for this project was to strengthen my illustration skills and become familiar with a new technology. Narwhals is a website that features 2D vector illustrations and utilizes the technique of parallax scrolling to create a fun and engaging user experience. 

Role: Web Design & Development, Illustration

 
 

Technologies Used

ScrollMagic, Greensock, JavaScript, jQuery, HTML5, CSS3. Illustrations done on Adobe Illustrator

Animation Principles

I used a few animation techniques from the 12 basic principles of animation while building and designing the website. These included Timing, Arcs, Slow In and Out, Follow Through, and Overlapping Action. I used the greensock animation platform to manipulate and control the timing and placing of animations. 

More Screenshots