How to add typing text animation on blogger
Dhanjee Rider
The typing animation on a Blogger post can offer several benefits:
- Engagement: The dynamic nature of the typing animation can grab the reader's attention and encourage them to stay on the page longer.
- Visual Appeal: The animation adds visual interest to the content, making it more appealing and memorable.
- Emphasis: It can be used to highlight important information or key points within the post, drawing the reader's focus to specific sections.
- Storytelling: The animation can be used creatively to tell a story or present information in a narrative format, enhancing the overall storytelling experience.
- Modern and Trendy: Typing animations are popular in modern web design trends, giving your blog a contemporary and stylish look.
- User Experience: It enhances the user experience by creating a sense of interactivity and liveliness, making the content more enjoyable to read.
How to add typing animation on blogger
- Visit the blogger.com and open your blogger dashboard
- Now go to the layout section and add a widget below your header or u can choose any other place as you need
- Now copy these code and paste on html javascript gadget
- Save and see the changes on your website
- Congratulations ๐ you have added typing animation
- You can also customise the font size amd colour
<style> @import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #000;
color: #eee;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container p {
font-size: 3rem;
padding: 0.5rem;
font-weight: bold;
letter-spacing: 0.1rem;
text-align: center;
overflow: hidden;
}
.container p span.typed-text {
font-weight: normal;
color: #dd7732;
}
.container p span.cursor {
display: inline-block;
background-color: #ccc;
margin-left: 0.1rem;
width: 3px;
animation: blink 1s infinite;
}
.container p span.cursor.typing {
animation: none;
}
@keyframes blink {
0% { background-color: #ccc; }
49% { background-color: #ccc; }
50% { background-color: transparent; }
99% { background-color: transparent; }
100% { background-color: #ccc; }
}
</style>
<script>
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["Youtuber", "Web Designer", "Programer", "Developer"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if (charIndex < textArray[textArrayIndex].length) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
cursorSpan.classList.remove("typing");
setTimeout(erase, newTextDelay);
}
}
function erase() {
if (charIndex > 0) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
charIndex--;
setTimeout(erase, erasingDelay);
}
else {
cursorSpan.classList.remove("typing");
textArrayIndex++;
if(textArrayIndex>=textArray.length) textArrayIndex=0;
setTimeout(type, typingDelay + 1100);
}
}
document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
if(textArray.length) setTimeout(type, newTextDelay + 250);
});</script>
<div class="container">
<p>I am a <span class="typed-text"></span><span class="cursor"> </span></p>
</div>
Code for adding typing animation
Last word
In this post we will provided information about How to add typing text animation on blogger , If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
