The launch page for Hitachi's "Social Innovation Business" features a responsive, full-screen hero carousel with navigation enabled through both the left sidebar and the red item buttons.
The launch page for Hitachi's "Social Innovation Business" features a responsive, full-screen hero carousel with navigation enabled through both the left sidebar and the red item buttons.

Hitachi: Social Innovation Business

The launch page for Hitachi's "Social Innovation Business" features a responsive, full-screen hero carousel with navigation enabled through both the left sidebar and the red item buttons.

The launch page for Hitachi’s “Social Innovation Business” features a responsive, full-screen hero carousel with navigation enabled through both the left sidebar and the red item buttons.

Hitachi: Social Innovation Business

To spread awareness of Hitachi’s “Social Innovation Business” campaign, MRM built out a series of parallax scrolling web pages presenting Hitachi’s work in the medical, data, energy, and auto fields. With a small team of developers, we built the four densely interactive pages and a launch page.

Along with parallax scrolling, my personal work on the launch page, auto, and medical pages included HTML5 canvas animations, a full screen carousel, animated sprites, and other JavaScript animations.

Each page features both parallax and sprite animations launched as the user scrolls down the page, filling the entire screen.

Each page features both parallax and sprite animations launched as the user scrolls down the page, filling the entire screen.

"Blood cell" sprites algorithmically flow from the lower right hand corner to the upper left hand corner.  As the user continues to scroll down, the bulls eye gradually centers on the "virus" and destroys it.

“Blood cell” sprites algorithmically flow from the lower right hand corner to the upper left hand corner. As the user continues to scroll down, the bulls eye gradually centers on the “virus” and destroys it.

Randomly generated circles radiate out on an HTML canvs while a red "fuel" sprite continually charges the red car.

Randomly generated circles radiate out on an HTML canvs while a red “fuel” sprite continually charges the red car.

Each parallax page ends with a call to action that pops into existence as the user scrolls to the end.

Each parallax page ends with a call to action that pops into existence as the user scrolls to the end.

 

Tags: , , , , , , ,

2 thoughts on “Hitachi: Social Innovation Business

    • Some of it, such as the triggers for parallax events, are implemented using plugins. Others, such as the sprite animations and HTML canvas animations, are executed by code from scratch.

Leave a Reply to Elizabeth Cancel Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*