Html Question posted in
Some basic documentation can be found here.

Html – Typing animation changes the position everytime text length changes

My typing animation changes position everytime the text length , how can i make it stay at one place and just do animation
When ever the text to be typed by animtion get smaller it moves to center right and to left when text is in more.
video https://streamable.com/62jzwg
css

.hometxt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.4rem;
    height: 50vh;
}
div.hometxt span{
    position: relative;
}
.hometxt span::before{
    content: "FrontEnd Developer";
    font-size: 2.25rem;
    font-weight: 500;
    animation: text 20s infinite;
}
.hometxt span::after {
    content: '';
    position: absolute;
    height: 3rem;
    width: calc(100% + 0.8rem);
    background-color:white;
    border-left: 2px solid black;
    animation: cursor 0.8s infinite, typing 20s steps(14) infinite;
    right: -0.5rem;
}
@keyframes cursor {
    To{
        border-left: 2px solid transparent;
    }
}
@keyframes text {
    0%,20%{
        content: "FrontEnd Developer";
    }
    21%,40%{
        content: "PHP Developer";
    }
    41%,60%{
        content: "React/Next Developer";
    }
    61%,80%{
        content: "Web Designer";
    }
    81%,100%{
        content: "Freelancer";
    }
}
@keyframes typing {
    10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
        width: 0;
    }
    5%,20%,25%,40%,45%,60%,65%,80%,85%{
        width: calc(100% + 0.8rem);
    }
}
 <div class="hometxt">
  <h1>Hi, I am</h1>
  <p>Reyyan Yaqub</p>
  <span></span>
</div>

I tried adding min eidth but didnt work

Tags:

2

Answers


  1. 0

    Because the span is centered so it doesn’t have constant width that’s why cursor appears at different location.

    Solution would be wrap the .hometxt in a container and apply certain width then every thing will be left aligned

    .main{
  width: max(300px,25vw);
  margin-inline: auto;
}

.hometxt {
    height: 50vh;
}
div.hometxt span{
    position: relative;
}
.hometxt span::before{
    content: "FrontEnd Developer";
    font-size: 2.25rem;
    font-weight: 500;
    animation: text 20s infinite;
}
.hometxt span::after {
    content: '';
    position: absolute;
    height: 3rem;
    width: calc(100% + 0.8rem);
    background-color:white;
    border-left: 2px solid black;
    animation: cursor 0.8s infinite, typing 20s steps(14) infinite;
    right: -0.5rem;
}
@keyframes cursor {
    To{
        border-left: 2px solid transparent;
    }
}
@keyframes text {
    0%,20%{
        content: "FrontEnd Developer";
    }
    21%,40%{
        content: "PHP Developer";
    }
    41%,60%{
        content: "React/Next Developer";
    }
    61%,80%{
        content: "Web Designer";
    }
    81%,100%{
        content: "Freelancer";
    }
}
@keyframes typing {
    10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
        width: 0;
    }
    5%,20%,25%,40%,45%,60%,65%,80%,85%{
        width: calc(100% + 0.8rem);
    }
}
    <main class='main'>
  <div class="hometxt">
    <h1>Hi, I am</h1>
    <p>Reyyan Yaqub</p>
    <div>
       <span></span>
    </div>
  </div>
</main>
    Login or Signup to reply.
  2. 0

    Do you want to something like this:

    body {
  background-color:#ce3635;
  text-align: center;
  color:#fff;
  padding-top:10em;
}

* { color:#fff; text-decoration: none;}
    <!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <h1>Hi, I am</h1>
        <p>Reyyan Yaqub</p>
      <h1>        
        <a href="" class="typewrite" data-period="2000" data-type='[ "FrontEnd Developer", "PHP Developer", "React/Next Developer", "Web Designer", "Freelancer" ]'>
          <span class="wrap"></span>
        </a>
      </h1>
      <script type="text/javascript">
        var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

        var that = this;
        var delta = 200 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
        }

        setTimeout(function() {
        that.tick();
        }, delta);
    };

    window.onload = function() {
        var elements = document.getElementsByClassName('typewrite');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
              new TxtType(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
        document.body.appendChild(css);
    };
      </script>
  </body> 
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search