How to make a Christmas animation in HTML
Code of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HAPPY NEW YEAR</title>
<style>
body {
background-color: #424f6f;
}
h1 {
color: white;
margin-top: 250px;
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="messageLabel"></h1>
<script>
var message = "Happy New Year !!!";
var msgCount = 0;
var blinkCount = 0;
var blinkFlg = 0;
var timer1, timer2;
var messageLabel = document.getElementById("messageLabel");
function textFunc() {
messageLabel.innerHTML = message.substring(0, msgCount);
if (msgCount == message.length) {
clearInterval(timer1);
timer2 = setInterval("blinkFunc()", 200);
} else {
msgCount++;
}
}
function blinkFunc() {
if (blinkCount < 6) {
if (blinkFlg == 0) {
messageLabel.innerHTML = message;
blinkFlg = 1;
blinkCount++;
} else {
messageLabel.innerHTML = "";
blinkFlg = 0;
}
} else {
clearInterval(timer2);
}
}
timer1 = setInterval("textFunc()", 150);
</script>
</body>
</html>
Comentarios
Publicar un comentario