Hello Guys U All Wishing Merry Christmas from Maa Blogger
HTML
<!DOCTYPE html>
<head>
<title> Christmas </title>
<link rel="stylesheet" type="text/css" href=" style1.css">
</head>
<body>
<section>
<img src="bg.jpg" id="bg">
<img src="moon.png" id="moon">
<img src="cloud1.png" id="cloud1">
<img src="cloud2.png" id="cloud2">
<img src="santa.png" id="santa">
<div id="tree"></div>
<h2 id="text"> Happy Christmas</h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script>
gsap.to('#moon',{
scrollTrigger: {
scrub: 1
},
scale: 1.1,
})
gsap.to('#bg',{
scrollTrigger: {
scrub: 1
},
scale: 1.1,
})
gsap.to('#santa',{
scrollTrigger: {
scrub: 1
},
scale: 1.5,
y:-500,
x:2200
})
gsap.to('#tree',{
scrollTrigger: {
scrub: 1
},
x: -500
})
gsap.to('#cloud1',{
scrollTrigger: {
scrub: 1
},
x: -200
})
gsap.to('#cloud2',{
scrollTrigger: {
scrub: 1
},
x: 300
})
gsap.to('#text',{
scrollTrigger: {
scrub: 1
},
y: -1000
})
</script>
</section>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body
{
background: url(https://image.freepik.com/free-photo/christmas-table-blurred-lights-background-wood-desk-focus-xmas-wooden-plank-blur-home-room_70216-674.jpg);
height: 200vh;
}
section
{
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section::after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f11;
mix-blend-mode: color-dodge;
}
section img#bg
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section img#cloud1
{
position: absolute;
top: 100px;
left: 50px;
max-width: 600px;
z-index: 2;
}
section img#cloud2
{
position: absolute;
top: 200px;
left: 50px;
max-width: 600px;
z-index: 2;
}
section img#santa
{
position: absolute;
bottom: 50px;
left: -600px;
z-index: 1;
max-width: 600px;
transform: scale(0.5);
}
section #tree
{
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 260px;
background: url(tree.png);
background-position-y: 266px;
z-index: 10;
}
section #text{
position: absolute;
bottom: -400px;
left: 0;
width: 100%;
text-align: center;
color: #ff2;
font-size: 7em;
z-index: 9;
}
Posts
43 Comments
Merry Christmas
ReplyDeleteWonderful
ReplyDeleteExcellent
ReplyDeletePerfect 👌
ReplyDeleteWonderful 🙏😊🙏😊🙏
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteAttractive
ReplyDeleteWonderful
ReplyDeleteSuperb
ReplyDeleteAwesome
ReplyDeleteVery Nice
ReplyDeleteVery Nice
ReplyDeleteGreat
ReplyDeleteNice Work Guys
ReplyDeleteNicely done
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteWow wonderful
ReplyDeleteNice
ReplyDeletePerfect
ReplyDeletenice
Perfect
ReplyDeletePerfect
ReplyDeleteMerry Christmas
Nice
ReplyDeletePerfect
Merry Christmas
Wonderful
ReplyDeletePerfect
Merry Christmas
Perfect
ReplyDeleteMerry Christmas
Superb
ReplyDeletePerfect
Merry Christmas
Wonderful
ReplyDeletePerfect
Merry Christmas
Perfect 👌
ReplyDeleteMerry Christmas
Perfect
ReplyDeleteMerry Christmas
Nice
ReplyDeletePerfect
Merry Christmas
Awesome
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeleteWonderful 🙏😊🙏😊🙏
ReplyDeleteSo sure
ReplyDeleteAmazing creation
ReplyDeleteWow Great
ReplyDeleteSuperb
ReplyDeleteWow nice looking
ReplyDeleteWonderful
ReplyDeleteAttractive
ReplyDeleteAttractive
ReplyDelete