Congratulation Animation Preview
Introduction
Welcome Back to our new tutorial, Today We’ll be implementing the Congratulation Animation Using HTML and CSS in 3 Simple Steps. If you are a beginner you must need to learn how to create Animations using CSS. The code we’ve implemented below is simple and easy to understand.
30+ HTML CSS and Javascript Projects
HTML Code For Congratulation Animation
Create a Folder and add the file “Index.html”. Paste the following code:-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> </head> <body> <div class="js-container container" style="top:0px !important;"> <div class="congratulations-text">Congratulations</div> </div> </body> </html>
The Above HTML Code is very simple and easy to understand for Congratulation Animation. we’ve created the Two divs one parent and the other child div. The first div has the class name “js-container” while the other div has the class “congratulations-text” in which a simple Congratulation text is written. we didn’t add many effects to the text you can modify it as per your need for the experiment to make this more effective.
HTML Code Output
Below is the code HTML output :-
CSS Code For Congratulation Animation
Create another file on the same folder name as “Index.css” and add the following code:-
body {
font-family: 'Roboto';
margin: 0;
padding: 0;
}
.congratulations-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
Font-size:30px;
}
@keyframes confetti-slow {
0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
100% { transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg); }
}
@keyframes confetti-medium {
0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
100% { transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg); }
}
@keyframes confetti-fast {
0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
100% { transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg); }
}
.container {
width: 100vw;
height: 100vh;
background: #ffffff;
border:1px solid white;
display:fixed;
top:0px;
}
.confetti-container {
perspective: 700px;
position: absolute;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.confetti {
position: absolute;
z-index: 1;
top: -10px;
border-radius: 0%;
&--animation-slow {
animation: confetti-slow 2.25s linear 1 forwards;
}
&--animation-medium {
animation: confetti-medium 1.75s linear 1 forwards;
}
&--animation-fast {
animation: confetti-fast 1.25s linear 1 forwards;
}
}
/* Checkmark */
.checkmark-circle {
width: 150px;
height: 150px;
position: relative;
display: inline-block;
vertical-align: top;
margin-left: auto;
margin-right: auto;
}
.checkmark-circle .background {
width: 150px;
height: 150px;
border-radius: 50%;
background: #00C09D;
position: absolute;
}
.checkmark-circle .checkmark {
border-radius: 5px;
}
.checkmark-circle .checkmark.draw:after {
-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
animation-delay: 100ms;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-name: checkmark;
-moz-animation-name: checkmark;
animation-name: checkmark;
-webkit-transform: scaleX(-1) rotate(135deg);
-moz-transform: scaleX(-1) rotate(135deg);
-ms-transform: scaleX(-1) rotate(135deg);
-o-transform: scaleX(-1) rotate(135deg);
transform: scaleX(-1) rotate(135deg);
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.checkmark-circle .checkmark:after {
opacity: 1;
height: 75px;
width: 37.5px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
border-right: 15px solid white;
border-top: 15px solid white;
border-radius: 2.5px !important;
content: '';
left: 25px;
top: 75px;
position: absolute;
}
@-webkit-keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 37.5px;
opacity: 1;
}
40% {
height: 75px;
width: 37.5px;
opacity: 1;
}
100% {
height: 75px;
width: 37.5px;
opacity: 1;
}
}
@-moz-keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 37.5px;
opacity: 1;
}
40% {
height: 75px;
width: 37.5px;
opacity: 1;
}
100% {
height: 75px;
width: 37.5px;
opacity: 1;
}
}
@keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 37.5px;
opacity: 1;
}
40% {
height: 75px;
width: 37.5px;
opacity: 1;
}
100% {
height: 75px;
width: 37.5px;
opacity: 1;
}
}
.submit-btn {
height: 45px;
width: 200px;
font-size: 15px;
background-color: #00c09d;
border: 1px solid #00ab8c;
color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px 0 rgba(87,71,81,.2);
cursor: pointer;
transition: all 2s ease-out;
transition: all .2s ease-out;
}
.submit-btn:hover {
background-color: #2ca893;
transition: all .2s ease-out;
}CSS Code for Congratulation Animation is breakdown below:-
Congratulations Text style is given in the below code snippet. You can modify as per your requirements. Do experiment and add more effects.
.congratulations-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-size: 30px;
}
we’ve given the confetti animations by defining the @keyframes, confetti-slow, confetti-medium, confetti-fast.
Style the confetti-container container with 3D Perspective and absolute positioning.
You should learn more about the keyframes from here because it is an important concept in CSS.
CSS Code Output
JavaScript Code For Congratulation Animation
Create another file “script.js” and add the following code:-
const Confettiful = function(el) {
this.el = el;
this.containerEl = null;
this.confettiFrequency = 3;
this.confettiColors = ['#EF2964', '#00C09D', '#2D87B0', '#48485E','#EFFF1D'];
this.confettiAnimations = ['slow', 'medium', 'fast'];
this._setupElements();
this._renderConfetti();
};
Confettiful.prototype._setupElements = function() {
const containerEl = document.createElement('div');
const elPosition = this.el.style.position;
if (elPosition !== 'relative' || elPosition !== 'absolute') {
this.el.style.position = 'relative';
}
containerEl.classList.add('confetti-container');
this.el.appendChild(containerEl);
this.containerEl = containerEl;
};
Confettiful.prototype._renderConfetti = function() {
this.confettiInterval = setInterval(() => {
const confettiEl = document.createElement('div');
const confettiSize = (Math.floor(Math.random() * 3) + 7) + 'px';
const confettiBackground = this.confettiColors[Math.floor(Math.random() * this.confettiColors.length)];
const confettiLeft = (Math.floor(Math.random() * this.el.offsetWidth)) + 'px';
const confettiAnimation = this.confettiAnimations[Math.floor(Math.random() * this.confettiAnimations.length)];
confettiEl.classList.add('confetti', 'confetti--animation-' + confettiAnimation);
confettiEl.style.left = confettiLeft;
confettiEl.style.width = confettiSize;
confettiEl.style.height = confettiSize;
confettiEl.style.backgroundColor = confettiBackground;
confettiEl.removeTimeout = setTimeout(function() {
confettiEl.parentNode.removeChild(confettiEl);
}, 3000);
this.containerEl.appendChild(confettiEl);
}, 25);
};
window.confettiful = new Confettiful(document.querySelector('.js-container'));
JavaScript Code for Congratulation Animation is breakdown below:-
The below will create a new instance of Confettiful and assigns it to the global variable window.confettiful then passes the HTML element with the class “js-container” as the target element for the confetti effect.
window.confettiful = new Confettiful(document.querySelector('.js-container'));
Sets up an interval that repeatedly executes the confetti generation logic.
Confettiful.prototype._renderConfetti = function() {
this.confettiInterval = setInterval(() => {
// ... (confetti generation logic)
}, 25);
};
Further, you can read more about CSS Animations here and add it to your projects.
How to create a Share button using HTML and CSS
Final Output
Conclusion
Congratulations you have just completed Another mini project Congratulation Animation that you may use in your next website. This is completely beginner-friendly code. Further, you can modify this Congratulation Animation as per your needs and innovative ideas. You must do the experiments by adding CSS and transition effects to make it more impressive. Also for more such mini projects keep visiting our platform.
Reference
Credit:- masud rana
HAPPY CODING!
