वेबसाइट पर उड़ते हुए बैलून: एक आकर्षक और जीवंत अनुभव
वेबसाइट जगत में रोजाना एक से बढ़कर एक डिजाइन लोगों को आकर्षित करती है यदि आपकी भी एक वेबसाइट है और आप भी सामान बेचते हैं तो आपको भी अपनी वेबसाइट पर किसी खास प्रोग्राम या त्योहार पर अपनी वेबसाइट पर अच्छे बैनर या डिजाइन लगाना अच्छा लगता होगा।
इसी तरह हमने यहां एक कोड दिया है जिसे आप अपनी वेबसाइट में कहीं पर भी लगाकर उड़ते हुए गुब्बारे दिखा सकते हैं जिससे आपके ग्राहक बहुत उत्सुक होंगे इस कोड को आप अपनी वेबसाइट पर किसी भी जगह लगाकर वेबसाइट के अंदर बलुन को उड़ते हुए दिखा सकते हैं।
नीचे दो प्रकार के कोड दिए गए हैं, आप अपनी इच्छानुसार किसी भी कोड का उपयोग कर सकते हैं।
code no 1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Balloons</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.header {
position: relative;
height: 100px;
background-color: #333;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
z-index: 10;
}
.balloon {
position: absolute;
width: 30px;
height: 40px;
background-color: red;
border-radius: 50%;
animation: fly 5s linear infinite;
}
.balloon::before {
content: '';
position: absolute;
width: 2px;
height: 20px;
background: white;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
@keyframes fly {
0% {
transform: translateY(100vh) translateX(0);
opacity: 1;
}
100% {
transform: translateY(-150px) translateX(calc(100vw - 50px));
opacity: 0;
}
}
</style>
</head>
<body>
<div class="header">Happy New Year!</div>
<script>
function createBalloon() {
const balloon = document.createElement('div');
balloon.className = 'balloon';
balloon.style.left = Math.random() * 100 + 'vw';
balloon.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 60%)`;
document.body.appendChild(balloon);
setTimeout(() => balloon.remove(), 5000);
}
setInterval(createBalloon, 500);
</script>
</body>
</html>
code no 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>उड़ते हुए बैलून</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f0f8ff;
}
.balloon {
position: absolute;
width: 50px;
height: 70px;
background-color: #ff6347;
border-radius: 50%;
animation: float 10s infinite;
}
@keyframes float {
0% {
transform: translateY(100vh);
left: calc(100% * random());
}
100% {
transform: translateY(-100vh);
}
}
</style>
</head>
<body>
<script>
function randomPosition() {
return Math.random() * 100;
}
function createBalloon() {
const balloon = document.createElement('div');
balloon.classList.add('balloon');
balloon.style.left = randomPosition() + '%';
document.body.appendChild(balloon);
setTimeout(() => {
balloon.remove();
}, 10000);
}
setInterval(createBalloon, 1000);
</script>
</body>
</html>
Comments
Post a Comment