javascript text auto writing
/*
Creating a Typing Effect
-----------------------------
1) Add HTML: */
<p id="demo"></p>
<button onclick="typeWriter()">Click me</button>
/*
2) Add JavaScript: */
var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}text animation css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div><p>you can add text in this box or anithing else like a pictrue</p></div>
</body>
</html>which text is used to create text animations in html
<!-- For up Direction-->
<marquee width="60%" direction="up" height="100px"></marquee>
<!-- For Down Direction-->
<marquee width="60%" direction="down" height="100px"></marquee>
<!-- For Right Direction-->
<marquee width="60%" direction="right" height="100px"></marquee>
<!-- For Left Direction-->
<marquee width="60%" direction="left" height="100px"></marquee>text animation css
<h1 class="ml6">
<span class="text-wrapper">
<span class="letters">Beautiful Questions</span>
</span>
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>text animation css
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 50 * i
}).add({
targets: '.ml6',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});text animation css
.ml6 {
position: relative;
font-weight: 900;
font-size: 3.3em;
}
.ml6 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.2em;
padding-right: 0.05em;
padding-bottom: 0.1em;
overflow: hidden;
}
.ml6 .letter {
display: inline-block;
line-height: 1em;
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
