Typing Effect || typing effect css, typing effect javascript

Typing Effect, Typewriter animation

If you are looking for a typewriter animation or typing effect for your webpage, you can learn by watching the tutorial video or copy the source code and use it directly.

Source Code

1. HTML

<div id="base">
  <div class="animate0 initial">Initial</div>
</div>

This code creates a simple HTML structure using div elements. The outermost div has an id of "base". Inside it, there is another div element with a class of "animate0 initial". The text "Initial" is placed inside this inner div.

The id "base" can be used to target and manipulate this specific div element using CSS or JavaScript. The class "animate0 initial" can also be used to apply specific styling or animation effects to this div element. The text "Initial" will be displayed as the content of this div when the webpage is loaded. Overall, this code sets up a basic HTML structure with a div element and specifies some initial content and styling for it.

2. CSS

STEP-1

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: monospace;
}

This code tells the browser to display all elements in the document with no margin or padding, and with a monospaced font. This can be useful for creating a consistent look and feel for all elements on a page, or for making sure that text is displayed in a specific font.

STEP-2

body{
  color: white;
  background-color: black;
}

The first line of the code, color: white, sets the color of the text in the body element to white. The second line, background-color: black, sets the background color of the body element to black.

So, if you were to put this code in an HTML document, the page would have white text on a black background.

STEP-3

#base{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Height: The height property sets the height of an element. The value 100vh means that the height of the element will be 100% of the viewport height.

Display: The display property determines how an element is displayed. The value flex means that the element will be displayed as a flex container.

Align-items: The align-items property determines how the items in a flex container are aligned vertically. The value center means that the items will be aligned to the center vertically.

Justify-content: The justify-content property determines how the content of a flex container is justified horizontally. The value center means that the content will be justified to the center horizontally.

STEP-4

.initial{
  font-size: 2em;
  white-space: nowrap;
  overflow-x: hidden;
  border-right: 2px solid red;
  animation: 
  blink 0.8s linear infinite alternate;
}

The font size will be set to 2em.

The white-space will be set to nowrap, which means that the text will not wrap to the next line.

The overflow-x will be set to hidden, which means that the text will not overflow the element horizontally.

A 2px red border will be added to the right side of the element.

An animation called blink will be applied to the element. The animation will blink the text every 0.8 seconds, infinitely, and will alternate between the two states.

STEP-5

.animate0{
  width: 7ch;
  animation:
  blink 0.8s linear infinite alternate,
  typing0 1.5s steps(7) alternate 2 forwards;
}

.animate0 - This is the selector that will be used to apply the animation to an element.

width: 7ch - This sets the width of the element to 7 characters.

blink - This part of the animation will cause the element to fade in and out every 0.8 seconds. The animation will repeat indefinitely and will alternate between the two states.

typing0 - This part of the animation will cause the element to type out a message, character by character. The animation will take 1.5 seconds to complete and will repeat twice. The message will be typed out in steps of 7 characters, meaning that each step will type out 7 characters. The animation will start from the beginning after the second time it completes.

STEP-6

.animate1{
  width: 5ch;
  animation:
  blink 0.8s linear infinite alternate,
  typing1 1.2s steps(5) alternate 2 forwards;
}

.animate1 - This is the selector that will be used to apply the animation to the element.

width: 5ch - This property sets the width of the element to 5 characters.

animation: - This property defines the two animations that will be applied to the element.

blink 0.8s linear infinite alternate - This animation will cause the element to fade in and out every 0.8 seconds. The animation will repeat infinitely and will alternate between the two states.

typing1 1.2s steps(5) alternate 2 forwards - This animation will cause the element to type out the content of the element, one character at a time, over a period of 1.2 seconds. The animation will repeat twice and will start over from the beginning after the second time.

STEP-7

.animate2{
  width: 6ch;
  animation:
  blink 0.8s linear infinite alternate,
  typing2 1.5s steps(6) alternate 2 forwards;
}

.animate2 is the selector that will be used to apply the animation to the element.

width: 6ch sets the width of the element to 6 characters.

animation: is the property that defines the animations that will be applied to the element.

blink 0.8s linear infinite alternate is the first animation. It will make the element disappear and reappear every 0.8 seconds. This animation will repeat indefinitely and will alternate between the two states.

typing2 1.5s steps(6) alternate 2 forwards is the second animation. It will make the element type out a character every 0.25 seconds. This animation will repeat 6 times and will alternate between the two states. The second animation will only start after the first animation has finished.

STEP-8

.animate3{
  width: 5ch;
  animation:
  blink 0.8s linear infinite alternate,
  typing3 1.2s steps(5) alternate 2 forwards;
}

The blink animation will cause the element to fade in and out every 0.8 seconds. The animation will repeat infinitely and will alternate between the two states.

The typing3 animation will cause the element to type out the letter "3" five times. The animation will take 1.2 seconds to complete and will alternate between the two states. The animation will also start playing two seconds after the element is loaded.

The alternate keyword in both animations tells the browser to play the animation in reverse after each iteration. The steps(5) keyword in the typing3 animation tells the browser to break the animation into five steps. This will cause the letter "3" to appear one character at a time.

STEP-9

@keyframes blink{
  50%{
  border-right-color: transparent;
  }
}

The code defines a CSS keyframe animation called blink.

The animation has one keyframe, which is at 50% of the animation's duration.

At this keyframe, the border-right-color property is set to transparent.

This means that the right border of the element will be invisible at this point in the animation.

In other words, this code will make an element's right border disappear for half of the animation's duration. This can be used to create a blinking effect.

STEP-10

@keyframes typing0 {
  0%{
  width: 0ch;
  }
  80%{
  width: 7ch;
  }
}

This code defines a CSS animation called typing0. The animation has two keyframes:

The first keyframe, at 0%, sets the width of the element to 0ch.

The second keyframe, at 80%, sets the width of the element to 7ch.

This means that the element will start out with a width of 0ch and then gradually increase its width until it reaches 7ch. The animation will then loop back to the first keyframe and start over again.

The ch unit is a CSS unit that represents the width of a character. The exact width of a character will vary depending on the font that is used.

STEP-11

@keyframes typing1 {
  0%{
  width: 0ch;
  }
  80%{
  width: 5ch;
  }
}

he animation will start with the width of the element being 0 characters wide, and then it will gradually increase to 5 characters wide over the course of 80% of the animation.

The code is divided into two sections, each of which is called a "keyframe." The first keyframe specifies that the width of the element should be 0 characters wide at the beginning of the animation. The second keyframe specifies that the width of the element should be 5 characters wide at 80% of the animation.

The percentage values in the code refer to the progress of the animation. For example, 0% means the beginning of the animation, 100% means the end of the animation, and 80% means 80% of the way through the animation.

The @keyframes rule is used to define the timing and properties of an animation. This code will cause the element to gradually increase in width over the course of the animation, giving the appearance that the element is being typed.

STEP-12

@keyframes typing2 {
  0%{
  width: 0ch;
  }
  80%{
  width: 6ch;
  }
}

The animation will start with the width of the element set to 0 characters, and then gradually increase to 6 characters over the course of 80% of the animation.

STEP-13

@keyframes typing3 {
  0%{
  width: 0ch;
  }
  80%{
  width: 5ch;
  }
}

This code defines a CSS animation named typing3. The animation has two keyframes:

The first keyframe, at 0%, sets the width of the element to 0 characters.

The second keyframe, at 80%, sets the width of the element to 5 characters.

This means that the element will start out with a width of 0 characters, and then gradually increase in width until it reaches 5 characters at the end of the animation.

The ch unit in the code refers to a character width. This means that the width of the element will increase by 5 characters at the end of the animation.

3. JavaScript

<script>
 var list = ['First', 'Second', 'Third', '👍🏻'];
 const textbox = document.querySelector('.animate0');
 var i = 0;
 textbox.onanimationend = () => {
  textbox.innerText = list[i];
  if(i < list.length){
   textbox.classList.remove('animate'+i);
   textbox.classList.add('animate'+(i+1));
   ++i;
  }
 }
</script>

The code first creates a list of four strings: 'First', 'Second', 'Third', and '👍🏻'. Then, it gets the <div> element with the class .animate0 and stores it in a variable called textbox. The variable i is initialized to 0.

The onanimationend event handler is attached to the textbox element. This event handler will be called when the textbox element finishes animating. The event handler changes the text content of the textbox element to the string at index i in the list, and then increments i. If i is less than the length of the list, the event handler then removes the animate class with the value of i from the textbox element, and adds the animate class with the value of i + 1 to the textbox element.

This code will cause the textbox element to animate through the four strings in the list, one at a time. The animation will end when the textbox element reaches the last string in the list.

---END---

Swapnil's Lab

Search This Blog