News

Create animated text effects with wow.js

Animate.css made things easier with its off-the-shelf CSS animations – Wow.js has made it even easier still

Create-animated-text-effects-with-wow

Create animated text effects with wow

Historically, the only ways that new content would appear on a page would be for a new page to be opened, or for the user to scroll down and it come into view pixel row by pixel row.

That works perfectly well for some content, but where is the ‘big reveal’ if your content is scrolled up line by line as the page is explored? The popular technique of deferring the appearance of page content until there is space for the whole section to be displayed is all about creating the right entrance. Typically jQuery or JavaScript has been used to achieve this design goal and would require a good amount of technical knowledge to achieve.

This is where wow.js comes in. At only 4kb, its main job is to render content invisible until you’re ready for it to be displayed. Then your chosen animation is triggered and it’s all done with the minimum of code and file-size overhead. So, you can spend more time polishing your layouts and how they will appear on screen and less time on the code – and your user can spend more time engaging with your content and less time waiting for it to load.

DOWNLOAD TUTORIAL FILES

HTML first

The HTML document type declaration is set, together with the standard language and character set code. A link is made to the Animate.css stylesheet library and the stylesheet created for this page.

001    <!doctype html>
002    <html lang=”en”>
003    <head>
004        <meta charset=”utf-8”>
005        <title>The Oak By Alfred Lord Tennyson
</title>
006        <link rel=”stylesheet” href=”css/
animate.css”>
007        <link rel=”stylesheet” href=”css/page.
css”>

Hide all wows

Elements assigned with the ‘.wow’ class are set as hidden so that they can be triggered to appear when they are reached later on in the page. If Internet Explorer is detected, html5shiv is loaded in order to enable HTML5 support in this browser.

001    <style>
002            .wow:first-child {
003                visibility: hidden;
004            }
005        </style>
006        <!--[if IE]>
007            <script src=”http://html5shiv.
googlecode.com/svn/trunk/html5.js”>
</script>
008        <![endif]-->

Page scroller

The code is nothing to do with wow.js nor animate.css, rather it is a simple page scroller that can be configured to automatically scroll down the page after a delay and at a speed that you are able to set. You probably wouldn’t use a script like this for normal sites but it comes in useful for presenting content in the format used by this tutorial.

001    sStart = 0
002    sTimer = 0;
003    sPos   = 0;
004    sSpeed = 0.9;
005    sDelay = 6;
006    function toTop() {
007    sPos = 0;
008    scrollTo(0,0);
009    }
010    function sDown() {
011    sPos += sSpeed;
012    window.scroll(0,sPos);
013    sTimer = setTimeout(“sDown()”,10);
014    }
015    sStart = setTimeout(“sDown()”,
sDelay * 1000);

Headings

As you might expect, the page content all sits inside a container specified in the stylesheet. H1 and H2 are intended to appear on screen right at the start, so no ‘wow’ class is needed for those elements. The header element is the semantically correct HTML5 tag used for grouping together header content.

001    <body>
002        <div id=”container”>
003            <header>
004                <h1>The Oak</h1>
005                <h2>by Alfred Lord Tennyson</h2>
006            </header>
007            <div>

First verse

The three verses of the poem are broken into one section each to help show the structure. This tutorial uses block elements, which will be better suited to chunks of content on a site, like an image with some accompanying text. The ‘stanza’ class provides the styling for the block element, the ‘wow’ is what makes the element hidden until it is reached and the
animate.css class appears after that.

001    <section>
002        <div class=”stanza wow slideInRight”>
Live </div>
003        <div class=”stanza wow bounceInDown” 
data-wow-delay=”1s”>thy</div>
004        <div class=”stanza wow slideInRight” 
data-wow-delay=”2s”>Life,</div>
005        <div class=”stanza wow flipInX”>Young 
and old,</div>       
006        <div class=”stanza wow rotateInUpLeft”>
Like yon oak,</div>
007        <div class=”stanza wow bounceIn”>
Bright in spring,</div>
008        <div class=”stanza lastline wow fadeIn”>
Living</div>
009        <div class=”stanza lastline gold wow 
fadeIn” data-wow-delay=”0.7s”>gold;
</div>
010    </section> 

Second Verse

‘Float: left;’ has been used throughout to enable phrases to be broken into separate words that appear next to each other. On lines that follow a shorter line, a newline class uses ‘clear:both;’ to ensure a new line is started underneath the previous <div>. Other classes are used as required, for example to colour the ‘gold’ text.

001    <section>
002        <div class=”stanza wow flipInY”>
Summer-rich</div>
003        <div class=”stanza newline wow 
slideInLeft”>Then;</div>
004        <div class=”stanza wow 
slideInDown”>and</div>
005        <div class=”stanza wow 
slideInRight”>then</div>
006        <div class=”stanza wow rotateIn”>
Autumn-changed</div>
007        <div class=”stanza wow fadeIn”>
Soberer-hued</div>
008        <div class=”stanza newline gold wow 
rotateInDownLeft”>Gold</div>
009        <div class=”stanza lastline gold wow 
rotateInDownRight” data-wow-delay=”0.7s”
>again.</div>
010    </section> 

More control

Wow.js provides some extra options for controlling your animation. For example you can set the duration with ‘data-wow-duration’, which has been used here to slow the fadeIn down a little. You can also delay the start of the animation with data-wow-delay.

001    <section>
002        <div class=”stanza wow fadeIn” data-
wow-duration=”4”>All his leaves</div>
003        <div class=”stanza wow hinge” data-wow-
delay=”3s”>Fall’n at length,</div>
004        <div class=”stanza newline wow shake”
>Look</div>
005        <div class=”stanza wow flip”>he</div>
006        <div class=”stanza wow shake”>stands,
</div>
007        <div class=”stanza wow bounceIn”>Trunk 
and bough</div>
008        <div class=”stanza lastline wow 
bounceInDown”>Naked strength.</div>
009    </section> 

Footnotes

To see the presentation again you’ll need to reset the sPos variable to 0 and the page needs to be reloaded. The link ‘javascript:toTop(); location.reload()’ is provided for this purpose. To ensure the DOM is loaded beforehand, wow.js is initialised last on the page and an offset of 200 has been set. This is the number of pixels from the viewport bottom that need to have been cleared before the element animation is triggered.

001    <div class=”newline footnote”><a href=
”javascript:toTop()”>BACK TO TOP</a></div> 
002    <div class=”newline footnote”><a href=”
http://bit.ly/1imjx7P”>Image credit</a>
</div>
003        <script src=”js/wow.min.js”></script>
004        <script>
005            wow = new WOW(
006            {
007                animateClass: ‘animated’,
008                offset:       200
009                }
010            );
011            wow.init();
012        </script> 

CSS

A couple of Google fonts are loaded and a fullscreen background put in place. White text is used throughout the page, so the colour is set here to save having to declare it in several other places. RGBa is used, which enables the opacity to be set. Here a setting of 0.9 is used to achieve a 90%, resulting in a fairly subtle effect.

001    @import url(http://fonts.googleapis.com
/css?family=Gentium+Book+Basic:700|Oswald);
002    html { 
003        background: url(../images/oak.jpg) no-
repeat center center fixed; 
004        -webkit-background-size: cover;
005        -moz-background-size: cover;
006        -o-background-size: cover;
007        background-size: cover;
008        color: rgba(255, 255, 255, 0.9);

A 3D CSS text effect

Why would you apply just one shadow to your text when you could apply two, or even twelve? This CSS comes from 1st Web Designer (bit.ly/SLrFWB) and it’s definitely worth taking some time to see exactly how the effect is built up using variations in Y axis offset, blur amount and shadow opacity.

001    text-shadow: 0 1px 0 #ccc,
002        0 2px 0 #c9c9c9,
003        0 3px 0 #bbb,
004        0 4px 0 #b9b9b9,
005        0 5px 0 #aaa,
006        0 6px 1px rgba(0,0,0,.1),
007        0 0 5px rgba(0,0,0,.1),
008        0 1px 3px rgba(0,0,0,.3),
009        0 3px 5px rgba(0,0,0,.2),
010        0 5px 10px rgba(0,0,0,.25),
011        0 10px 10px rgba(0,0,0,.2),
012        0 20px 20px rgba(0,0,0,.15);
013    }

Headings

Settings for H1 and H2 are each added here with their own Google font. Remember that the colour and shadow for these elements has already been set in the HTML element earlier. When choosing your Google fonts you can see how they match together onscreen, which is useful for ensuring that you choose a matched pair.

001    h1 {
002        font-size: 160px;
003        margin: 0 0 0 0;
004        font-family: ‘Gentium Book Basic’, 
serif;
005    }
006    h2 {
007        font-size: 60px;
008        margin: 0 0 0 0;
009        font-family: ‘Oswald’, sans-serif;
010    }

Centre the content

The left and right margins are set to auto so that the content within the <div> it contains can be centred. 980px is a reasonable width for use here but for a real site you’d probably want to consider a responsive layout. The sections are separated with a generous 250px of top padding to try and avoid half the poem displaying on tall screens before the animation has even started.

001    #container {
002        width:  980px;
003        margin: 0 auto;
004        padding: 0 50px;
005    }
006    section {
007        padding-top: 250px;
008    } 

Hot links

The shadows are removed by setting the property to ‘0 0;’. It’s worth noting here that the links have purposely been positioned to the left of the main container. The image credit will take users directly to the photographer’s page on Flickr – designers should never underestimate the value of services such as Flickr and Creative Commons licenses.

001    a:link, a:visited {
002        text-decoration:none;
003        color: #fff;
004        text-shadow: 0 0;
005        font-family: ‘Oswald’, sans-serif
006    }
007    a:hover, a:active {
008        text-decoration:underline;
009        text-shadow: 0 0;
010        font-family: ‘Oswald’, sans-serif
011    } 

Mind your backs

During testing it became apparent that the hinge animation element used by the ‘Fall’n at Length’ made the links inaccessible after the animation had fallen past that area. This can be fixed but is mentioned here as something that you will need to keep in mind if you use the hinge animation.

Poem text

The text is set within <div>s and are therefore block elements, so they need to be floated left to sit next to each other. Also, word spacing isn’t allowed, so a padding-right of 25px does that job. The ‘lastline’ class just provides a space after the last line of each verse.

001    .stanza {
002        float:left;
003        padding-right:25px;
004        font-size: 100px;
005        font-family: ‘Gentium Book Basic’,     serif;
006        line-height: 1.5;
007    }
008    .lastline {
009        margin-bottom: 200px;
010    }

More classes

Short lines in the poem can be problematic because the text for the next line will shift up to fill the line. The ‘newline’ class is therefore used to clear the existing float that would apply to this element and let it start a new <div> immediately underneath.

001    .newline {
002        clear: both;
003    }
004    .gold {
005        color: rgba(202, 157, 4, 0.95);
006    }

Bookmark bar scroller

If you are testing a presentation similar to the tutorial but don’t want to actually add a scroller to the files, you can use the code below to create your very own bookmark bar-based Auto Scroll. This code appears on the keyboardP site (bit.ly/1uNotYP) and comes complete with instructions – simple but effective.

001    javascript:var isScrolling; var scrolldelay
; function pageScroll() { window.scrollBy
(0,1); scrolldelay = setTimeout(‘pageScroll
()’,25); isScrolling = true; } if(
!isScrolling) { pageScroll(); } else { 
isScrolling = false; clearTimeout
(scrolldelay); }
×