October 29, 2015 | 24 Feedbacks

Animated Intro Section

A collection of fancy text effects, to animate the tagline and action buttons of your website intro section.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Animations in web design are often used to drive the user’s focus to a specific section. One section  you want to make sure to highlight is the main tagline, with the action buttons. A good use of typography and a wise choice of colors should do the trick. However we decided to spice things up a little by creating some text effects that you can easily apply to the intro section of your web projects.

Video: Mazwai

Creating the structure

The HTML structure for each effect is pretty simple: a is used as a container for the which wraps the main tagline.

The structure for the main tagline slightly differs from one effect to the other: for the bouncy effect, for example, we used an <h1> for the page title, a <p> tag as tagline, and a div.action-wrapper to wrap the action buttons:

The .bouncy class added to the .cd-into-content is used to trigger the animation.

Adding style

By default, we hide the intro content by setting its opacity to zero, then we animate it using CSS Animations.
For the bouncy effect, for example, we created 3 different animations for the <h1>, <p> and .cd-btn buttons:

Let’s take a look at the video effect now: if you open the video.html file, you can see that an additional has been inserted; this element is used to wrap the background video (you won’t see any <video> element inside the HTML because it’s loaded using Javascript – more in the ‘Events Handling’ section).

Besides, we inserted two svg elements (.svg-mask and .svg-mask-mobile) inside the <h1>: these svgs are used to create the title transparency effect (the first one when the device width is bigger than 768px, the second for the other devices).
Basically, the idea is: we create an opaque rectangular <path> element but then we add a transparent area in the shape of the page title (in our demo, ‘Video Effect’).
The svg is then used as a layer to cover the entire .cd-intro-content: the transparent area of the svg lets you see what’s below it (the background video).

You can create a svg mask simply by using a vector graphic editor. We used Adobe Illustrator, where we created a rectangle and then removed the text using the pathfinder tool.

Events handling

These intro effects have been created using CSS only.
We used jQuery for the video effect only to load the background video if the device width is bigger than 768px. A data-video has been added to the to retrieve the video url.


Nov 02, 2015
  • video effect - fixed bug on Firefox
Oct 29, 2015
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Nitin

    Cool practical solution, as always. My favorite – Mask

    • ✪ prev7

      my too. its simply best! :D

  • Kamran Ismailov

    Firefox – not running video

    • Claudia Romano

      Thanks for the heads-up. Fixed! ;) @disqus_e53joqrx2m:disqus @sergeyivchenko:disqus

  • ✪ prev7

    great job, i love it! is it open source? i cant find license information

  • KUD

    Kamran is right: it does not work on Firefox

  • Sergey Ivchenko

    video not working in firefox
    link screenshot

    • Arjun Menon

      Its perfectly working in Firefox 41 in ubuntu 14.04

    • guywhokeepshissoftwareupdated

      a good rule of thumb is to keep your software updated when trying code you didn’t write.

  • Jacob Clayton

    Thanks so much for sharing – this is great stuff!

  • high level

    Thanks for sharing this!

  • Ilse De

    Thank you!

  • izayl

    er… I’m new to learn fronted-end developmont. Thank you for you share.

    But I have a problem in learning your CSS code:

    .cd-intro-content .action-wrapper::after{
    clear: “both”;
    content: “”;
    display: table;

    I just can’t understand what’s the role of “display : table;”,
    and when delete this statement, it seems everything is all right.

    Hope someone can help me

    From a rookie, China.

  • nick

    I’m using the video.html as my index.php – and have all the proper elements set up (mp4, webm, and bg-img),
    but the video is not playing. Are there steps that I should know. How do I get the video to work?

    • Claudia Romano

      Hi Nick, please make sure to update the data-video attribute of the .cd-bg-video-wrapper element (it is used to retrieve the video url). Hope this helps!

  • Johnny Lannebro

    Hey. Im trying to change the text “Video Effect” Howerever it dosnt seem to change. Im a newb ur is it something else?

    • Claudia Romano

      Hi Johnny, you need to replace the .svg-mask and .svg-mask-mobile elements with two new svg elements with your new title (you can find additional details in the article). Hope this helps!

  • teresa

    Hi! I was wondering what font did you use for the text “video effect”?

    • Ben Wolfram

      Download the “WhatFont” Chrome/Safari extension.

  • Le Gobelin

    Hello ! I want to insert the mask 2 animated section, but it’s still in the left of my page and i want to move this to the centre(horizontal). How i can make that ? Thanks ! :)

  • Julie Alary

    Hello!!! thanks for sharing this awesome and simply Text Animation!!

  • Richard Eastwood

    Hello, on the mask version, how would you alter the loading section line to rotate 75 degrees and stay on screen and not to disappear? Thanks for the tutorial, very cool.