Hello developers, today in this blog you will learn to create a Glassmorphism New Year Card Design with Confetti using HTML, CSS & JavaScript.
This card is made for wishing for the New Year. The glass effect had been used in this New Year card for wishing. The Glassmorphism is used to emphasize light or dark objects, placed on top of colorful backgrounds. Confetti means small pieces of colored paper traditionally thrown over a bride and bridegroom for function.
In this blog (Glassmorphism New Year Card Design with Confetti), there is a card at the center of the page with glassmorphism. A card contains, an image at the center of the card, when you hover over the card, the image will expand and occupy the whole card at the top of the card, and the text pop down the image. To celebrate the function of a new year we used confetti, where multiple color papers fall.
The source code of this Glassmorphism New Year Card Design with Confetti is given below, if you want the source code of this program, you can copy it. You can use this Glassmorphism New Year Card Design with Confetti code with your creativity and can take this product card to the next level.
Glassmorphism New Year Card Design with Confetti [Source Code]
To make this website (Glassmorphism New Year Card Design with Confetti), you need to create three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap');
body {
background: #333;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Roboto Slab', serif;
overflow: hidden;
}
.card {
height: 300px;
width: 330px;
padding: 6px;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
overflow: hidden
}
.card .content .image {
width: 150px;
height: 150px;
top: 0;
left: 0;
transition: 1s
}
.card .content .image img {
width: 100%;
height: 100%;
transition: all 3s;
border-radius: 50%;
transition: all 0.5s;
object-fit: cover
}
.card:hover .content .image img {
border-radius: 0%
}
.card:hover .image {
width: 100%;
height: 240px;
position: absolute;
transition: all 1s;
animation: image 2s
}
@keyframes image {
from {
top: 60px;
left: 30%
}
to {
top: 0px
}
}
.user-content {
margin-top: 10px
}
.user-content h3 {
margin-top: -20px;
text-align: center;
transition: all 1s;
transition-delay: 2s;
font-size: 22px;
letter-spacing: 3px;
position: absolute;
left: 50%;
transform: translate(-50%, 50%);
z-index: -10;
font-family: 'Roboto Slab', serif;
}
.card:hover .user-content h3 {
margin-top: 60px
}
.credit{
text-align: center;
color: #fff;
margin-top: 30px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color: #00C9A7;
font-weight: bold;
}
class Progress {
constructor(param = {}) {
this.timestamp = null;
this.duration = param.duration || Progress.CONST.DURATION;
this.progress = 0;
this.delta = 0;
this.progress = 0;
this.isLoop = !!param.isLoop;
this.reset();
}
static get CONST() {
return {
DURATION : 1000
};
}
reset() {
this.timestamp = null;
}
start(now) {
this.timestamp = now;
}
tick(now) {
if (this.timestamp) {
this.delta = now - this.timestamp;
this.progress = Math.min(this.delta / this.duration, 1);
if (this.progress >= 1 && this.isLoop) {
this.start(now);
}
return this.progress;
} else {
return 0;
}
}
}
class Confetti {
constructor(param) {
this.parent = param.elm || document.body;
this.canvas = document.createElement("canvas");
this.ctx = this.canvas.getContext("2d");
this.width = param.width || this.parent.offsetWidth;
this.height = param.height || this.parent.offsetHeight;
this.length = param.length || Confetti.CONST.PAPER_LENGTH;
this.yRange = param.yRange || this.height * 2;
this.progress = new Progress({
duration : param.duration,
isLoop : true
});
this.rotationRange = typeof param.rotationLength === "number" ? param.rotationRange
: 10;
this.speedRange = typeof param.speedRange === "number" ? param.speedRange
: 10;
this.sprites = [];
this.canvas.style.cssText = [
"display: block",
"position: absolute",
"top: 0",
"left: 0",
"pointer-events: none"
].join(";");
this.render = this.render.bind(this);
this.build();
this.parent.appendChild(this.canvas);
this.progress.start(performance.now());
requestAnimationFrame(this.render);
}
static get CONST() {
return {
SPRITE_WIDTH : 9,
SPRITE_HEIGHT : 10,
PAPER_LENGTH : 100,
DURATION : 8000,
ROTATION_RATE : 50,
COLORS : [
"#FD0E35",
"#FD0E35",
"#ccff02",
"#ccff02",
"#87FF2A",
"#87FF2A",
"#87FF2A",
"#87FF2A",
"#0066FF",
"#0066FF",
"#0066FF",
"#0066FF",
"#FF3399",
"#FF3399",
"#FF3399",
"#FF3399",
"#A0E6FF",
"#A0E6FF",
"#FF1818",
"#FF1818"
]
};
}
build() {
for (let i = 0; i < this.length; ++i) {
let canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
canvas.width = Confetti.CONST.SPRITE_WIDTH;
canvas.height = Confetti.CONST.SPRITE_HEIGHT;
canvas.position = {
initX : Math.random() * this.width,
initY : -canvas.height - Math.random() * this.yRange
};
canvas.rotation = (this.rotationRange / 2) - Math.random() * this.rotationRange;
canvas.speed = (this.speedRange / 2) + Math.random() * (this.speedRange / 2);
ctx.save();
ctx.fillStyle = Confetti.CONST.COLORS[(Math.random() * Confetti.CONST.COLORS.length) | 0];
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
this.sprites.push(canvas);
}
}
render(now) {
let progress = this.progress.tick(now);
this.canvas.width = this.width;
this.canvas.height = this.height;
for (let i = 0; i < this.length; ++i) {
this.ctx.save();
this.ctx.translate(
this.sprites[i].position.initX + this.sprites[i].rotation * Confetti.CONST.ROTATION_RATE * progress,
this.sprites[i].position.initY + progress * (this.height + this.yRange)
);
this.ctx.rotate(this.sprites[i].rotation);
this.ctx.drawImage(
this.sprites[i],
-Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)) / 2,
-Confetti.CONST.SPRITE_HEIGHT / 2,
Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)),
Confetti.CONST.SPRITE_HEIGHT
);
this.ctx.restore();
}
requestAnimationFrame(this.render);
}
}
(() => {
const DURATION = 9000,
LENGTH = 120;
new Confetti({
width : window.innerWidth,
height : window.innerHeight,
length : LENGTH,
duration : DURATION
});
setTimeout(() => {
new Confetti({
width : window.innerWidth,
height : window.innerHeight,
length : LENGTH,
duration : DURATION
});
}, DURATION / 2);
})();
Thank you for reading our blog. If you face any problem in creating this Glassmorphism New Year Card Design with Confetti using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team