Thank You Animated Message With jQuery

Below is the code to create an animated Thank You message using HTML, CSS, and jQuery. Please contact me at maria@mclinteractive.com if you have any questions or would like me to customize an animated message for you.

Demo

Hello,
Thank
You
for
all
the
special
things
you
do!!

Replay animation

Resources

Dependency. The jQuery Library can be included at the bottom of the html document just above the </body>.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Description

We used a list of words to display the animated message. The styles are provided below. We selected the words with jQuery and set the opacity to zero. Then, we displayed one word at a time with a delay of 500 milliseconds.

jQuery

Place the JavaScript below under the JQuery library.

<script>
jQuery(function(){
    var animateThankYou = function() {
        $('ul.animated-thank-you').find('li').css({'display':'none'});
        var obj = $('ul.animated-thank-you'), 
        lists = obj.children();
        $(lists).css({ 
            'opacity': 0,
            'display':'inline-block',
        });
        $( lists ).each(function( i ) {
            $(this).delay( i * 500 ).animate({ 
                'opacity': 1
            });
        });
    };

    animateThankYou();
});
</script>

HTML

Place the HTML somewhere in your page between the <body> and <\body>.

<ul class="animated-thank-you">
  <li>Hello,</li>
  <li>Thank</li>
  <li>You</li>
  <li>for</li>
  <li>all</li>
  <li>the</li>
  <li>special</li>
  <li>things</li>
  <li>you</li>
  <li>do!!</li>
</ul>

CSS

Place the CSS somewhere between the <head> and <\head>.

<style>
@import url('https://fonts.googleapis.com/css?family=Satisfy'); 
ul.animated-thank-you { 
     width:100%;
     max-width:320px;
     margin:0 auto;
     font-weight:500;
     list-style-type: none;
}
ul.animated-thank-you li { 
     float:left;
     display:none;
     height:20px;
     font-family: 'Satisfy', cursive;
     color:#0ca4dc;
     font-size:72px;
}                    

</style>

Maria C. Lima

Maria is an esteemed and celebrated independent web developer based in New York City. Her design and development work shows tremendous passion and insight, which she brings to all of her clients and projects with love, professionalism, and an esteemed work ethic admired by all who partner with Maria.

Thank You Animated Message With jQuery