SafeTec

Meet the Client

SafeTec (a chemical safety and management company in Portland, OR) wanted to build a fun, animated, interactive infographic-style landing page to remind prospective clients of the importance of chemical safety.

What We Did

Colin was subcontracted by PhooGoo to build this page, and he gladly took it on, knowing that he could flex his CSS3-animations-and-transitions muscles. He decided to write all the animations manually, using pure CSS, rather than use a Javascript library like GreenSock. He was careful to use hardware accelerated animation properties wherever possible to lessen the load on devices like phones and tablets.

Other points of note: The site is HTML5 and CSS3 compliant, responsive and touch-screen friendly, and cross-browser compatible.

How Colin Did It

CMS - Wordpress

The greatest challenge with this project was making it work on all devices and screen dimensions. Achieving full touch compatibility required a bit of troubleshooting, but eventually he prevailed!

Modernizr.js was used for cross-browser compatibility, feature detection, and graceful degradation.

FullPage.js was used as the layout and scroll framework, allowing for the separate 100% height/width slides, the animated scroll effect between slides, and the callback functions that are responsible for triggering the various animations on each slide.

Magnific Popup was used for the additional info that appears when the user clicks one of the “learn more” buttons.

Colin also used one of his favorite plugins, Advanced Custom Fields, while building this page’s template, making every title, link, and text area customizable by the client from within the familiar WordPress admin.

The artwork and creative vision was executed by Phoogoo. Colin took the images and the illustrations and ran with them, chopping them up into their individual components, reorganizing them into image sprites that could then be selected and animated purely with CSS3 transitions, transformations, and keyframe animations. All the animations had to scale fluidly to fit on every screen while still allowing the text content to be legible, so animations and image dimensions were all calculated using percentages and relative coordinates.

In the end it produces a very versatile and interactive infographic. Something we're proud to take credit for!

View the Site