Thank You Animated Message

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>

You might be interested in the following