The home page features two dynamically scrolling elements:
The main marquee is a custom coded scrolling marquee with easy on the eye swipe right transition and and description sweeping in and out on the left between each transition.
The lower module scroller starts at the far right and scrolls into its base position to subtly highlight additional modules that can be accessed through the scrollbar.
Hitachi is more than just a consumer electronics manufacturer and, in an effort to reach out to corporate clients, Gotham was contracted to redesign the Hitachi ‘Connected’ Microsite. As the front-end developer, I designed HTML5 template markup for custom CMS pages, a fresh CSS layout, and dynamic motion through a series of side scrolling animations: from the home marquee to the sub-page titles and module scrollers.
The page templates also include the lower module scroller when modules exceed three users could scroll using the custom red scroll bars on desktop computers, or with a swipe gesture on touch devices. In addition to this, it includes a slide-in title animation on the main image.
A major consideration in the new design of this site was how best to enable sharing of pages through social media. While we include the functionality on basic pages within the sidebar, we highlight the sharing on product pages, such as this, as they are the most natural pages to share.