As an engineering student, I don't know how to impress my crush, and I think this is not just my problem—many boys in college and school face the same struggle. 😤
Also, if your goal isn’t to impress your crush but to make an impression on any woman in your life—be it your mother, sister, or partner—it can still be quite challenging.
That's why I created a small project called "Crush" using HTML, CSS, and JavaScript. I can't guarantee that your crush (or anyone you want to impress) will be impressed, but one thing is for sure—she will never forget what you made for her. ♥️
HTML PART
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Crush 2</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Short+Stack&family=Homemade+Apple&display=swap'><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="paper heart">
</div>
<div class="paper image">
<p> and I fallen in</p>
<p>Love with You 😍 </p>
<img src="sh1.webp" />
</div>
<div class="paper image">
<p</p>
<img src="sh2.webp" />
</div>
<div class="paper image">
<p>How can be </p>
<p> someone so cute ❤️ </p>
<img src="sh3.jpeg" />
</div>
<div class="paper red">
<p class="p1"> and My Favorite</p>
<p class="p2">Person 😍</p>
</div>
<div class="paper">
<p class="p1">You are Cute </p>
<p class="p1">Amazing <span style="color: red !important;">❤️</span></p>
</div>
<div class="paper">
<p class="p1">Drag the papers to move!</p>
</div>
<!-- partial -->
<script src="script.js"></script>
</body>
</html>
we all know html part is easy.
CSS PART
@import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap');
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-size: 1000px;
background-image: url("https://www.psdgraphics.com/wp-content/uploads/2022/01/white-math-paper-texture.jpg");
background-position: center center;
}
.paper {
background-image: url("https://i0.wp.com/textures.world/wp-content/uploads/2018/10/2-Millimeter-Paper-Background-copy.jpg?ssl=1");
background-size: 500px;
background-position: center center;
padding: 20px 100px;
/* min-width: 800px; */
transform: rotateZ(-5deg);
box-shadow: 1px 15px 20px 0px rgba(0,0,0,0.5);
position: absolute;
}
.paper.heart {
position: relative;
width: 200px;
height: 200px;
padding: 0;
border-radius: 50%;
}
.paper.image {
padding: 10px;
}
.paper.image p {
font-size: 30px;
}
img {
max-height: 200px;
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;
}
p {
font-family: 'Zeyada';
font-size: 50px;
color: rgb(0,0,100);
opacity: 0.75;
user-select: none;
}
JAVASCRIPT PART
let highestZ = 1;
class Paper {
holdingPaper = false;
mouseTouchX = 0;
mouseTouchY = 0;
mouseX = 0;
mouseY = 0;
prevMouseX = 0;
prevMouseY = 0;
velX = 0;
velY = 0;
rotation = Math.random() * 30 - 15;
currentPaperX = 0;
currentPaperY = 0;
rotating = false;
init(paper) {
document.addEventListener('mousemove', (e) => {
if(!this.rotating) {
this.mouseX = e.clientX;
this.mouseY = e.clientY;
this.velX = this.mouseX - this.prevMouseX;
this.velY = this.mouseY - this.prevMouseY;
}
const dirX = e.clientX - this.mouseTouchX;
const dirY = e.clientY - this.mouseTouchY;
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.prevMouseX = this.mouseX;
this.prevMouseY = this.mouseY;
paper.style.transform = `translateX(${this.currentPaperX}px) translateY(${this.currentPaperY}px) rotateZ(${this.rotation}deg)`;
}
})
paper.addEventListener('mousedown', (e) => {
if(this.holdingPaper) return;
this.holdingPaper = true;
paper.style.zIndex = highestZ;
highestZ += 1;
if(e.button === 0) {
this.mouseTouchX = this.mouseX;
this.mouseTouchY = this.mouseY;
this.prevMouseX = this.mouseX;
this.prevMouseY = this.mouseY;
}
if(e.button === 2) {
this.rotating = true;
}
});
window.addEventListener('mouseup', () => {
this.holdingPaper = false;
this.rotating = false;
});
}
}
const papers = Array.from(document.querySelectorAll('.paper'));
papers.forEach(paper => {
const p = new Paper();
p.init(paper);
});
In the end the project will look like this 👇
Top comments (0)