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