Happy New year 2022 animation website Design with Full source code by jishaansinghal
JS CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
HTML CODE:
<section>
<img src="bg (2).jpg" id="bg">
<img src="cloud1 (1).png" id="cloud1">
<img src="cloud2 (1).png" id="cloud2">
<div id="tree"></div>
<div id="text"><img src="hp.png" alt=""></div>
</section>CSS CODE:
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #f00;
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: #f00;
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;
right: 50px;
max-width: 600px;
z-index: 2;
}
section img#santa{
position: absolute;
bottom: 50px;
left: -600px;
max-width: 600px;
z-index: 1;
transform: scale(.5);
}
section #tree{
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 266px;
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: #fff;
font-size: 6em;
z-index: 9;
}
</style>JS CODE:
<script>
gsap.to('#bg',{
scrollTrigger: {
scrub:1
},
scale:1.1,
})
gsap.to('#tree',{
scrollTrigger: {
scrub:1
},
x:-600
})
gsap.to('#cloud1',{
scrollTrigger: {
scrub:1
},
x:-200
})
gsap.to('#cloud2',{
scrollTrigger: {
scrub:1
},
x:300
})
gsap.to('#text',{
scrollTrigger: {
scrub:1
},
y:-580
})
</script>
KEYWORDS:
new year 2022, happy new year 2022, happy new year, 2022, how to, ad real tech, new year design, new year design in ms word, ms word tutorial, design new year 2022, adobe illustrator, illustrator, creative, trends, ui design, ইংরেজি নববর্ষের পোস্টার ডিজাইন plp, happy new year poster design, happy new year poster, happy new year bennar design pixellab, নতুন বছরের পোস্টার ডিজাইন, ইংরেজি নতুন বছরের ব্যানার ডিজাইন, happy new year poster design 2022, নতুন বছরের শুà¦েচ্ছা পোস্টার ডিজাইন, happy new year poster design plp file, happy new year poster design in pixellab, হ্যাপি নিউ ইয়ার, 2022 happy new year poster design, pixellab, free plp, android bangla tecnik, javascript, countdown timer, html, javascript for beginners, javascript tutorial, countdown, timer, new year countdown, new year countdown 2022, glassmorphism, glassmorphism css, glass effect html css, html5, css3, css, css effects, css glass effects, glass morphism, glass morphism effects, css glass morphism, #kpmusicstatus, happy new year 2022 whatsapp status video, happy new year 2022 status video, happy new year status video, happy new year 2022 status, happy new year 2022 whatsapp status, happy new year song, happy new year shayri, happy new year special whatsapp status, happy new year 2022 shayri status, happy new year 2022 songs, happy new year 2022 special status, happy new year new whatsapp status, happy new year whatsapp status video, kp, kp music status, how to make happy new year 2022 card online, how to make happy new year card online, new year card, how to make, how to make new year card, how to make happy new year greeting card, how to make happy new year card 2022, new year card ideas for friends, best new year card, new year card online, personalized happy new year card, happy new year 2022 photo, how to use canva, happy new year card, best happy new year card, happy new year card 2022, new year party decorations, new year decorations ideas, diy new year decoration idea 2022, happy new year 2022 countdown, happy new year 2022 song, happy new year 2022 dj song, new year, new year 2022 countdown, new year 2022 song, naya sal ka gana, naya sal 2022 ka gana, naya sal 2022 ka song, new year 2022 in sydney, 2022 kesa hoga, hindi news, omicron, omicron variant, omicron and 2022, happy new year 2022 wishing script, new year script, happy new year 2022 wishing website script, new year images, illustrator cc tutorial, graphic design tutorial, illustrator graphic design, graphic design illustrator, graphic design, 3d graphic design, infographic, infographic tutorial, infographic design illustrator, tutorial, illustrator tutorial, logo design illustrator, photoshop logo, photoshop tutorial, latest illustrator toturial, latest photoshop toturial, illustratorfor beginers, photoshop for begginers, illustrator for beginers, new year 2022 resolution funny video, fun editz, happy new year funny whatsapp status, happy new year memes, happy new year funny memes, boss gfx, new year 2022 wallpaper, new year 2022 poster design photoshop, new year 2022 card design photoshop, new year 2022 wallpaper photoshop, new year wallpaper photoshop, new year poster design photoshop, new year card design in photoshop, 2022 new year design, happy new year poster 2022, newyear2022wallpaper, 2021 wallpaper card poster design, new year 2022 poster design, new year 2022 photoshop tutorial, new year wallpaper 2022, create happy new year 2021, adobe, adobe illustrator tutorials, illustrator tutorials, 2022 design, 2022 graphic, poster design, background, 2022 background, adobe illustrator tutorial, stock vectors, golden shapes, how to design a background, 2022 poster, graphic designing, 2022 graphic trends, adobe illustrator cc, powerpoint presentation, new year banner design, new year 2022 slide design, powerpoint happy new year design, happy new year 2022 presentation, 2022 presentation, new year wish presentation, new year greetings, happy new year slide, happy new year 2022 slide, new year powerpoint presentation, 2020 recap, new year ppt template, new year pptx template, new year template download, hny2022, new year banner, design trends 2022, digital design, digital trends, graphic designer, ui ux, ui ux design, design user, experience, web design, web design 2022, business web, web design inspiration, web design trends 2022, web designer, web development, web-trends-2022, website website trends, website trends, trendsdesignhugger, digital design digital trends, gsfxmentor, design, web, media collage and mixing, mode dark, hugger, graphic, logo, 5 inspirational website designs for 2021, top 5 websites of 2021, best 5 websites of 2021, top 5 website designs, 5 websites for design inspiration, website design inspiration, top 5, ui/ux, ux design, caler, caler edwards, caleredwards, 5 webflow websites, 5 best web interactions, 5 amazing websites for design inspiration, best 5 websites,web design, web development, ui design, website design, trends, website, technology, ux design, web designer, web design trends 2021, web design trends, web design inspiration, become a graphic designer 2020, freelance web designer, graphic designer job, ran segall, web design business 2020, web design freelance, web design freelancer, web designer career, web design 2020, flux academy, design, html css website design, html website design, photoshop, css, css tutorial, ux, graphic designer, ui ux, ui ux design, digital trends, digital design, ui/ux, ui/ux design, design trends 2021, wordpress, bangla tutorial, responsive web design, website trends, caler, caler edwards, caleredwards, responsive website design, html and css, learning, computer science, easy tutorials, html css, how to make website usign html css, website design for beginners, create website using html and css, engineering, modern website design, latest website design, web, how to design web template in photoshop, 2018, 2021, 2022, css hover effects, hover, css image hover effect, css hover, hover effect, css effects, css 3d hover effects, css image hover effects, css animation, css3 hover effects, css 3d hover effect, css border hover, css3, css hover selector, advanced css hover, image hover effects with html and css, css div hover effects, css add hover effects, hover css, hover effects, css tutorials, css hover effects text, web developer, user experience, web design business, web flow, web design 2021, website ui design, user interface, 2021 trends, user interface design, uiux, website trends 2020, design trends, how to make a website, make a website, wordpress tutorial, wordpress website, how to make a wordpress website, how to create a website, wordpress tutorial for beginners, how to make a website using wordpress, web hosting, how to build a website, india, domain, wordpress basics, create a website, websitelearners, wordpress blog, designer, how to design a website, site map, making a site map, design a portfolio site, designing a website, website plan, web design process, design process, basic web design, web design (interest), web design bangla, free bangla tutorial, web design tutorial for beginners, web design bangla tutorial full, ওয়েব ডিজাইন টিউটোরিয়াল, বেসিক ওয়েব ডিজাইন, ফ্রিল্যান্সিং, আউটসোর্সিং, how to learn web design, web design photoshop, web design courses, web development tutorials for beginners, graphic design tutorial, freelancing tutorial, web design inspiration 2020, top 5 websites every graphic designer should visit, top 5 websites every web designer should visit, best online graphic design websites, best websites to learn graphic design, web design best practices 2020, web design trends in 2021, website design trends in 2021, website design trends 2021, website design trends, website trends 2021, website ui, ui, 5 inspirational website designs for 2021, top 5 websites of 2021, best 5 websites of 2021, top 5 website designs, 5 websites for design inspiration, website design inspiration, top 5, 5 webflow websites, 5 best web interactions, 5 amazing websites for design inspiration, best 5 websites, html and css website design, make website using html and css, craete website using html and css, complete website design, full website design, make resonsive website, html website, computer engineering, html tutorial, html coding, sohag360, sohag360 (bengali), web design trends 2019, web design examples, web design idea, cool web design, awesome web design, creative websites, creative web design, creative webpage, creative webpage design, creative webdesign ideas, innovative web design, innovative websites, beautiful website design, latest web design trends, website design ideas, minimalist web design, design trends 2019, web design trends 2020, adobe xd travel website design - tutorial, travel website landing page design with adobe xd, adobe xd travel website design, travel web design tutorial adobe xd, modern travel website tutorial adobe xd, adobe xd landing page design, adobe xd website design, adobe xd hero section design, travel hero section design, adobe xd, design a website in adobe xd, easy adobe xd tutorial, design trends 2022, design user, experience, web design 2022, business web, web design trends 2022, web-trends-2022, website website trends, trendsdesignhugger, digital design digital trends, gsfxmentor, media collage and mixing, mode dark, hugger, creative, graphic, logo, tutorial, gfx, top 10 websites for graphic designers, top 10 websites for graphic design jobs, html, codetheweb, code, learn, mac, windows, pc, google, flash, javascript, php, coda, ftp, client, editor, marketing, search, maker, business, advertising, free, traffic, chrome, page, firefox, software, engine, your, http, computer, using, create, google chrome (software), building, affiliate, content, social, search engine, tips, brusheezy, web design tutorials, how to make html and css website, how to make website using html and css, education, how to make responsive website, media query, css media query, responsive website css, web ui, web template design, way to technology, web template design in photoshop, web template design psd, template, grid system, 1170 grid system, bootstrap 1170 gs, responsive web template design in photoshop, photoshop 1170 grid system, professional web ui design, photoshop tutorial bangla, photoshop tutorial, web design tutorial
Comments
Post a Comment