How to create animated text in HTML with CSS and little JavaScript
How to animated HTML text with CSS and JavaScript in easy way
CSS
DHTML
html
Javascript
- asked 6 years ago
- B Butts
2Answer
This typing text effect usually found in game or movie cut scenes to reveal text on screen.
//HTML Code//
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Text typing thingamy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="word"></div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
//CSS Code//
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
html {
height: 100%;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
background-color: #55A4E9;
}
.word {
margin: auto;
color: white;
font: 700 normal 4em/1.5 'Montserrat',sans-serif;
text-shadow: 1px 2px #288ce3, 2px 4px #288ce3, 3px 6px #288ce3, 4px 8px #288ce3, 5px 10px #288ce3, 6px 12px #288ce3, 7px 14px #288ce3, 8px 16px #288ce3, 9px 18px #288ce3, 10px 20px #288ce3;
}
//js Code//
var
words = ['hey I Am B Butts','I used to Animated CSS','I also Work on This',],
part,
i = 0,
offset = 0,
len = words.length,
forwards = true,
skip_count = 0,
skip_delay = 5,
speed = 100;
var wordflick = function(){
setInterval(function(){
if (forwards) {
if(offset >= words[i].length){
skip_count;
if (skip_count == skip_delay) {
forwards = false;
skip_count = 0;
}
}
}
else {
if(offset == 0){
forwards = true;
i ;
offset = 0;
if(i >= len){
i=0;
}
}
}
part = words[i].substr(0, offset);
if (skip_count == 0) {
if (forwards) {
offset ;
}
else {
offset--;
}
}
$('.word').text(part);
},speed);
};
$(document).ready(function(){
wordflick();
});
- answered 6 years ago
- B Butts
Try this Auto Typing Text, This animation like auto typing
//HTML Code//
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Auto Typing Text (function)</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="type-js headline">
<h1 class="text-js">Hello Friends, I'm typing!</h1>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
//CSS Code//
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400");
.text-js {
opacity: 0;
}
.cursor {
display: block;
position: absolute;
height: 100%;
top: 0;
right: -5px;
width: 2px;
/* Change colour of Cursor Here */
background-color: white;
z-index: 1;
-webkit-animation: flash 0.5s none infinite alternate;
animation: flash 0.5s none infinite alternate;
}
@-webkit-keyframes flash {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes flash {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
* {
margin: 0;
padding: 0;
boz-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
background:#000;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.headline {
margin: 20px;
color: white;
font-size: 32px;
text-align: center;
}
.headline h1 {
letter-spacing: 1.6px;
font-weight: 300;
}
//javascript Code//
function autoType(elementClass, typingSpeed){
var thhis = $(elementClass);
thhis.css({
"position": "relative",
"display": "inline-block"
});
thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>');
thhis = thhis.find(".text-js");
var text = thhis.text().trim().split('');
var amntOfChars = text.length;
var newString = "";
thhis.text("|");
setTimeout(function(){
thhis.css("opacity",1);
thhis.prev().removeAttr("style");
thhis.text("");
for(var i = 0; i < amntOfChars; i++){
(function(i,char){
setTimeout(function() {
newString += char;
thhis.text(newString);
},i*typingSpeed);
})(i+1,text[i]);
}
},1500);
}
$(document).ready(function(){
// Now to start autoTyping just call the autoType function with the
// class of outer div
// The second paramter is the speed between each letter is typed.
autoType(".type-js",200);
});
- answered 6 years ago
- Community wiki
Your Answer