Ahoy, front-end pirates! Welcome to the Chapter 1 of the Making of The Secret of Front-end Island saga: the Splashing Title.

Let’s start saying that in the Photoshop layout I got from the designer (Diego Sessa) I had the finished 1280 pixel wide layout, and I had the discretion of choosing animations, responsive behavior, and so on.

For the splash image I decided to make a “splash” effect using CSS 3 only. So the image had to start small, become bigger than it had to become, bounce back a little, and finally become of the final size. It also had to be shown of the final size in browsers that don’t support CSS 3 transitions.

Here are the steps of what I did:

Exporting the image

I duplicated the layer containing the splash image “The Treasure of Frontend Island” in a new image, trimmed the empty pixels, and saved it as transparent png (8 bit in this case, not 24, to have a lighter file).

Structure of the page

I divided the site into many sections:

  • event
  • speakers
  • description
  • city
  • venue
  • cart
  • and so on…

The event section contains the From the Front logo, the The Treasure of Frontend Island splash image, the event day, time and location, and the graphic of the island with the trees, the smoke, the sea, etc.

Then, I divided again the event section in 4 div:

  • ftfPresents
  • treasure
  • eventInfo
  • horizon

Inside the treasure div I placed:

  • the clouds markup
  • the splash image 
  • the event summary
  • the event type

The image

The splash image is now inside #event > #treasure > img.

#treasure img {
	z-index: 5;
	position: relative;
	width: 100%;
	max-width: 668px;
	height: auto;

This places the image at z-index 5 (in front of some clouds, on the back of some others), makes it wide the full page up to 668px (the image original width), and makes the height automatically scale based on the image original ratio.

The splash animation

To define a CSS animation, you have to use the @keyframes directive and give the animation a name and some keyframes statuses. For more info about this, see my post CSS 3 Transitions and Animation.

@keyframes splash {
	0%   { transform : scale(0.1)}
	50%  { transform : scale(1.1); animation-timing-function: ease-in }
	75%  { transform : scale(0.9); animation-timing-function: ease-in-out }
	100% { transform : scale(  1); animation-timing-function: ease-in-out }

Image starting size + animation application

I wanted the starting size of the image to be:

  • 10% of the full image size if the browser supports CSS animations
  • full size if the browser doesn’t support CSS animations

To test browser features, I always use the powerful Modernizr, which as result it adds classes to the <html> element with the result of the tested features.

As a result, the html element can have .cssanimations or .no-cssanimations depending on the browser support to CSS animations.

So I used the following piece of CSS to apply the animation.

#treasure img {
	/* Initial frame status */
	transform: scale(0.1);

.cssanimations #treasure img {
	/* Animation */
	animation: splash 1s 0.2s forwards;

.no-cssanimations #treasure img {
	/* Final frame status */
	transform: scale(1);

Like that:

  • by CSS definition, the splash image is initially resized ad 10% of its size
  • when the Javascript code of Modernizr is executed (and the classes added to the html element):
    • if CSS 3 animations are supported, the “splash” animation is applied
    • if not, the image is scaled to its original size

Final result

See the final result on 2012.fromthefront.it

If you liked this explanation, please share this post!

More to come!

Come back in the next few days to see the rest of the Making of The Treasure of Front-end Island saga!