CODEWITHSUNDEEP
javascript
user7978727
user7978727

Reputation:

generate an css transition only for letters

I am just building an animation for a webbanner. Is it possible to animate not only the whole element, but letter for letter.

I have tried it and it works when I give each letter an id. Is there a simpler way?

let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  let test = document.getElementById('test');
  test.classList.add('animate');
});
h1{
  font-family:"Calibri";
  text-align:center;
  transition:all .8s;
  opacity:0; 
}

.animate{
  transform: scale(2) 
  rotate(360deg);
  translate (0%, 50%);
  opacity:1;
}
<h1 id="test">some text to rotate</h1>
<button id="btn">rotate and scale</button>

Upvotes: 0

Views: 284

Answers (2)

Nandan Bhat
Nandan Bhat

Reputation: 1563

I have built a solution using JQuery. Try running the following code.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1{
            text-align:center;
            font-family:"Calibri";
        }

        h1 div{
          transition:all .8s;
          display:inline-block;
          opacity:0; 
        }

        .animate{
          font-size:50px;
          transform: scale(1) 
          rotate(360deg);
          translate (0%, 50%);
          opacity:1;
        }
    </style>
</head>
<body>
    <h1 id="test">some text to rotate</h1>
    <button id="btn">rotate and scale</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>

$(document).ready(function(){
           var h1 = $("#test").html();
           $("#test").html("");
           var str = "";
           for(var i=0;i<h1.length;i++){
            if(h1[i] == " "){
                str += " ";
            }else{
                str += "<div>"+h1[i]+"</div>";
            }
           }
           $("#test").html(str);

        $("#btn").on('click', function(){               
           $("h1 div").addClass("animate");
        });
});


    </script>
</body>
</html>

Upvotes: 1

Frank Wisniewski
Frank Wisniewski

Reputation: 1224

Some time ago I created such an animation. You have to split the element into individual spans ...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>animated text</title>
  <style>
    body{font-family:'Calibri';}
    .red{color:red;}
    .blue{color:blue;}
  </style>

</head>
<body>
  <h1
        data-fhwAni = ""
        data-fhwEndCss=" transition:all .5s ;opacity:0; transform: scale(5) translate(-80px, 20px);"
        data-fhwStartCss=" opacity:1; transform:scale(1);"
        data-fhwBlendInSpeed = "50"
        data-fhwdelay = "6000"
        >
        Lorem ipsum dolor.
    </h1>

    <h1 class="red"
        data-fhwAni = ""
        data-fhwStartCss=" transition:all .5s ;opacity:0; transform: scale(5);"
        data-fhwEndCss=" opacity:1; transform:scale(1);"
        data-fhwBlendInSpeed = "100"
        data-fhwdelay = "0"
        >
        Lorem ipsum dolor sit amet.
    </h1>
    <h1
        data-fhwAni = ""
        data-fhwdelay = "2500"
        >
        Lorem ipsum dolor sit amet, consectetur.
    </h1>
    <h1 class="red"
        data-fhwAni = ""
        data-fhwStartCss=" transition:all .5s ;opacity:0; transform: scale(5) translate(-80px, 20px);"
        data-fhwEndCss=" opacity:1; transform:scale(1);"
        data-fhwBlendInSpeed = "80"
        data-fhwdelay = "4000"
        >
        Lorem ipsum dolor sit amet.
    </h1>
    <script>
        (function(){
        var fhwAnimate = function (el){
            var startCss = el.getAttribute('data-fhwStartCss') ? el.getAttribute('data-fhwStartCss') : 'transition:all .5s ;opacity:0; transform: scale(5);';
            var endCss = el.getAttribute('data-fhwEndCss') ? el.getAttribute('data-fhwEndCss') : ' opacity:1; transform:scale(1);';
            var blendInSpeed = el.getAttribute('data-fhwBlendInSpeed') ? el.getAttribute('data-fhwBlendInSpeed') : 50;
            var delay = el.getAttribute('data-fhwDelay') ? el.getAttribute('data-fhwDelay') : 0;
            var oldText = el.innerText;
            var animateLetters = new Array;
            el.innerHTML='';
            for (var i=0; i < oldText.length;i++){
                animateLetters[i] = document.createElement('span');
                animateLetters[i].innerHTML = (oldText[i]==' ') ? '&nbsp;' : oldText[i];
                animateLetters[i].style.display='inline-block';
                animateLetters[i].style.cssText+=startCss;
                el.appendChild(animateLetters[i]);
            }
            var aktLetter=0;
            setTimeout( function(){
                var myInterval = window.setInterval(function(){
                    animateLetters[aktLetter].style.cssText+=endCss;
                    aktLetter++;
                    if (aktLetter==oldText.length){
                        clearInterval(myInterval);
                    }
                },blendInSpeed);
                }, delay);
        }
        var elementsToAnimate = document.querySelectorAll('[data-fhwAni');
        for (var i=0; i < elementsToAnimate.length;i++){
            fhwAnimate(elementsToAnimate[i]);
        }
        })();
    </script>

</body>
</html>

I have created an small JSBIN for playing with the code:

the JSBIN

Upvotes: 1

Related Questions