x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-05-02 19:37:11 +03:00 committed by GitHub
parent 679538a6d9
commit af05626a7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
100_projects/70-javascript-zoom-effect/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zoom Effect</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div id="container">
<img src="photo-cat.avif"alt="purple kitty"/>
</div>
</body>
</html>

BIN
100_projects/70-javascript-zoom-effect/photo-cat.avif Normal file
View File

Binary file not shown.

15
100_projects/70-javascript-zoom-effect/script.js Normal file
View File

@ -0,0 +1,15 @@
const container = document.getElementById("container");
const img = document.querySelector("img");
container.addEventListener("mousemove", (e) => {
const x = e.clientX - e.target.offsetLeft;
const y = e.clientY - e.target.offsetTop;
console.log(x, y);
img.style.transformOrigin = `${x}px ${y}px`;
img.style.transform = "scale(2)";
});
container.addEventListener("mouseleave", () => {
img.style.transformOrigin = "center center";
img.style.transform = "scale(1)";
});

23
100_projects/70-javascript-zoom-effect/style.css Normal file
View File

@ -0,0 +1,23 @@
* {
box-sizing: border-box;
}
body {
background-color: #663399;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
#container {
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
height: 500px;
width: 500px;
overflow: hidden;
}
img {
transform-origin: center center;
object-fit: cover;
height: 100%;
width: 100%;
}