Colorfield

Chevy Silverado

Brand

Chevy Silverado logo

Project Type

  • Desktop
  • Mobile
  • Tablet

Colorfield's Role

  • Development
  • Design

Technology

  • Video
  • Responsive HTML
  • Javascript

2014 Chevy Silverado Launch

Colorfield partnered with Transistor Studios and Goodby, Silverstein and Partners on the design and development of the launch site for the 2014 Chevy Silverado - Chevy’s biggest seller. The site is an immersive, single-page HTML5 experience using parallax to create a sense of depth to the backgrounds and content. Subtle animations and videos throughout highlight new features of the truck.

For the desktop and mobile site we collaborated with GSP on the  design work and handled animation and development. We also did post-production on the background image sequence to create the parallax.

HTML5 Parallax

The site is built in a number of ‘layers’, beginning with the background. CG vehicles were rendered with photographic environments; these were then split into various layers for foreground, mid-ground and background. The background is essentially one long ‘filmstrip’, with these layers moving at different speeds to create a parallax effect as the user scrolls through the site.

On top of this background is the content - html text, graphics and videos. These in turn move at different speeds with scrolling to further enhance the parallax effect.
You can see the site here.

The background displays through over 1200 sequential frames as the user scrolls through the site. The parallax effect and seamless transitions between ‘scenes’ makes it feel completely seamless.

In addition to the desktop site, a full version of the site for mobile devices was designed and developed. While the content is the same, the effects and animations are different, to better suit the limited processing power of mobile devices. Rather than parallax backgrounds, the mobile site features a swipe/slider to move between content screens. The html-based content still animates on in much the same way as the desktop site.