Over the past month or so I've been making subtle tweaks to my theme on Scriptogr.am but I figured it was time for a larger update. Some of the changes made included a new HTML structure, slightly brighter color scheme, and the use of both SVGs and Animate.css CSS animations.
Although the site structure and layout didn't change, I thought I would take a moment and explain why I chose to use both an SVG for the logo (check it out at the top of each page) and Animate.css's CSS3 animations.
Animations with Animate.css
Animate.css is one of the many projects of Dan Eden that gives web designers to embed CSS3 animations on their website and use within their sites. Just add class names to your chosen elements and CSS does the rest.
Animate.css is a bunch of cool, fun, and cross-browser animations. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
I chose to alter bounceIn under bouncing entrances so the effect plays as the mouse hovers over the logo. Depending on the animation your image(s) may distorted as the animation plays out but you can avoid fuzzy images.
The Magic of SVGs
SVGs (or scalable vector graphics) are unique image files that allow web designers to use vector shapes and designs on our websites compared to raster (.png, .jpg, and .gif) images. Raster images certainly have a place in web design but SVG files have become rather useful as HTML and CSS advances.
The reason I chose to use an SVG image as my logo to avoid the distorted look as the hover animation plays. New technology comes with a small price, however, as IE8 and lower does not support SVG files. The good news is there are ways to get around IE as explained by David Goss on his blog.
Add the following comments to your SVG image:
<!--[if gte IE 9]><!--><img src="logo.svg" alt="Creative Launch"/><!--<![endif]-->
<!--[if lt IE 9]><img src="logo.png" alt="Creative Launch"/><![endif]-->
Now you have a fool proofed SVG image that works for everybody. There's a good chance the fallback image will look fuzzy through the animation but you wouldn't know the difference unless you compared them side by side.
There you have it. The use of SVGs and Animate.css are the two notable changes to my custom Scriptogr.am theme. With possible new features there will most likely be updates in the future (later down the road).