Animated Gift Box Using HTML CSS JavaScript

Animated Gift Box Using HTML CSS JavaScript

Introduction:

Hello Friends, welcome to today’s new blog post. Today we have created a beautiful project for you – Animated Gift Box Using HTML CSS JavaScript. This is going to be quite amazing and attractive. Creating this is also very easy. In this, when the user hovers over the gift box, it shows him the box opened and something is written in it. You can change that text as per your wish and it also looks quite amazing.

Explanation :

Now to create a gift box, first of all we are going to create a structure with the help of html in which there will be a box which we will have to make with the help of html.

  • <div class=”present” id=”present”>: First of all, to create the box, we have created a box in which we are going to add the rest of the items.
  • <div class=”lid”>: Then we’ve created a sectioned div that will be the header of the box.
  • <div class=”promo”>: We have added some text in the gift box, for which we have created a section in which we will add the text, you can also update the text.
  • <div class=”box”>: Then at last we have made a box which is a part of our gift box which we have created.

This is how we created our gift box. We only had to add some code in the HTML because our gift only has a box and text; we haven’t added anything else to it.

CSS Styling:

  • body: We have used linear gradient color in body background and also used font family and centered the content by flexing the display.
  • present: This is our main box whose width we have kept 410px and max-width 90px and also used margin auto and cursor pointer.
  • box: In the box we have kept the width 400px and the height 250px and in this we have also added the max width.
  • Gift: In the gift box we have used gradient color and kept the background size to 50px and the postion relative. In this we have kept the margin to auto so that our box gets centered correctly.
  • lid: This is a main part of our box in which we have added a width of 400 and height of 70px and to make it look good we have also added shadow to it and we have also added transition to it.

JavaScript:

Now we will manipulate our gift box with the help of JavaScript so that when the user hovers over the box, the box should open.

  • getElementById: First of all, we have added the HTML box in the JavaScript code, in which you have to add the name of the ID correctly.
  • options: After this, we have added color option in some javascript, due to which the color will be selective.
  • addEventListener: After this we have created two events.

Index.html:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Promo Code - Gift</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="present" id="present">
      <div class="lid">
        <span></span>
      </div>
      <div class="promo">
        <p>20% off promo</p>
        <h2>ILOVEYOU</h2>
      </div>
      <div class="box">
        <span></span>
        <span></span>
      </div>
    </div>
<!-- partial -->
  <script src='https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js'></script><script  src="./script.js"></script>

</body>
</html>

Style.css:

@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");

* {
  box-sizing: border-box;
}

body {
  background: #232526; 
  background: linear-gradient(to top,   #414345, #232526); 
  font-family: "Itim", cursive;
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.present {
  width: 410px;
  max-width: 90vw;
  margin: 0 auto;
  cursor: pointer;
}

.box {
  width: 400px;
  max-width: 90vw;
  height: 250px;
}

.box,
.lid {
  background: radial-gradient(white 15%, transparent 15.1%),
    radial-gradient(white 15%, transparent 15.1%), rgb(240, 58, 58);
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
  position: relative;
  margin: 0 auto;
}

.lid {
  width: 400px;
  max-width: 90vw;
  height: 70px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0 2px;
  background-color: rgb(216, 52, 52);
  top: 0;
  left: 0;
  transition: top ease-out 0.5s, left ease-out 0.5s, transform ease-out 0.5s;
}

.box span,
.lid span {
  position: absolute;
  display: block;
  background: rgba(235, 199, 0, 0.8);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
}

.box span:first-child {
  width: 100%;
  height: 60px;
  top: 80px;
}

.box span:last-child,
.lid span {
  width: 60px;
  height: 100%;
  left: 170px;
}

.promo {
  font-size: 30px;
  color: white;
  text-align: center;
  position: relative;
  height: 0;
  top: 10px;
  transition: all ease-out 0.7s;
}

.promo p {
  font-size: 24px;
  margin: 0;
}

.promo h2 {
  font-size: 40px;
  margin: 0;
}

.present:hover .lid {
  top: -100px;
  transform: rotateZ(10deg);
  left: 10px;
}

.present:hover .promo {
  top: -80px;
}

Script.js:

const present = document.getElementById("present");
const options = {
  colors: [
    "#34D963",
    "#068C2C",
    "#FF5757",
    "#8C1414",
    "#D9D74A",
    "#1E91D9",
    "#1B608C",
  ],
};

present.addEventListener("mouseenter", () => {
  confetti(options);
});
present.addEventListener("touchstart", () => {
  confetti(options);
});