Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Makar Sankranti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- title block starts here -->
<div class="title-container">
<h1 class="title-text">
Happy Makar Sankranti
</h1>
<h4 class="desc-text" id="description">
I wish you soar high just like the kites.
</h4>
</div>
<!-- title block ends here -->
<!-- day block starts here -->
<div id="day">
<canvas id="canvas" width="800" height="450"></canvas>
<p class="note-text">
Note: Move the cursor inside the virtual sky and enjoy the kite flying.
</p>
</div>
<!-- day block ends here -->
<!-- night block starts here -->
<div id="night">
<div class="container">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="star5"></div>
<div class="star6"></div>
<div class="star7"></div>
<div class="star8"></div>
<div class="lantern-one">
<div class="ellipse"></div>
<div class="light"></div>
<div class="left"></div>
<div class="right"></div>
<div class="middle2"></div>
</div>
<div class="lantern-two">
<div class="ellipse"></div>
<div class="light"></div>
<div class="left"></div>
<div class="right"></div>
<div class="middle2"></div>
</div>
<div class="lantern-three">
<div class="ellipse"></div>
<div class="light"></div>
<div class="left"></div>
<div class="right"></div>
<div class="middle2"></div>
</div>
<div class="lantern-four">
<div class="ellipse"></div>
<div class="light"></div>
<div class="left"></div>
<div class="right"></div>
<div class="middle2"></div>
</div>
<div class="lantern-five">
<div class="ellipse"></div>
<div class="light"></div>
<div class="left"></div>
<div class="right"></div>
<div class="middle2"></div>
</div>
</div>
</div>
<!-- night block ends here -->
<!-- script block start here -->
<script>
var description = document.getElementById("description");
var day = document.getElementById("day");
var night = document.getElementById("night");
var isDay = true;
day.style.display = 'block';
night.style.display = 'none';
setInterval(
function () {
isDay = !isDay;
day.style.display = isDay ? 'block' : 'none';
night.style.display = isDay ? 'none' : 'flex';
description.innerHTML = isDay
? 'I wish you soar high just like the kites.'
: 'I wish you soar high just like a sky lantern.';
}, 30000
);
</script>
<script src="index.js"></script>
<!-- script block ends here -->
</body>
</html>Below is the css code for this video.
style.css
@import url('https://fonts.googleapis.com/css2?family=Yuji+Mai&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yuji+Boku&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
position: relative;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(127, 127, 127) 100%);
}
.title-container {
position: absolute;
text-align: center;
justify-content: center;
width: 100%;
}
.title-text {
background: 50% 100%/50% 50% no-repeat radial-gradient(ellipse at bottom, #545454, transparent, transparent);
-webkit-background-clip: text;
color: transparent;
animation: titleAnim 5s ease-in-out forwards;
font-family: 'Yuji Mai', serif;
margin-top: 2%;
font-size: 3rem;
}
@keyframes titleAnim {
75% {
letter-spacing: 7.5px;
}
100% {
background-size: 250% 250%;
}
}
.desc-text {
margin-top: 1%;
text-shadow: -3px -3px 9px #ce2029, 5px 5px 15px #000080;
color: #fdfbf9;
font-family: 'Yuji Boku', serif;
font-size: 1.5rem;
animation: descAnim 15s linear infinite;
}
@keyframes descAnim {
0% {
text-shadow: -3px -3px 9px #ce2029, 5px 5px 15px #000080;
}
25% {
text-shadow: 0 0 10px #545454;
}
50% {
text-shadow: -5px -5px 15px #000080, 3px 3px 9px #ce2029;
}
75% {
text-shadow: 0 0 10px #545454;
}
100% {
text-shadow: -3px -3px 9px #ce2029, 5px 5px 15px #000080;
}
}
canvas {
margin: 175px 0 0 -400px;
box-shadow: 0 0 10px #104;
position: relative;
top: 50%;
left: 50%;
}
.note-text {
position: absolute;
width: 100%;
text-align: center;
color: #545454;
font-family: 'Yuji Syuku', serif;
letter-spacing: 1px;
}
#night {
height: 100vh;
display: flex;
justify-content: center;
text-align: center;
background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(127, 127, 127) 100%);
}
.container {
width: 75%;
height: 70%;
position: relative;
background: linear-gradient(180deg, rgb(42, 42, 53) 0%, rgb(0, 51, 102) 100%);
box-shadow: 30px 30px 20px rgba(0, 0, 0, 0.35), 20px 20px 30px rgba(0, 0, 0, 0.35);
border-radius: 50px;
overflow: hidden;
margin-top: 11%;
}
.star1 {
background: #ffffff;
height: 5px;
width: 5px;
position: absolute;
top: 40%;
left: 8%;
border-radius: 50%;
opacity: 0.5;
animation: glowStarAnim 2s infinite alternate linear 0.5s;
}
.star2 {
background: #ffffff;
height: 5px;
width: 5px;
position: absolute;
top: 20%;
left: 20%;
border-radius: 50%;
opacity: 0.5;
animation: glowStarAnim 2s infinite alternate linear 0.25s;
}
.star3 {
background: #ffffff;
height: 5px;
width: 5px;
position: absolute;
top: 5%;
left: 28%;
border-radius: 50%;
opacity: 0.5;
animation: glowStarAnim 2s infinite alternate linear 1s;
}
.star4 {
background: #ffffff;
height: 5px;
width: 5px;
position: absolute;
top: 8%;
left: 50%;
border-radius: 50%;
opacity: 0.5;
animation: glowStarAnim 2s infinite alternate linear 0.75s;
}
.star5 {
background: #ffffff;
height: 5px;
width: 5px;
position: absolute;
top: 26%;
left: 68%;
border-radius: 50%;
opacity: 0.5;
animation: glowStarAnim 2s infinite alternate linear 0.25s;
}
.star6 {
background: #ffffff;
height: 5px;
width: 5px;
position: absolute;
top: 11%;
left: 80%;
border-radius: 50%;
opacity: 0.5;
animation: glowStarAnim 2s infinite alternate linear 0.5s;
}
.star7 {
background: #ffffff;
height: 5px;
width: 5px;
position: absolute;
top: 30%;
left: 90%;
border-radius: 50%;
opacity: 0.5;
animation: glowStarAnim 2s infinite alternate linear 0.75s;
}
.star8 {
background: #ffffff;
height: 5px;
width: 5px;
position: absolute;
top: 50%;
left: 48%;
border-radius: 50%;
opacity: 0.5;
animation: glowStarAnim 2s infinite alternate linear 1s;
}
@keyframes glowStarAnim {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.lantern-one {
position: absolute;
top: 10%;
display: flex;
perspective: 500px;
height: 150px;
width: 180px;
animation: lanternAnim1 4s linear infinite;
}
.lantern-two {
position: absolute;
top: 10%;
display: flex;
perspective: 500px;
height: 150px;
width: 180px;
animation: lanternAnim2 8s linear infinite;
}
.lantern-three {
position: absolute;
top: 10%;
display: flex;
perspective: 500px;
height: 150px;
width: 180px;
animation: lanternAnim3 12s linear infinite;
}
.lantern-four {
position: absolute;
top: 10%;
display: flex;
perspective: 500px;
height: 150px;
width: 180px;
animation: lanternAnim4 10s linear infinite;
}
.lantern-five {
position: absolute;
top: 10%;
display: flex;
perspective: 500px;
height: 150px;
width: 180px;
animation: lanternAnim5 6s linear infinite;
}
.ellipse {
clip-path: ellipse(25% 44% at 50% 50%);
background: linear-gradient(to right, #d1913c, #ffd194);
height: 140px;
width: 140px;
position: absolute;
top: 60%;
left: 21%;
transform: rotate(90deg) skew(10deg, -25deg);
}
.light {
background: #ffffff;
height: 50px;
width: 50px;
top: 85%;
left: 45%;
position: absolute;
border-radius: 75%;
}
.right {
position: absolute;
left: 60%;
background: linear-gradient(to right, #fd7830, #9c0407);
height: 160px;
width: 100px;
transform: rotateY(405deg) translateX(-14px) skew(-10deg, 10deg);
}
.left {
position: absolute;
background: linear-gradient(to right, #fd7830, #9c0407);
height: 160px;
width: 100px;
transform: rotateY(130deg) translateX(-20px) scaleY(0.98) skew(-10deg, 10deg);
}
.middle2 {
clip-path: polygon(50% 100%, 25% 0, 75% 0);
height: 180px;
width: 100px;
position: absolute;
top: -10%;
left: 31%;
background: linear-gradient(to bottom, #fd7830, #fffe93);
}
@keyframes lanternAnim1 {
0% {
transform: translate(0px, 400px) rotate(0deg) scale(0.2);
}
25% {
transform: translate(5px, 200px) rotate(-5deg) scale(0.2);
}
50% {
transform: translate(0px, 100px) rotate(0deg) scale(0.2);
}
75% {
transform: translate(5px, 0px) rotate(5deg) scale(0.2);
}
100% {
transform: translate(0px, -100%) rotate(0deg) scale(0.2);
}
}
@keyframes lanternAnim2 {
0% {
transform: translate(225px, 400px) rotate(0deg) scale(0.4);
}
25% {
transform: translate(230px, 200px) rotate(-5deg) scale(0.4);
}
50% {
transform: translate(225px, 100px) rotate(0deg) scale(0.4);
}
75% {
transform: translate(230px, 0px) rotate(5deg) scale(0.4);
}
100% {
transform: translate(225px, -100%) rotate(0deg) scale(0.4);
}
}
@keyframes lanternAnim3 {
0% {
transform: translate(450px, 400px) rotate(0deg) scale(0.6);
}
25% {
transform: translate(455px, 200px) rotate(-5deg) scale(0.6);
}
50% {
transform: translate(450px, 100px) rotate(0deg) scale(0.6);
}
75% {
transform: translate(455px, 0px) rotate(5deg) scale(0.6);
}
100% {
transform: translate(450px, -100%) rotate(0deg) scale(0.6);
}
}
@keyframes lanternAnim4 {
0% {
transform: translate(675px, 400px) rotate(0deg) scale(0.5);
}
25% {
transform: translate(680px, 200px) rotate(-5deg) scale(0.5);
}
50% {
transform: translate(675px, 100px) rotate(0deg) scale(0.5);
}
75% {
transform: translate(680px, 0px) rotate(5deg) scale(0.5);
}
100% {
transform: translate(675px, -100%) rotate(0deg) scale(0.5);
}
}
@keyframes lanternAnim5 {
0% {
transform: translate(900px, 400px) rotate(0deg) scale(0.3);
}
25% {
transform: translate(905px, 200px) rotate(-5deg) scale(0.3);
}
50% {
transform: translate(900px, 100px) rotate(0deg) scale(0.3);
}
75% {
transform: translate(905px, 0px) rotate(5deg) scale(0.3);
}
100% {
transform: translate(900px, -100%) rotate(0deg) scale(0.3);
}
}Below is the javascript code for this video.
index.js
(function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d"),
mX,
mXOld = 0,
mY,
mYOld = 0,
c1Origin = 500,
randomOne = Math.random() * 50,
randomTwo = Math.random() * 50,
randomThree = Math.random() * 50,
randomFour = Math.random() * 50,
randomFive = Math.random() * 50,
i = 0;
canvas.onmousemove = function (e) {
mX = e.clientX - canvas.offsetLeft;
mY = e.clientY - canvas.offsetTop;
}
setInterval(draw, 32);
function draw() {
var pSize = 50,
mXDif = mX - mXOld,
cloudMovingSpeed = 1;
ctx.fillStyle = 'rgba(135, 206, 235, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
c1Origin -= cloudMovingSpeed;
for (c = 1; c <= 5; c++) {
var rs = 20 * c;
if (c === 1) {
var rX = randomOne;
var rY = randomOne;
} else if (c === 2) {
var rX = randomTwo * 2;
var rY = -randomTwo * 2;
} else if (c === 3) {
var rX = -randomThree;
var rY = randomThree;
} else if (c === 4) {
var rX = randomFour * 2;
var rY = -randomFour * 2;
} else if (c === 5) {
var rX = -randomFive;
var rY = -randomFive;
}
ctx.beginPath();
ctx.moveTo(c1Origin + rX - cloudMovingSpeed, 200 + rY);
ctx.lineTo((c1Origin + rX + 40 + (rs / 2)) - cloudMovingSpeed, 160 + rY - (rs / 2));
ctx.lineTo((c1Origin + rX + 80 + rs) - cloudMovingSpeed, 200 + rY);
ctx.lineTo((c1Origin + rX + 40 + (rs / 2)) - cloudMovingSpeed, 240 + rY + (rs / 2));
ctx.closePath();
ctx.fill();
if (((c1Origin + rX + 80 + rs) - cloudMovingSpeed) <= -100) {
c1Origin = 900;
}
}
var grd = ctx.createRadialGradient(0, 0, 1, 0, 0, 300);
grd.addColorStop(0, 'rgba(255, 255, 255, 0.6)');
grd.addColorStop(1, 'rgba(173, 216, 230, 0)');
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 300);
ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)'; // thread of kite
ctx.beginPath();
ctx.moveTo(mX, mY);
ctx.bezierCurveTo(mX + 50, mY + 200, mX + 100, canvas.height + 100, canvas.width + 100, canvas.height + 100);
ctx.stroke();
ctx.translate(mX, mY);
if (mXDif >= 45) {
mXDif = 45;
}
if (mXDif <= -45) {
mXDif = -45;
}
ctx.rotate((2 * mXDif) * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, 0 - pSize);
ctx.lineTo(0 + pSize, 0);
ctx.lineTo(0, 0 + pSize * 2);
ctx.lineTo(0 - pSize, 0);
ctx.closePath();
ctx.strokeStyle = 'rgba(178, 172, 136, 0.9)'; // outline of kite
ctx.fillStyle = 'rgba(248, 24, 148, 0.8)'; // body of kite
ctx.shadowBlur = 5;
ctx.shadowColor = 'rgba(255, 255, 255, 1)';
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.fillStyle = 'rgba(255,255,255,.3)';
mXOld = mX;
mYOld = mY;
}
}
})();Thanks for visiting