Animate Your Landing Page With CSS3

3

Share this article

Animate Your Coming Soon Page with CSS 3

Making our Coming Soon Page stand out

These days we’re all creators of digital images, so we knew that STACKY, a site to self-publish digital images, could appeal to many types of users. To demonstrate this, we decided to animate our Coming Soon Page with CSS3 and create an interactive “fruit machine” (aka slot machine) visitors could “spin” to see different taglines and potential use cases.

As an experiment, we decided to find out if we could create this effect using only CSS and no javascript. Well, we did allow ourselves once piece of Javascript (prefixfree.js, which handles the various CSS vendor prefixes), but this is not critical to the functionality of the page. It just meant we had less to type.

CLICK THE IMAGE TO TRY THE ANIMATION OUT

The Fruit Machine Barrels

A lot of the inspiration for trying CSS-only approach came from the excellent CSS-only stopwatch.

Like a fruit machine, we have three “barrels”, but rather than pictures of cherries and gold bars, ours contain words and phrases.

The HTML for each barrel is straightforward. Here’s the first of our barrels:

<div id="adjective" class="barrel">
      <div class="words">
            The simplest<br />
            The ultimate<br />
            Frictionless<br />
            Delightful<br />
            Simply beautiful<br />
            Hassle-free<br />
            Superior<br />
            Premium
      </div>
</div>

In the CSS, we set the barrel to be a fixed size and specify that anything that extends beyond this div is hidden:

.barrel {
	height: 50px; /* Set a fixed height for this box */
	overflow: hidden; /* Hide anything that appears outside this box */
	position: relative; /* Important for absolute positioning our “words” div later on */ }

Because each barrel needs to be a different width (some barrels’ phrases are longer than others), we specify these on a per-barrel basis using their ID elsewhere in the CSS.

We then style the div.words element within each barrel:

.words {
     line-height: 50px; /* Same as barrel height */
     position: absolute; /* Absolutely position this element within the barrel */
}

 

Each word/phrase on our barrel is on a separate line, so in order to ensure only one line will be visible at a time, we set the line-height of this block to be the same as the height of the barrel containing element, which is 50px.

The barrel element now shows only the first line of our word list, with the rest hidden. What we need to do now is animate this list. For this, we define a CSS keyframe:

@keyframes moveadjective {
      0% {top: 0;}
      100% {top: -400px;}
 }

Here, we’re defining the start and end states of the animation: the value of “top” should transition from 0 to -400px.

Why 400px? We have 8 lines in our adjectives word list, and we’ve set each line to be 50px via the line-height property, so the total height we need to animate through is 8 x 50px = 400px.

Then all we need to do is add an animation property to div.word element:

#adjective .words {
      animation: moveadjective 1s steps(8, end) infinite;
}

Let’s break down this statement and see what’s going on:

moveadjective tells the browser to use our @keyframes moveadjective animation that we defined above (animate the value of “top” from 0 to -400px).

1s is the total duration of the animation. We want the barrel to move through the words quite quickly so 1 second should be fast enough.

steps(8, end) says that instead of a smooth scroll from top:0 to top:-400px, we want to step through our animation in 8 steps. We have 8 lines in this word list so this means we that whenever the animation stops, we know the word will always be aligned correctly in our “barrel”.

infinite just says “animate forever”.

Because each of our barrels contains a different number of lines, we need to repeat the above for each barrel: a different @keyframe (because of the different end “top” values), and a different animation declaration for each words block.

So there we have it. Absolutely positioned word elements that are step-animated vertically via keyframe animations within fixed-size wrappers. I could have saved myself a lot of time just saying that, right?

Starting and Stopping the Fruit Machine

Controlling the fruit machine is also done solely through CSS, using a combination of the sibling selector and the “checked” pseudo-class.

Here’s our HTML for the controller. Note that the checkbox element itself is at the same level in the DOM as our #fruitmachine, and we’re using the <label> for it as our ”button”. Since the ID of the checkbox is the “for” attribute of the label, clicking this label will toggle the checkbox. (You’re all doing this in your HTML anyway, right?)

<input type="checkbox" id="stopstart" name="control" value="1" checked />
<div id="fruitmachine" class="fruitmachine">
      <div id="adjective" class="barrel">
             ...etc.
	</div>
	...
        all our other barrels
	...
        <div class="control">
              <label for="stopstart">
                    <span class="start">Spin</span>
                    <span class="stop">Stop</span>
              </label>
        </div>
</div>

So how does the above HTML help us? Luckily, there’s a CSS property that can pause an animation (animation-play-state) and we just need to use a combination of the “checked” pseudo-class and the sibling selector (~) to apply this property to our barrels:

#stopstart:checked~#fruitmachine .words {animation-play-state: paused;}

What does all that mean? OK, when our input checkbox (#startstop) is checked, find a sibling element called #fruitmachine and pause animations on the .words elements.

Notice that the default state of the input is “checked” in our HTML, so when the page is loaded the animation is paused. When you click the button (the <label>), the checkbox is unchecked, and the animation runs (it is ”un-paused”) until you click the button again.

For completion, here’s the pertinent CSS that tidies things up a bit:

/* Hide the checkbox itself */
 #stopstart {display: none;}
 /* Toggle the text on the label, again depending on the :checked status */
 .control label span.stop {display: inline;}
 .control label span.start {display: none;}
 #stopstart:checked~#fruitmachine .control label span.stop {display: none;}
 #stopstart:checked~#fruitmachine .control label span.start {display: inline;}

So what about compatibility?

Good question. It is quite easy to find browsers that do not support one or more of the following techniques that are used on the STACKY launch page:

  • the sibling selector (~)
  • the :checked pseudo-class
  • control of hidden checkboxes

However, in this case we don’t really mind. “So-what about compatibility”, if you like.

  1. Through browser-specific stylesheets and styles we can ensure that anything that we know doesn’t work on a browser is hidden from that browser.
  2. The fruit machine is just intended as a nice effect, a sideshow to the main event. The purpose of the page is to get something on our stacky.com domain and to collect email address (thank you LaunchRock widget). If a visitor doesn’t see the fruit machine, does this mean that the page no longer achieves these aims? No.
  3. Dedicated though we are to making the final STACKY site beautiful and functional for all our visitors, the launch page is not going to be around forever. For us, it was a great opportunity to play with something cool and learn some new stuff, knowing all the while that it was going to be thrown away at some point.

Adding LaunchRock

How to embed and style the LaunchRock widget is detailed elsewhere, but a quick checklist of the style updates we made to match the widget to our site would probably look something like this.

  • - New font for whole widget (Merriweather, a Google web font)
  • - No borders and drop shadow on the form
  • - A fixed width of 300px on the form container, so we could centre it on the page – with margin: auto
  • - Wide form input and submit buttons
  • - Orange submit buttons

Take a look for yourself

All the mark-up and CSS for our launch page is publicly available on GitHub, and the site itself is now live at STACKY.com. Check it out. Hell, you can even sign up if you think one of the use cases applies to you.

Editor’s Note: This is a guest post from the STACKY product team at Magnolia Box. You can follow them @getstacky and like them on Facebook.

Subscribe to our blog to get a weekly summary of all our new content in your inbox.
  • http://designcloudchicago.com Josh Frank

    What a great tutorial! Thanks for giving us a glimpse behind the curtain. I certainly experienced that “delight” factor when I clicked through to Stacky. And this blog post serves as a reminder to share with the rest of my team what a great potential resource for clients LaunchRock might be.

    Well done!

    • NateMunger

      Josh,

      Thank you, we’d love to have your clients use LaunchRock. We’ve got a new builder available now too, so the widget is even more easily customizable.

      • http://launchrock.com LaunchRock

        We received your message and will respond within one business day, likely much sooner. Our standard support hours are 6am PDT to 6pm PDT Monday-Friday.
        If you forgot to include it in your message, please reply to this email with the domain name for your LaunchRock account – that’ll help us help you a lot quicker!

        - The LaunchRock Crew

        On November 9, 2012 at 07:44PM Disqus >

        NateMunger wrote, in response to Josh

        Josh,

        Thank you, we’d love to have your clients use LaunchRock. We’ve got a new builder available now too, so the widget is even more easily customizable.
        IP 24.5.79.62
        Link to
        http://redirect.disqus.com/url
        [http://redirect.disqus.com/url]

        Josh Frank (unregistered)

        What a great tutorial! Thanks for giving us a glimpse behind the curtain. I certainly experienced that “delight” factor when I clicked through to Stacky. And this blog post serves as a reminder to share with the rest of my team what a great potential resource for clients LaunchRock might be.

        Well done!

        —–
        You can moderate through email. Respond in the body with “Delete”. Reply with “Like” to like this comment, or respond with anything else to approve this comment and post your message as a reply comment.

        Or use the moderate http://launchrock.disqus.com/admin/moderate/#/pending [http://launchrock.disqus.com/admin/moderate/#/pending]
        To turn off notifications, go http://disqus.com/account/ [http://disqus.com/account/]