깃허브에서 미리보기 : https://github.com/OhIkmyeong/marquee_text
GitHub - OhIkmyeong/marquee_text
Contribute to OhIkmyeong/marquee_text development by creating an account on GitHub.
github.com
사용방법 :
- HTML : marquee 시킬 텍스트들을 감싼 ul에 클래스 "marqueeText"를 지정합니다.
- 기본 : 수평, 왼쪽방향으로 흐름 (왼 < 오)
- .marqueeText.right : 수평, 오른쪽 방향으로 흐름 (왼 > 오)
- .marqueeText.vertical.down : 수직. 위에서 아래로 흐름
- .marqueeText.vertical : 아래에서 위로 흐름 (서타워즈 오프닝처럼 ㅎㅎ)
- CSS : marquee.css를 링크하거나 import합니다.
- JS : marquee 시킬 dom들을 변수에 배열로 넣어줍니다. (querySelectorAll('.marqueeText')
- marquee.js에서 MarqueeText 클래스를 import 하여 새로운 클래스를 생성하고, constructor 부분에 3번에서 만든 변수를 넣어줍니다.
끝!
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
57
58
59
60
61
|
<!DOCTYPE html>
<html lang="ko">
<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>marquee text generator</title>
<link rel="stylesheet" type="text/css" href="./src/reset.css"/>
<link rel="stylesheet" type="text/css" href="./src/marquee.css"/>
<script src="./main.js" type="module"></script>
</head>
<body>
<ul class="marqueeText">
<li>새로운 희망</li>
<li>제국의 역습</li>
<li>제다이의 귀환</li>
<li>보이지 않는 위험</li>
<li>클론전쟁</li>
<li>시스의 복수</li>
<li>로그원</li>
<li>만달로리안</li>
<li>북오브보바펫</li>
</ul>
<ul class="marqueeText right">
<li>새로운 희망</li>
<li>제국의 역습</li>
<li>제다이의 귀환</li>
<li>보이지 않는 위험</li>
<li>클론전쟁</li>
<li>시스의 복수</li>
<li>로그원</li>
<li>만달로리안</li>
<li>북오브보바펫</li>
</ul>
<ul class="marqueeText vertical down">
<li>새로운 희망</li>
<li>제국의 역습</li>
<li>제다이의 귀환</li>
<li>보이지 않는 위험</li>
<li>클론전쟁</li>
<li>시스의 복수</li>
<li>로그원</li>
<li>만달로리안</li>
<li>북오브보바펫</li>
</ul>
<ul class="marqueeText vertical">
<li>새로운 희망</li>
<li>제국의 역습</li>
<li>제다이의 귀환</li>
<li>보이지 않는 위험</li>
<li>클론전쟁</li>
<li>시스의 복수</li>
<li>로그원</li>
<li>만달로리안</li>
<li>북오브보바펫</li>
</ul>
</body>
</html>
|
cs |
marquee.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
|
@charset "utf-8";
.wrap-marqueeText{
/* outline:1px solid red; */
gap:3em;
position:relative; overflow:hidden;
width:80%;
margin:20px auto;
background:#000;
}
/* 수평 - 왼쪽으로 (기본) */
.marqueeText{
display:flex; flex-flow:row nowrap;
justify-content:flex-start; align-items:center;
gap:40px;
position:relative;}
/* 수직 */
.marqueeText.vertical{flex-flow:column nowrap;}
/* 애니메이션 */
.marqueeText li{
flex:none;
position:relative;
font-size:2rem; font-weight:bold;}
|
cs |
marquee.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
export class MarqueeText{
constructor($$marquee) {
this.$$marquee = $$marquee;
this.addStyle = document.createElement('style');
document.body.append(this.addStyle);
this.GAP = 40;
this.$$marquee.forEach(($marquee,idx) => {
this.init($marquee,idx);
});
}//constructor
/* [INIT] */
init($marquee,idx){
this.make_wrap($marquee);
this.add_animation($marquee,idx);
this.clone_li($marquee);
}//init
make_wrap($marquee){
const hei = $marquee.getBoundingClientRect().height;
const $wrap = document.createElement('DIV');
$wrap.classList.add('wrap-marqueeText');
$wrap.style.height = `${hei}px`;
$marquee.parentElement.insertBefore($wrap,$marquee);
$wrap.appendChild($marquee);
}//make_wrap
add_animation($marquee,idx){
let WID = 0;
let HEI = $marquee.getBoundingClientRect().height + this.GAP;
const $$li = $marquee.querySelectorAll('LI');
$$li.forEach($li => {
const li_wid = $li.getBoundingClientRect().width;
WID += li_wid + this.GAP;
});
let keyFrames;
const keyName = `mq_${idx}`;
if($marquee.classList.contains('right')){
keyFrames = `@keyframes ${keyName}{
from {transform:translateX(-${WID}px);}
to {transform:translateX(0)}}`;
}else if($marquee.classList.contains('vertical')){
if($marquee.classList.contains('down')){
keyFrames = `@keyframes ${keyName}{
from {transform:translateY(-${HEI}px);}
to {transform:translateY(0)}}`;
}else{
keyFrames = `@keyframes ${keyName}{to {transform:translateY(-${HEI}px)}}`;
}//if else
}else{
keyFrames = `@keyframes ${keyName}{to {transform:translateX(-${WID}px)}}`;
}//if else
this.addStyle.textContent += keyFrames;
$marquee.style.animation = `${keyName} 8s linear infinite`;
}//add_animation
clone_li($marquee){
const $$li = $marquee.querySelectorAll('LI');
const $frag = document.createDocumentFragment();
$$li.forEach($li => {
const $clone = $li.cloneNode(true);
$frag.appendChild($clone);
});
$marquee.appendChild($frag);
}//clone_li
}//MarqueeText
|
cs |
'CSS&JS > ✨개인 프로젝트' 카테고리의 다른 글
| 랜덤 친구 뽑기 (0) | 2022.04.18 |
|---|---|
| 딘자린 계산기 (0) | 2022.04.14 |
| 커밋 메세지 생성기 (0) | 2022.01.24 |
| 💞 커플 체크리스트 (0) | 2021.09.08 |
| CSS 만으로 삼각형 만들기 (0) | 2021.09.02 |