Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9a655ec

Browse files
committed
Added project #17 - Build Draggable Slide
2 parents9926f6e +1c46f58 commit9a655ec

File tree

10 files changed

+174
-0
lines changed

10 files changed

+174
-0
lines changed

‎15 - Animated Responsive Navbar/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@
1313
<title>Navbar</title>
1414
</head>
1515
<body>
16+
<<<<<<<HEAD
1617
<!--
18+
=======
19+
<--
20+
>>>>>>> 1c46f58f581af29daf32166476322b3f579ecefd
1721
TUTORIAL LINK:
1822
https://youtu.be/dHDi4WYUVeA
1923
825 KB
Loading
727 KB
Loading
754 KB
Loading
765 KB
Loading
1.25 MB
Loading
1.17 MB
Loading
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
6+
<linkrel="stylesheet"href="style.css"/>
7+
<title>Swiper</title>
8+
</head>
9+
<body>
10+
<divclass="container">
11+
<divclass="cards">
12+
<divclass="card">
13+
<imgsrc="./imgs/pic1.jpg"alt=""/>
14+
<divclass="card__content">
15+
<h1>Heading 1</h1>
16+
<p>
17+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
18+
voluptatibus!
19+
</p>
20+
</div>
21+
</div>
22+
<divclass="card">
23+
<imgsrc="./imgs/pic2.jpg"alt=""/>
24+
<divclass="card__content">
25+
<h1>Heading 2</h1>
26+
<p>
27+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
28+
voluptatibus!
29+
</p>
30+
</div>
31+
</div>
32+
<divclass="card">
33+
<imgsrc="./imgs/pic3.jpg"alt=""/>
34+
<divclass="card__content">
35+
<h1>Heading 3</h1>
36+
<p>
37+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
38+
voluptatibus!
39+
</p>
40+
</div>
41+
</div>
42+
<divclass="card">
43+
<imgsrc="./imgs/pic4.jpg"alt=""/>
44+
<divclass="card__content">
45+
<h1>Heading 4</h1>
46+
<p>
47+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
48+
voluptatibus!
49+
</p>
50+
</div>
51+
</div>
52+
<divclass="card">
53+
<imgsrc="./imgs/pic5.jpg"alt=""/>
54+
<divclass="card__content">
55+
<h1>Heading 5</h1>
56+
<p>
57+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
58+
voluptatibus!
59+
</p>
60+
</div>
61+
</div>
62+
<divclass="card">
63+
<imgsrc="./imgs/pic6.jpg"alt=""/>
64+
<divclass="card__content">
65+
<h1>Heading 6</h1>
66+
<p>
67+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
68+
voluptatibus!
69+
</p>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
<scriptsrc="script.js"></script>
75+
</body>
76+
</html>

‎17 - Build Draggable Slides/script.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
constcontainer=document.querySelector(".container");
2+
constcards=document.querySelector(".cards");
3+
4+
/* keep track of user's mouse down and up */
5+
letisPressedDown=false;
6+
/* x horizontal space of cursor from inner container */
7+
letcursorXSpace;
8+
9+
container.addEventListener("mousedown",(e)=>{
10+
isPressedDown=true;
11+
cursorXSpace=e.offsetX-cards.offsetLeft;
12+
container.style.cursor="grabbing";
13+
});
14+
15+
container.addEventListener("mouseup",()=>{
16+
container.style.cursor="grab";
17+
});
18+
19+
window.addEventListener("mouseup",()=>{
20+
isPressedDown=false;
21+
});
22+
23+
container.addEventListener("mousemove",(e)=>{
24+
if(!isPressedDown)return;
25+
e.preventDefault();
26+
cards.style.left=`${e.offsetX-cursorXSpace}px`;
27+
boundCards();
28+
});
29+
30+
functionboundCards(){
31+
constcontainer_rect=container.getBoundingClientRect();
32+
constcards_rect=cards.getBoundingClientRect();
33+
34+
if(parseInt(cards.style.left)>0){
35+
cards.style.left=0;
36+
}elseif(cards_rect.right<container_rect.right){
37+
cards.style.left=`-${cards_rect.width-container_rect.width}px`;
38+
}
39+
}

‎17 - Build Draggable Slides/style.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family:"Montserrat","Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
9+
min-height:100vh;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
15+
/* global */
16+
img {
17+
width:100%;
18+
}
19+
20+
h1 {
21+
margin:0.5rem0;
22+
}
23+
24+
/* container and cards */
25+
.container {
26+
position: relative;
27+
width:1000px;
28+
height:400px;
29+
overflow: hidden;
30+
cursor: grab;
31+
/* border-top: 10px solid #f00; */
32+
}
33+
34+
.cards {
35+
position: absolute;
36+
top:0;
37+
left:0;
38+
display: grid;
39+
grid-template-columns:repeat(6,300px);
40+
grid-gap:50px;
41+
pointer-events: none;
42+
/* border-bottom: 10px solid #00f; */
43+
}
44+
45+
.card {
46+
border:1px solid#ccc;
47+
border-radius:1rem;
48+
overflow: hidden;
49+
box-shadow:0px5px20px0pxrgba(69,67,96,0.1);
50+
}
51+
52+
.card__content {
53+
color:#4e4e4e;
54+
padding:1rem;
55+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp