Skip to content

Commit f0bdc04

Browse files
Shreekant-04Shreekant-04
committed
magnetic button added
1 parent 566adf9 commit f0bdc04

File tree

8 files changed

+195
-0
lines changed

8 files changed

+195
-0
lines changed

‎ClickAndDrag/app.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const slider = document.querySelector(".container");
2+
let isDown = false;
3+
let startX;
4+
let scrollLeft;
5+
6+
for (let i = 1; i <= 31; i++) {
7+
let div = document.createElement("div");
8+
div.classList.add("slide");
9+
div.innerHTML = `
10+
<img src="/SwipperJs/images/1 (${i}).jpg" />
11+
`;
12+
slider.appendChild(div);
13+
}
14+
document.querySelector("body").addEventListener("mousedown", (e) => {
15+
e.preventDefault();
16+
});
17+
18+
slider.addEventListener("mousedown", (e) => {
19+
e.preventDefault();
20+
21+
isDown = true;
22+
startX = e.pageX - slider.offsetLeft;
23+
scrollLeft = slider.scrollLeft;
24+
slider.style.cursor = "grabbing";
25+
slider.addEventListener("mousemove", (e) => {
26+
if (!isDown) return; // stop the fn from running
27+
e.preventDefault();
28+
const x = e.pageX - slider.offsetLeft;
29+
const walk = x - startX;
30+
slider.scrollLeft = scrollLeft - walk / 2;
31+
});
32+
});
33+
slider.addEventListener("mouseup", (e) => {
34+
e.preventDefault();
35+
slider.style.cursor = "pointer";
36+
isDown = false;
37+
});
38+
39+
document.querySelector(".slide").addEventListener("click", (e) => {
40+
e.preventDefault();
41+
});

‎ClickAndDrag/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Click And Drag</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
12+
</div>
13+
<script src="app.js"></script>
14+
</body>
15+
</html>
16+

‎ClickAndDrag/style.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
height: 100vh;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
}
12+
.container {
13+
width: 98%;
14+
height: 80%;
15+
display: flex;
16+
flex-wrap: wrap;
17+
overflow-y: scroll;
18+
flex-direction: column;
19+
justify-content: center;
20+
align-items: center;
21+
gap: 3%;
22+
border: 2px solid black;
23+
transition: 0.3s;
24+
cursor: pointer;
25+
}
26+
/* .container:nth-child(1) {
27+
padding-left: 30%;
28+
} */
29+
30+
.slide {
31+
height: 50%;
32+
width: 25vmin;
33+
transition: 0.3s;
34+
}
35+
.slide img {
36+
height: 100%;
37+
width: 100%;
38+
}
39+
.slide:hover {
40+
transform: scale(1.2);
41+
}

‎MagneticButton/app.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
console.log("hello");
2+
let btn = document.querySelectorAll(".btn");
3+
btn.forEach((el) => {
4+
el.addEventListener("mousemove", (e) => {
5+
let rect = el.getBoundingClientRect();
6+
7+
let x = e.clientX - (rect.left + rect.width / 2);
8+
let y = e.clientY - (rect.top + rect.height / 2);
9+
console.log(x, y);
10+
if (Math.abs(x) < 90 && Math.abs(y) < 50) {
11+
el.style.transform = `translate(${x}px, ${y}px)`;
12+
} else {
13+
el.style.transform = `translate(0,0)`;
14+
}
15+
});
16+
el.addEventListener("mouseleave", () => {
17+
el.style.transform = `translate(0,0)`;
18+
});
19+
});

‎MagneticButton/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Magnetic Button</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
9+
</head>
10+
<body>
11+
<section>
12+
<button class="btn btn1">Hover</button>
13+
</section>
14+
<section class="second">
15+
<button class=" btn btn2">Hover</button>
16+
</section>
17+
<script src="app.js"></script>
18+
</body>
19+
</html>

‎MagneticButton/style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
height: 100vh;
8+
width: 100vw;
9+
background-color: #291f1e;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
flex-direction: column;
14+
gap: 10px;
15+
}
16+
section {
17+
height: 20vmin;
18+
width: 40vmin;
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
}
23+
.btn {
24+
background-color: #5aa9e6;
25+
height: 7vmin;
26+
width: 15vmin;
27+
border: none;
28+
border-radius: 30px;
29+
color: #000;
30+
cursor: pointer;
31+
transition: 0.1s;
32+
position: absolute;
33+
}
34+
.btn1 {
35+
background: linear-gradient(90deg, blue 50%, #fc0fc0);
36+
color: white;
37+
}
38+
.btn:hover {
39+
font-size: 1.2vw;
40+
}

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,5 +58,10 @@
5858
<td><a href="SwipperJs">Image Crousel using Swipper.js</a></td>
5959
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/SwipperJs/">Link</a></td>
6060
</tr>
61+
<tr>
62+
<td>10</td>
63+
<td><a href="SwipperJs">Magnetic Button</a></td>
64+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/MagneticButton/">Link</a></td>
65+
</tr>
6166
</tbody>
6267
</table>

‎index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,20 @@
8383
<a href="/SwipperJs/" target="_blank">Link</a>
8484
</td>
8585
</tr>
86+
<tr>
87+
<td>9</td>
88+
<td>Image Crousel using Swipper.js</td>
89+
<td>
90+
<a href="/SwipperJs/" target="_blank">Link</a>
91+
</td>
92+
</tr>
93+
<tr>
94+
<td>10</td>
95+
<td>Magnetic Button</td>
96+
<td>
97+
<a href="/MagneticButton/index.html" target="_blank">Link</a>
98+
</td>
99+
</tr>
86100
</tbody>
87101
</table>
88102
</body>

0 commit comments

Comments
 (0)