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>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
});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
