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.
“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.
Each parallax page ends with a call to action that pops into existence as the user scrolls to the end.
Is this all coded from scratch? What libraries/plugins were used?
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.