Webleb - Snippet di Codice -

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

5 October 2024

Un codice di emmanuelbossro2004

24 May 2025

<!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();
};

Consigliato

Input HTML animato

Un codice di emmanuelbossro2004

Un codice per neumorfismo

HTML

CSS

JS

Consigliato

Input HTML animato

Un codice di emmanuelbossro2004

Un codice per neumorfismo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS