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="http://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>

About the Author

Maria C. Lima

Maria C. Lima has spent the past 10 years studying web development and becoming a sought-after independent technology innovator in New York City. She now runs MCL Interactive, her own NYC design and technology firm, where she prides herself in providing creative web solutions for savvy entrepreneurs. She helps bring their vision to life in a beautiful and functional web presence. Her goal is to take care of all the techy stuff so that they can do what they love and work on growing their businesses. You can find her on Twitter (@mclinteractive) or on Facebook (Facebook.com/mclinteractive). Read more

Related posts

You might be interested in the following posts: