CODEWITHSUNDEEP
htmlcsswebfrontend
Ujjwal Saxena
Ujjwal Saxena

Reputation: 141

How to get CSS Typewriter effect working?

I am trying to add typewriter effect to some text on a webpage, however, it is not working as intended. Since this question is about animation I have given small video (only 5-6 sec) links bellow.

  1. How do I make that cursor stop from going further than it needs to be ? See Here
  2. This animation starts as soon as I open the website, but this section in in the middle of the webpage so the user is not able to see that animation.See here
  3. This does not adjust itself, when viewed it mobile. So what should I do so that it automatically get smaller with small screen (keeping the whole text in the same line). See here

.pcb-text p {
  font-size: 60px;
  animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  border-right: .12em solid orange;
  / width: 28ch;
}

@keyframes type-writer-effect {
  0% {
    text-align: center;
    width: 0ch;
  }
  100% {
    width: 28ch;
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}
<div class="pcb-text">
  <div class="text-center">
    <p>Physics, Chemistry, Biology.</p>
  </div>
</div>

Upvotes: 0

Views: 2022

Answers (3)

Naser.Sadeghi
Naser.Sadeghi

Reputation: 1302

First of all, if you want the animation to start when the user scrolls to the section in which it exists you're going to need a java-script (you can use jQuery too) code like the one in this link.

Secondly in order to have different font sizes in different screens, I would prefer to use Bootstrap but if you're not familiar with Bootstrap, you may use CSS media queries like below:

@media only screen and (max-width: 600px) {
.pcb-text p {
    text-align: center;
    font-size: 20px;
    animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    border-right: .12em solid orange;
  }
}

@media only screen and (min-width: 601px) {
.pcb-text p {
     text-align: center;
     font-size: 60px;
     animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
     overflow: hidden;
     white-space: nowrap;
     margin: 0 auto;
     border-right: .12em solid orange;
     width: 28ch;
   }
}

These two media queries are written for two screen sizes (screens with width of 600 pixels or less and screens with with of 601 pixels or more). You can expand these for your own needs.

Finally for the cursor I have to say that as you do not know the width of you p tag in advance, it's a nice idea to put it inside a div and set the width of the p tag to 100%. In this case the cursor will not move to the end as p tags by default get 100% of the width of their container tags. But to find the exact width of the p tag (which is the length of it), you'd better use a java-script code like below:

<script>
    var text = document.getElementById("myParagraph").innerText;
    var textLength = text.trim().length;
    //Then set the length of your div which holds the p tag equal to textLength considering the number of pixel each character takes in your chosen font-size
</script>

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15213

In order to avoid your problem, you need to set flex rules for the parent .pcb-text, and also, in keyframes, change it to the transition - from{} and to{}.

.pcb-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pcb-text p {
  font-size: 60px;
  animation: typing 3s steps(56), blink-caret 0.85s step-end infinite;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  border-right: .12em solid orange;
}



@keyframes typing {
  from { 
  width: 0; 
  }
  to { 
  width: 100%; 
  }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
<div class="pcb-text">
  <div class="text-center">
    <p>Physics, Chemistry, Biology.</p>
  </div>
</div>

Upvotes: 1

Mister PiPo
Mister PiPo

Reputation: 43

This would be the effect with JS

<!DOCTYPE html>
<html>
<body>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>
var i = 0;
var txt = 'Physics, Chemistry, Biology.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

</body>
</html>

To call the effect when your element is visible you can do something like that with jQuery:

var has_fired;
$("html").on("scroll", function () {
    if (!has_fired && $(this).scrollTop() >= $("#yourElement").offset().top) {
        typeWriter()
        has_fired = true; // use this if only want fired once
    }
});

If you want to use a CSS animation you can check out: https://css-tricks.com/snippets/css/typewriter-effect/

You can start the CSS animation just like the JS animation

var has_fired;
$("html").on("scroll", function () {
    if (!has_fired && $(this).scrollTop() >= $("#yourElement").offset().top) {
        $("#yourElement").addClass("animation-class");
        has_fired = true; // use this if only want fired once
    }
});

Upvotes: 1

Related Questions