정말 간단함. 직속자식들의 갯수만큼 animation_delay값을 줘서 class를 부여할것임
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text_clip</title>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<script src="./main.js" defer></script>
</head>
<body>
<!-- 해당 효과를 적용할 부모가 될 DOM을 지정합니다. id값은 아무렇게 줘도 되요. 클래스도 상관 없습니다.-->
<ul id="test" class="clipText">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
</ul>
</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
|
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
display:flex;flex-wrap:wrap;flex-direction:column;
}
.clipText{
position:relative;overflow:hidden;
width:500px;
margin:2rem auto; padding:1rem;
border:1px solid black;
font-size:20px;
}
.clipText > h1,
.clipText > p{position:relative;}
.on{animation:cliptext 1s ease-in-out both;}
@keyframes cliptext {
0%{
clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
transform:translateY(100%);
}
95%{
transform:translateY(0%);
}
100%{
clip-path:polygon(0% 00%, 100% 0%, 100% 100%, 0% 100%);
}
}
|
cs |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const SEC = 0.5;
function clip_text(dom){
const childs = dom.children;
for(let i=0; i<childs.length; i++){
childs[i].style.animationDelay = `${SEC * i}s`
childs[i].classList.add('on');
}
}
/* ✨ 실행 */
const test = document.getElementById('test');
const test2 = document.getElementById('test2');
const test3 = document.getElementById('test3');
clip_text(test);
clip_text(test2);
clip_text(test3);
|
cs |
+) 글자 한 글자씩 잘려서 밑에서부터 위로 올라오는 효과는 어떻게 하나?
그건 나중에...^^
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| [vanilla JS] 위 아래 버튼으로 list의 순서 바꾸기 (0) | 2021.09.27 |
|---|---|
| [vanilla JS] transform으로 드래그 시키기 (client 기준) (0) | 2021.09.01 |
| [vanilla JS] 터치 슬라이더, 그랩 슬라이더 (0) | 2021.08.02 |
| [JS] 트위터 이미지 불러오기 효과 (0) | 2021.07.13 |
| (vanilla JS) touch event로 snap 되는 grab slider 만들기 (0) | 2021.07.13 |