A Pen by Izhaan Raza on CodePen.
Created
May 6, 2023 11:39
-
-
Save Izhaan-Raza/ae7f16e7e4103f92cc953ca15d832c68 to your computer and use it in GitHub Desktop.
XWxVwPe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="eng"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>baad me isko change krna</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://fonts.googleapis.com/css2?family=Short+Stack&family=Homemade+Apple&display=swap" | |
| /> | |
| <link | |
| rel="stylesheet" | |
| href="./styles.css" | |
| /> | |
| </head> | |
| <body> | |
| <div class="paper heart"></div> | |
| <div class="paper image"> | |
| <h1>And I have Fallen </h1> | |
| <p>In love with you 💞 </p> | |
| <img src="https://i.ibb.co/RgTf37G/photo-2023-05-06-15-19-45-2.png" > | |
| </div> | |
| <div class="paper image"> | |
| <p</p> | |
| <img src="https://i.ibb.co/vvs67Sf/photo-2023-05-06-15-23-19-1.png | |
| " > | |
| </div> | |
| <div class="paper image"> | |
| <p>How can someone | |
| Be so cute 🫠 | |
| </p> | |
| <img src="https://i.ibb.co/Q9VLwJn/photo-2023-05-06-15-19-45.png | |
| " > | |
| </div> | |
| <div class="paper red"> | |
| <p class="p1">Guess who is my </p> | |
| <p class="p2">Favroit Person 😍</p> | |
| </div> | |
| <div class="paper"> | |
| <p class="p1">You are so cute</p> | |
| <p class="p1">and Amazing <span style="color: rgb(255, 130, 130) !important;">❤️</span></p> | |
| </div> | |
| <div class="paper"> | |
| <p class="p1">Isko Drag kro 🥺 | |
| </p> | |
| </div> | |
| <script src="./script.js"></script> | |
| </body> | |
| </head> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let highestZ = 1; | |
| class Paper { | |
| holdingPaper = false; | |
| touchStartX = 0; | |
| touchStartY = 0; | |
| touchMoveX = 0; | |
| touchMoveY = 0; | |
| touchEndX = 0; | |
| touchEndY = 0; | |
| prevTouchX = 0; | |
| prevTouchY = 0; | |
| velX = 0; | |
| velY = 0; | |
| rotation = Math.random() * 30 - 15; | |
| currentPaperX = 0; | |
| currentPaperY = 0; | |
| rotating = false; | |
| init(paper) { | |
| paper.addEventListener("touchmove", (e) => { | |
| e.preventDefault(); | |
| if (!this.rotating) { | |
| this.touchMoveX = e.touches[0].clientX; | |
| this.touchMoveY = e.touches[0].clientY; | |
| this.velX = this.touchMoveX - this.prevTouchX; | |
| this.velY = this.touchMoveY - this.prevTouchY; | |
| } | |
| const dirX = e.touches[0].clientX - this.touchStartX; | |
| const dirY = e.touches[0].clientY - this.touchStartY; | |
| const dirLength = Math.sqrt(dirX * dirX + dirY * dirY); | |
| const dirNormalizedX = dirX / dirLength; | |
| const dirNormalizedY = dirY / dirLength; | |
| const angle = Math.atan2(dirNormalizedY, dirNormalizedX); | |
| let degrees = (180 * angle) / Math.PI; | |
| degrees = (360 + Math.round(degrees)) % 360; | |
| if (this.rotating) { | |
| this.rotation = degrees; | |
| } | |
| if (this.holdingPaper) { | |
| if (!this.rotating) { | |
| this.currentPaperX += this.velX; | |
| this.currentPaperY += this.velY; | |
| } | |
| this.prevTouchX = this.touchMoveX; | |
| this.prevTouchY = this.touchMoveY; | |
| paper.style.transform = `translateX(${this.currentPaperX}px) translateY(${this.currentPaperY}px) rotateZ(${this.rotation}deg)`; | |
| } | |
| }); | |
| paper.addEventListener("touchstart", (e) => { | |
| if (this.holdingPaper) return; | |
| this.holdingPaper = true; | |
| paper.style.zIndex = highestZ; | |
| highestZ += 1; | |
| this.touchStartX = e.touches[0].clientX; | |
| this.touchStartY = e.touches[0].clientY; | |
| this.prevTouchX = this.touchStartX; | |
| this.prevTouchY = this.touchStartY; | |
| }); | |
| paper.addEventListener("touchend", () => { | |
| this.holdingPaper = false; | |
| this.rotating = false; | |
| }); | |
| // For two-finger rotation on touch screens | |
| paper.addEventListener("gesturestart", (e) => { | |
| e.preventDefault(); | |
| this.rotating = true; | |
| }); | |
| paper.addEventListener("gestureend", () => { | |
| this.rotating = false; | |
| }); | |
| } | |
| } | |
| const papers = Array.from(document.querySelectorAll(".paper")); | |
| papers.forEach((paper) => { | |
| const p = new Paper(); | |
| p.init(paper); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css2?family=Zeyada&display=swap"); | |
| body { | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-size: 1950px; | |
| background-image: url(https://i.ibb.co/jf58wpg/background.png); | |
| background-position: center center; | |
| } | |
| .paper { | |
| background-image: url(https://i.ibb.co/cNNbLq5/back3.png); | |
| background-size: 2000px; | |
| background-position: center center; | |
| padding: 20px 100px; | |
| transform: rotateZ(-5deg); | |
| box-shadow: 1px 15px 20px 0px rgba(0, 0, 0, 0.5); | |
| position: absolute; | |
| border-radius: 30px; | |
| } | |
| .paper.heart { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| padding: 0; | |
| border-radius: 50%; | |
| } | |
| .paper.image p { | |
| font-size: 20px; | |
| } | |
| img { | |
| max-height: 200-px; | |
| width: 100%; | |
| user-select: none; | |
| } | |
| .paper.heart::after { | |
| content: ""; | |
| background-image: url(https://cdn.pixabay.com/photo/2016/03/31/19/25/cartoon-1294994__340.png); | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| background-size: 150px; | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| opacity: 0.6; | |
| } | |
| .paper.red { | |
| /* filter: hue-rotate(90deg); */ | |
| } | |
| .paper:nth-of-type(3n) { | |
| background-position: left top; | |
| } | |
| p { | |
| font-family: "Zeyada"; | |
| font-weight: 600; | |
| font-size: 50px; | |
| color: rgb(0, 0, 0); | |
| opacity: 0.75; | |
| user-select: none; | |
| /* filter: drop-shadow(2px 1.5px 1px rgba(255, 255, 255, 0.9)); */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment