Skip to content

Commit bc2222a

Browse files
seungyeubseungyeub
committed
feat: Add new slider effect "Capture Effect Slider"
1 parent 6b930f1 commit bc2222a

File tree

9 files changed

+170
-0
lines changed

9 files changed

+170
-0
lines changed

‎slider/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@
44

55
- [Box Slider Hover Effects](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/slider/box-slider-hover-effects)
66

7+
- [Capture Effect Slider](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/slider/capture-effect-slider)
8+
79
- [Simple Vanilla JS Carousel Slider](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/slider/simple-vanilla-js-carousel-slider)

‎slider/capture-effect-slider/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Capture Effect Slider
2+
3+
![Edit [Web] Capture Effect Slider](../../gifs/slider/capture-effect-slider.gif)

‎slider/capture-effect-slider/image/bg1.jpg

351 KB
Loading

‎slider/capture-effect-slider/image/bg2.jpg

405 KB
Loading

‎slider/capture-effect-slider/image/bg3.jpg

210 KB
Loading

‎slider/capture-effect-slider/image/bg4.jpg

374 KB
Loading

‎slider/capture-effect-slider/image/bg5.jpg

264 KB
Loading

‎slider/capture-effect-slider/index.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<link rel="shortcut icon" href="../../favicon.ico" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Capture Effect Slider</title>
11+
</head>
12+
13+
<body>
14+
<div class="slider">
15+
<input type="radio" name="slider">
16+
<div class="imgBox">
17+
<img src="./image/bg1.jpg" alt="_">
18+
<div class="content">
19+
<h2>Slide One</h2>
20+
<p>
21+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam velit porro rem temporibus ratione quas facilis
22+
optio perferendis cupiditate laboriosam? Fugit exercitationem laborum vitae quos at rem dignissimos
23+
praesentium, aperiam aliquam, dolorum amet earum optio iure. Nesciunt distinctio facere culpa.
24+
</p>
25+
<a href="#">Read More</a>
26+
</div>
27+
</div>
28+
<input type="radio" name="slider">
29+
<div class="imgBox">
30+
<img src="./image/bg2.jpg" alt="_">
31+
<div class="content">
32+
<h2>Slide Two</h2>
33+
<p>
34+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam velit porro rem temporibus ratione quas facilis
35+
optio perferendis cupiditate laboriosam? Fugit exercitationem laborum vitae quos at rem dignissimos
36+
praesentium, aperiam aliquam, dolorum amet earum optio iure. Nesciunt distinctio facere culpa.
37+
</p>
38+
<a href="#">Read More</a>
39+
</div>
40+
</div>
41+
<input type="radio" name="slider">
42+
<div class="imgBox">
43+
<img src="./image/bg3.jpg" alt="_">
44+
<div class="content">
45+
<h2>Slide Three</h2>
46+
<p>
47+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam velit porro rem temporibus ratione quas facilis
48+
optio perferendis cupiditate laboriosam? Fugit exercitationem laborum vitae quos at rem dignissimos
49+
praesentium, aperiam aliquam, dolorum amet earum optio iure. Nesciunt distinctio facere culpa.
50+
</p>
51+
<a href="#">Read More</a>
52+
</div>
53+
</div>
54+
<input type="radio" name="slider">
55+
<div class="imgBox">
56+
<img src="./image/bg4.jpg" alt="_">
57+
<div class="content">
58+
<h2>Slide Four</h2>
59+
<p>
60+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam velit porro rem temporibus ratione quas facilis
61+
optio perferendis cupiditate laboriosam? Fugit exercitationem laborum vitae quos at rem dignissimos
62+
praesentium, aperiam aliquam, dolorum amet earum optio iure. Nesciunt distinctio facere culpa.
63+
</p>
64+
<a href="#">Read More</a>
65+
</div>
66+
</div>
67+
<input type="radio" name="slider" checked>
68+
<div class="imgBox">
69+
<img src="./image/bg5.jpg" alt="_">
70+
<div class="content">
71+
<h2>Slide Five</h2>
72+
<p>
73+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam velit porro rem temporibus ratione quas facilis
74+
optio perferendis cupiditate laboriosam? Fugit exercitationem laborum vitae quos at rem dignissimos
75+
praesentium, aperiam aliquam, dolorum amet earum optio iure. Nesciunt distinctio facere culpa.
76+
</p>
77+
<a href="#">Read More</a>
78+
</div>
79+
</div>
80+
</div>
81+
</body>
82+
83+
</html>

‎slider/capture-effect-slider/style.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
}
9+
10+
body {
11+
background: #111;
12+
}
13+
14+
.slider {
15+
position: relative;
16+
width: 100%;
17+
min-height: 100vh;
18+
display: flex;
19+
justify-content: center;
20+
align-items: flex-end;
21+
background: #000;
22+
}
23+
.slider .imgBox {
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
width: 100%;
28+
height: 100%;
29+
padding: 100px;
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
transition: 0.5s;
34+
transition-delay: 0s;
35+
z-index: 1;
36+
clip-path: circle(0px at center);
37+
}
38+
.slider input[type="radio"]:checked + .imgBox {
39+
z-index: 10;
40+
clip-path: circle(1000px at center);
41+
transition-delay: 0.75s;
42+
}
43+
.slider .imgBox img {
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
width: 100%;
48+
height: 100%;
49+
object-fit: cover;
50+
}
51+
.slider .imgBox .content {
52+
position: relative;
53+
text-align: center;
54+
max-width: 800px;
55+
}
56+
.slider .imgBox .content h2 {
57+
font-size: 6em;
58+
line-height: 1em;
59+
color: #ffc371;
60+
}
61+
.slider .imgBox .content p {
62+
font-size: 1.1em;
63+
color: #ff5f6d;
64+
}
65+
.slider .imgBox .content a {
66+
position: relative;
67+
display: inline-block;
68+
background: #ffafbd;
69+
padding: 10px 30px;
70+
color: #8e2de2;
71+
font-weight: 500;
72+
margin-top: 20px;
73+
text-decoration: none;
74+
}
75+
.slider input[type="radio"] {
76+
position: relative;
77+
z-index: 1000;
78+
margin: 5px;
79+
margin-bottom: 40px;
80+
outline: none;
81+
cursor: pointer;
82+
}

0 commit comments

Comments
 (0)