GSAP के साथ HTML एनिमेटेड प्रेम पत्र लिफाफा

414 youssefdahroug2005

संपादक में खोलें Video अपना कोड प्रकाशित करें

GSAP के साथ HTML एनिमेटेड प्रेम पत्र लिफाफा

अनुशंसित

25 January 2026

रफ़ल प्लेयर के साथ फ़्लैश गेम एम्बेड करें

27 January 2026

अल्टीमेट गेम स्टैश HTML: गेम एमुलेटर फ्रंटएंड

4 November 2024

नेवबार टेम्पलेट HTML CSS

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Sofia'><link rel="stylesheet" href="./style.css">

</head>
<body>
<html>

<body class="scissors">
  <div class="envelop">
    <div class="envelop__front-paper"></div>
    <div class="envelop__back-paper"></div>
    <div class="envelop__up-paper js-up-paper"></div>
    <div class="envelop__sticker js-sticker"></div>
    <div class="envelop__false-sticker"></div>
    <div class="envelop__content js-envelop-content">
      <div class="love-notes">
        <div class="note js-note">
          <div class="note__text">
            <p>
              Hi my princess, here we are completing another month together, it is always a joy to be able to wake up and know that I have you by my side and feel that this will be forever, it is magnificent.
            </p>
          </div>
        </div>
        <div class="note js-note">
          <div class="note__text">
            <p>I want them to never end and for there to always be many more ahead.</p>
          </div>
        </div>
        <div class="note js-note">
          <div class="note__text">
            <p>You are the best thing that ever happened to me, thank you for choosing me every day.</p>
            <p>I love you a lot!♥.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  width: 100%;
  background-color: #dd84d3;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-height: 500px) {
  body {
    margin: 25% 0 25% 0;
  }
}

.envelop {
  width: 15rem;
  height: 10rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
@media (min-width: 400px) and (max-width: 600px) {
  .envelop {
    width: 20rem;
    height: 15rem;
  }
}
@media (min-width: 600px) {
  .envelop {
    width: 25rem;
    height: 20rem;
  }
}
@media (min-width: 600px) and (min-height: 600px) {
  .envelop {
    bottom: 20%;
  }
}
.envelop__front-paper {
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  border-radius: 0.7rem;
  border: 0.35rem solid #967b5c;
  background-color: #ba9872;
  clip-path: polygon(100% 0%, 50% 70%, 0% 0%, 0% 100%, 100% 100%);
  z-index: 300;
}
.envelop__back-paper {
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  border-radius: 0.7rem;
  background-color: #967b5c;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 90%);
  z-index: 100;
}
.envelop__up-paper {
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  position: relative;
  border-radius: 0.7rem;
  background-color: #967b5c;
  z-index: 400;
  clip-path: polygon(0% 0%, 100% 0%, 50% 81%);
}
.envelop__sticker {
  width: 100%;
  height: 20%;
  position: absolute;
  margin: auto;
  top: 30%;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 400;
  background-image: url("https://www.freepnglogos.com/uploads/heart-png/emoji-heart-33.png");
  background-color: #f9f9f9;
  border: 0.3rem solid #e2e2e2;
  background-size: 2rem;
  background-position: center;
}
@media (max-width: 400px) {
  .envelop__sticker {
    background-size: 1.2rem;
  }
}
@media (min-width: 600px) {
  .envelop__sticker {
    height: 15%;
  }
}
.envelop__false-sticker {
  width: 20%;
  height: 20%;
  position: absolute;
  margin: auto;
  top: 30%;
  left: 80%;
  bottom: 0;
  right: 0;
  z-index: 300;
  background-image: url("https://www.freepnglogos.com/uploads/heart-png/emoji-heart-33.png");
  background-color: #f9f9f9;
  border: 0.3rem solid #e2e2e2;
  background-size: 2rem;
  background-position: center;
}
@media (max-width: 400px) {
  .envelop__false-sticker {
    background-size: 1.2rem;
  }
}
@media (min-width: 600px) {
  .envelop__false-sticker {
    height: 15%;
  }
}
.envelop__content {
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 200;
}
.love-notes {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.note {
  width: 95%;
  height: 30%;
  background-color: #f9f9f9;
  position: absolute;
  overflow: hidden;
  transition: height 0.5s, opacity 0.25s;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.note:nth-child(1) {
  bottom: 60%;
}
.note:nth-child(2) {
  bottom: 40%;
}
.note:nth-child(3) {
  bottom: 20%;
}
.note:hover {
  cursor: pointer;
  height: 45%;
}
.note__text {
  font-family: "Sofia";
  padding: 1rem;
}
.note__text p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  text-align: center;
}
@media (min-width: 300px) and (max-width: 600px) {
  .note__text p {
    font-size: 1.025rem;
  }
}
@media (min-width: 600px) {
  .note__text p {
    font-size: 1.15rem;
  }
}

.scissors {
  cursor: url("https://i.postimg.cc/GtLCdKxR/sisors.png"), pointer;
}
.scissors:active {
  cursor: url("https://i.postimg.cc/GtXQ7WPZ/pngwing-com.png"), pointer;
}

.cursor {
  cursor: pointer;
}

JS

let mobile_media_query = window.matchMedia("(max-width: 400px)");
let tablet_media_query = window.matchMedia(
  "(min-width: 400px) and (max-width: 600px)"
);
const notes = document.querySelectorAll(".js-note");

//-> Main function that enables all the notes.
function notes_ready() {
  gsap.to(".js-envelop-content", {
    height: "110%",
    duration: 0.5
  });

for (let i = 0; i < notes.length; i++) {
    notes[i].addEventListener("click", function () {
      if (mobile_media_query.matches) {
        if (this.classList.contains("active")) {
          this.classList.remove("active");
          gsap.set(this, {
            height: "30%",
            clearProps: "all"
          });
        } else {
          for (let i = 0; i < notes.length; i++) {
            if (notes[i].classList.contains("active")) {
              notes[i].classList.remove("active");
              gsap.set(notes[i], {
                height: "30%",
                clearProps: "all"
              });
            }
          }
          this.classList.add("active");
          gsap.set(this, {
            height: 125 + 40 * i + "%"
          });
        }
      } else if (tablet_media_query.matches) {
        if (this.classList.contains("active")) {
          this.classList.remove("active");
          gsap.set(this, {
            height: "30%",
            clearProps: "all"
          });
        } else {
          for (let i = 0; i < notes.length; i++) {
            if (notes[i].classList.contains("active")) {
              notes[i].classList.remove("active");
              gsap.set(notes[i], {
                height: "30%",
                clearProps: "all"
              });
            }
          }
          this.classList.add("active");
          gsap.set(this, {
            height: 80 + 21 * i + "%"
          });
        }
      } else {
        if (this.classList.contains("active")) {
          this.classList.remove("active");
          gsap.set(this, {
            height: "30%",
            clearProps: "all"
          });
        } else {
          for (let i = 0; i < notes.length; i++) {
            if (notes[i].classList.contains("active")) {
              notes[i].classList.remove("active");
              gsap.set(notes[i], {
                height: "30%",
                clearProps: "all"
              });
            }
          }
          this.classList.add("active");
          gsap.set(this, {
            height: 70 + 20 * i + "%"
          });
        }
      }
    });
  }
}

//-> Function that set up the up paper of the envelope.
function set_up_paper() {
  var arr = [0, 0, 100, 0, 50, 61];
  gsap.set(".js-up-paper", {
    bottom: "97%",
    rotation: 180,
    zIndex: 200,
    clipPath:
      "polygon(" +
      arr[0] +
      "%" +
      arr[1] +
      "%," +
      arr[2] +
      "%" +
      arr[3] +
      "%," +
      arr[4] +
      "%" +
      arr[5] +
      "%)",
    onComplete: notes_ready
  });
}

//-> Function that starts the up paper transition.
function envelop_transition() {
  gsap.to(".js-up-paper", {
    bottom: "1%",
    duration: 0.25,
    onComplete: set_up_paper
  });
  document
    .querySelector(".js-up-paper")
    .removeEventListener("click", envelop_transition);
  document.querySelector(".js-up-paper").classList.remove("cursor");
}

//-> Function that allows cut the sticker.
function sticker() {
  gsap.set(".js-sticker", { width: "20%", left: "-80%" });
  document.body.classList.remove("scissors");
  document.querySelector(".js-sticker").removeEventListener("click", sticker);
  document
    .querySelector(".js-up-paper")
    .addEventListener("click", envelop_transition);
  document.querySelector(".js-up-paper").classList.add("cursor");
}

document.querySelector(".js-sticker").addEventListener("click", sticker);

window.onresize = function (event) {
  recize_notes();
};

अनुशंसित

रफ़ल प्लेयर के साथ फ़्लैश गेम एम्बेड करें

अल्टीमेट गेम स्टैश HTML: गेम एमुलेटर फ्रंटएंड

नेवबार टेम्पलेट HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS