참고 : https://www.wellihillipark.com/
웰리힐리파크
www.wellihillipark.com
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>샘플 - 웰리힐리</title>
<link href="./wellihilli.css" rel="stylesheet" type="text/css"/>
<script src="wellihilli.js" defer></script>
</head>
<body>
<section id="wrapper">
<ul id="ul">
<li style="background-image:url(./img/1.jpg);">
<div class="hover_bg" style="--i:0;"><img src="./img/1.jpg" alt=""/></div>
<h2 class="li_title_area"><p class="li_title">Lorem<br>Ipsum</p></h2>
<article class="box">
<h3 class="box__title">Lorem Ipsum</h3>
<div class="box__txt">Lorem ipsum dolor sit amet consectetur adipisicing <br>ur adipisicing elit.</div>
<a href="#" class="a_btn">button__01</a>
<a href="#" class="a_btn">button__02</a>
</article><!-- box -->
</li><!-- li -->
<li style="background-image:url(./img/2.jpg);">
<div class="hover_bg" style="--i:1;"><img src="./img/2.jpg" alt=""/></div>
<h2 class="li_title_area"><p class="li_title">Lorem<br>Ipsum</p></h2>
<article class="box">
<h3 class="box__title">Lorem Ipsum</h3>
<div class="box__txt">Lorem ipsum dolor sit amet consectetur adipisicing <br>ur adipisicing elit.</div>
<a href="#" class="a_btn">button__01</a>
<a href="#" class="a_btn">button__02</a>
</article><!-- box -->
</li><!-- li -->
<li style="background-image:url(./img/3.jpg);">
<div class="hover_bg" style="--i:2;"><img src="./img/3.jpg" alt=""/></div>
<h2 class="li_title_area"><p class="li_title">Lorem<br>Ipsum</p></h2>
<article class="box">
<h3 class="box__title">Lorem Ipsum</h3>
<div class="box__txt">Lorem ipsum dolor sit amet consectetur adipisicing <br>ur adipisicing elit.</div>
<a href="#" class="a_btn">button__01</a>
<a href="#" class="a_btn">button__02</a>
</article><!-- box -->
</li><!-- li -->
<li style="background-image:url(./img/4.jpg);">
<div class="hover_bg" style="--i:3;"><img src="./img/4.jpg" alt=""/></div>
<h2 class="li_title_area"><p class="li_title">Lorem<br>Ipsum</p></h2>
<article class="box">
<h3 class="box__title">Lorem Ipsum</h3>
<div class="box__txt">Lorem ipsum dolor sit amet consectetur adipisicing <br>ur adipisicing elit.</div>
<a href="#" class="a_btn">button__01</a>
<a href="#" class="a_btn">button__02</a>
</article><!-- box -->
</li><!-- li -->
</ul><!-- ul -->
</section><!-- wrapper -->
</body>
</html>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
@charset "utf-8";
:root{
--teal : rgb(9, 94, 94);
}
*{margin:0;padding:0;box-sizing:border-box;}
li{list-style:none;list-style-type:none;}a{text-decoration:none;}
html,body{
width:100%;min-height:100vh;}
/* */
#wrapper{
position:relative;overflow:hidden;
width:100%;height:100vh;}
/* */
#ul{
display:flex;
position:relative;
width:100%;height:100%;}
#ul li{
position:relative;
width:25%;height:100%;
background-size:cover;
background-position:center center;
}
/* */
.hover_bg{
position:fixed; z-index:10;
top:0;left:0;
width:100vw;height:100vh;
transition:all 1s .5s;
opacity:0;
clip-path:polygon(
calc((var(--i) * 25%) + 12.5vw) 0%,
calc((var(--i) * 25%) + 12.5vw) 0%,
calc((var(--i) * 25%) + 12.5vw) 100%,
calc((var(--i) * 25%) + 12.5vw) 100%
);
}
.hover_bg img{width:100%;height:100%;object-fit:cover;}
.hover_bg.on{
transition:all 1s .15s;
opacity:1;
clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
/* */
.li_title_area{
position:absolute; z-index:50;
top:0;left:0;
width:100%; height:100%;
border-left:1px solid rgba(255,255,255,.25);
font-size:4rem;font-weight:bold;color:#fff;}
#ul li:first-child .li_title_area{border-left-color:transparent;}
.li_title{
position:absolute;
left:10%;top:40%;
cursor:pointer;
transition:all .5s .1s;}
.li_title.on{
opacity:0;
transition:all .5s 0s;
transform:translateY(-100%);
/* pointer-events:none; */
}
.li_title.off{
font-size:2rem;
transition:all .5s .5s;
transform:translateY(40vh);
/* pointer-events:none; */
}
/* */
.box{
display:flex;flex-wrap:wrap;flex-direction:column;
justify-content:center;
align-items:center;
position:absolute;
opacity:0;
width:100%;height:100%;
background:rgba(255,255,255,.5);
backdrop-filter:blur(10px);
text-align:center; color:var(--teal);
transition:all 1s;}
.box.on{opacity:1;z-index:100;}
.box__title{
font-size:2rem;font-weight:bold;}
.box__txt{
margin:1rem 0 2rem; padding:0 3rem;
font-size:1.2rem;}
.a_btn{
display:block;position:relative;
margin:.5em 0; padding:.8em 1.5em;
border:2px solid var(--teal); border-radius:10rem;
text-align:center;font-weight:bold;font-size:.9rem;color:var(--teal);}
.a_btn:hover{background:var(--teal);color:#fff;}
|
cs |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
const ul = document.getElementById('ul');
const li = ul.children;
const li_title = document.getElementsByClassName('li_title');
const boxes = document.getElementsByClassName('box');
const hover_bg = document.getElementsByClassName('hover_bg');
/* */
for(let title of li_title){
title.addEventListener('mouseenter',down_sibling);
}
for(let allLI of li){
allLI.addEventListener('mouseleave',reset_all);
}
function down_sibling(e){
e = e || window.event;
const thisLI = e.currentTarget.parentElement.parentElement;
const thisEQ = Array.prototype.indexOf.call(li,thisLI);
this.classList.add('on');
for(let i=0; i<li_title.length; i++){
if(i == thisEQ){continue;}
li_title[i].classList.add('off');
}
showBox(thisLI);
expand_img(thisEQ);
}
function showBox(thisLI){
const box = thisLI.getElementsByClassName('box')[0];
box.classList.add('on');
}
function expand_img(eq){
hover_bg[eq].classList.add('on');
}
function reset_all(){
for(let title of li_title){
title.classList.remove('on');
title.classList.remove('off');}
for(let thisBox of boxes){
thisBox.classList.remove('on');}
for(let img of hover_bg){
img.classList.remove('on');}
}
|
cs |
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| [JS] 트위터 이미지 불러오기 효과 (0) | 2021.07.13 |
|---|---|
| (vanilla JS) touch event로 snap 되는 grab slider 만들기 (0) | 2021.07.13 |
| (JS)wheel로 가로 스크롤 및 scroll indicator 만들기 (2) | 2021.07.01 |
| sin구하기 (0) | 2021.06.30 |
| atan2로 클릭한 좌표 따라 회전시키기 (0) | 2021.06.30 |