Hitachi: Connected - Homepage screenshot
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: Connected

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.

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: Connected

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 eccede three.  In addition to this, it includes a slide-in title animation on the main image.

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.

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.

Tags: , , , , , , ,

One thought on “Hitachi: Connected

  1. Pingback: Hitachi: BusinessWeek+ | Elizabeth Fuller

Leave a 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>

*