CSS Letter Bouncing Animation Text effect

This tutorial will show how to make CSS text bouncing effect with Animation using HTML, CSS and JavaScript. You have use this concept when new page loaded. When you have use this concept your website looks like very awesome. Text with individually bouncing letters using CSS animations, plus a little bit of JavaScript to apply the animation at different times for each character. Demo and download avilable.

Demo / Download

Author Steve Robertson
Hits
Created SEPTEMBER 2, 2015
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Code


<div>
     <p id="bounceTxt">W3tweaks</p>
</div>

CSS Code


@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);

div {
     position: absolute;
     top: 50%;
     width: 100%;
}

p {
     color: #265687;
     font-family: "Montserrat Alternates", sans-serif;
     font-size: 72px;
     font-weight: 400;
     letter-spacing: -0.05em;
     text-align: center;
     text-shadow: 3px 5px 5px rgba(0, 0, 0, .3);
     
     em {
          font-style: normal;
          display: inline-block;
          
          &:nth-child(1) {
               color: #4285F4;
          }

          &:nth-child(2) {
               color: #E94D3D;
          }

          &:nth-child(3) {
               color:#F7C945;
          }

          &:nth-child(4) {
               color: #4285F4;
          }

          &:nth-child(5) {   
               color: #34A853;
          }

          &:nth-child(6) {
               color: #E94D3D;
          }
          
          &.bounce-me {
               -webkit-animation: bounce 4s infinite ease-in-out;
               animation: bounce 4s infinite ease-in-out;
          }
     }
}

@-webkit-keyframes bounce {
     60% {
          -webkit-transform: translate(0px, -200px) scale(1.2);
          opacity: 0.8;
          text-shadow: 0px 150px 20px rgba(0, 0, 0, 0.8);
     }
}

@keyframes bounce {
     60% {
          -webkit-transform: translate(0px, -200px) scale(1.2);
          opacity: 0.8;
          text-shadow: 0px 150px 20px rgba(0, 0, 0, 0.8);
     }
}

JavaScript

var 
    myText = document.getElementById("bounceTxt").innerHTML,
    wrapText = "";

for (var i=0; i<myText.length; i++) {
     wrapText += "<em>" + myText.charAt(i) + "</em>";
}

document.getElementById("bounceTxt").innerHTML = wrapText;

var 
    myLetters = document.getElementsByTagName("em"),
    j = 0;

function applyBounce() {
     setTimeout(function() {
          myLetters[j].className = "bounce-me";
          j++;
          
          if (j < myLetters.length) {
               applyBounce();
          }
     }, 250);
}

applyBounce();

Preview

CSS Letter Bouncing Animation Text effect Preview

Advertisement

Google Matched Content...