Skip to content

Commit 7c75ad9

Browse files
lgopelgope
committed
click and drag 🚀🚀
1 parent e8bbbea commit 7c75ad9

4 files changed

Lines changed: 169 additions & 0 deletions

File tree

‎Click-and-Drag/img/background.jpg‎

166 KB
Loading

‎Click-and-Drag/img/favicon.png‎

22.8 KB
Loading

‎Click-and-Drag/index.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<link rel="icon" href="img/favicon.png" type="image/gif" sizes="16x16">
6+
<meta charset="UTF-8">
7+
<title>Click and Drag</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="items">
13+
<div class="item item1">01</div>
14+
<div class="item item2">02</div>
15+
<div class="item item3">03</div>
16+
<div class="item item4">04</div>
17+
<div class="item item5">05</div>
18+
<div class="item item6">06</div>
19+
<div class="item item7">07</div>
20+
<div class="item item8">08</div>
21+
<div class="item item9">09</div>
22+
<div class="item item10">10</div>
23+
<div class="item item11">11</div>
24+
<div class="item item12">12</div>
25+
<div class="item item13">13</div>
26+
<div class="item item14">14</div>
27+
<div class="item item15">15</div>
28+
<div class="item item16">16</div>
29+
<div class="item item17">17</div>
30+
<div class="item item18">18</div>
31+
<div class="item item19">19</div>
32+
<div class="item item20">20</div>
33+
<div class="item item21">21</div>
34+
<div class="item item22">22</div>
35+
<div class="item item23">23</div>
36+
<div class="item item24">24</div>
37+
<div class="item item25">25</div>
38+
</div>
39+
40+
<script type="text/javascript">
41+
const slider = document.querySelector('.items');
42+
let isDown = false;
43+
let startX;
44+
let scrollLeft;
45+
46+
slider.addEventListener('mousedown', (e) => {
47+
isDown = true;
48+
slider.classList.add('active');
49+
startX = e.pageX - slider.offsetLeft;
50+
scrollLeft = slider.scrollLeft;
51+
});
52+
53+
slider.addEventListener('mouseleave', () => {
54+
isDown = false;
55+
slider.classList.remove('active');
56+
});
57+
58+
slider.addEventListener('mouseup', () => {
59+
isDown = false;
60+
slider.classList.remove('active');
61+
});
62+
63+
slider.addEventListener('mousemove', (e) => {
64+
if (!isDown) return; // stop the fn from running
65+
e.preventDefault();
66+
const x = e.pageX - slider.offsetLeft;
67+
const walk = (x - startX) * 3;
68+
slider.scrollLeft = scrollLeft - walk;
69+
});
70+
71+
</script>
72+
73+
</body>
74+
75+
</html>

‎Click-and-Drag/style.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
html {
2+
box-sizing: border-box;
3+
background: url('img/background.jpg') fixed;
4+
background-size: cover;
5+
}
6+
7+
*,
8+
*:before,
9+
*:after {
10+
box-sizing: inherit;
11+
}
12+
13+
body {
14+
min-height: 100vh;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
font-family: sans-serif;
19+
font-size: 20px;
20+
margin: 0;
21+
}
22+
23+
.items {
24+
height: 800px;
25+
padding: 100px;
26+
width: 100%;
27+
border: 1px solid white;
28+
overflow-x: scroll;
29+
overflow-y: hidden;
30+
white-space: nowrap;
31+
user-select: none;
32+
cursor: pointer;
33+
transition: all 0.2s;
34+
transform: scale(0.98);
35+
will-change: transform;
36+
position: relative;
37+
background: rgba(255, 255, 255, 0.1);
38+
font-size: 0;
39+
perspective: 500px;
40+
}
41+
42+
.items.active {
43+
background: rgba(255, 255, 255, 0.3);
44+
cursor: grabbing;
45+
cursor: -webkit-grabbing;
46+
transform: scale(1);
47+
}
48+
49+
.item {
50+
width: 200px;
51+
height: calc(100% - 40px);
52+
display: inline-flex;
53+
align-items: center;
54+
justify-content: center;
55+
font-size: 80px;
56+
font-weight: 100;
57+
color: rgba(0, 0, 0, 0.15);
58+
box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.15);
59+
}
60+
61+
.item:nth-child(9n + 1) {
62+
background: dodgerblue;
63+
}
64+
.item:nth-child(9n + 2) {
65+
background: goldenrod;
66+
}
67+
.item:nth-child(9n + 3) {
68+
background: paleturquoise;
69+
}
70+
.item:nth-child(9n + 4) {
71+
background: gold;
72+
}
73+
.item:nth-child(9n + 5) {
74+
background: cadetblue;
75+
}
76+
.item:nth-child(9n + 6) {
77+
background: tomato;
78+
}
79+
.item:nth-child(9n + 7) {
80+
background: lightcoral;
81+
}
82+
.item:nth-child(9n + 8) {
83+
background: darkslateblue;
84+
}
85+
.item:nth-child(9n + 9) {
86+
background: rebeccapurple;
87+
}
88+
89+
.item:nth-child(even) {
90+
transform: scaleX(1.31) rotateY(40deg);
91+
}
92+
.item:nth-child(odd) {
93+
transform: scaleX(1.31) rotateY(-40deg);
94+
}

0 commit comments

Comments
 (0)