[Hyperplexed]The Ultimate Hacker Effect That Anyone Can Do
데모 : https://ohikmyeong.github.io/hpp-hacker-effect
The Ultimate Hacker Effect That Anyone Can Do
ohikmyeong.github.io
글자위에 마우스 커서를 올렸을 때(mouseover) 해당 텍스트의 글자가 랜덤한 글자로 마구 바뀌다가 시간에 따라 첫글자부터 원래대로 돌아오는 효과. https://kprverse.com/ 의 메뉴 효과에서 따왔다고 한다...
여기서 그냥
(1) 개체별로 해당효과를 지정할 수 있게 클래스로 만들었고,
(2) 마우스를 여러번 올렸을 때 setInterval이 중복으로 발생하지 않도록 플래그를 추가했음.
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Ultimate Hacker Effect That Anyone Can Do</title>
<link rel="stylesheet" href="./css/style.css"/>
<script src="./js/main.js" type="module"></script>
</head>
<body>
<a href="https://www.youtube.com/watch?v=W5oawMJaXbU" target="_blank">[Hyperplexed]The Ultimate Hacker Effect That Anyone Can Do</a>
<h1 class="hackerEffect">Hyperplexed</h1>
<h2 class="hackerEffect">Hello World</h2>
</body>
</html>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
body{
background:#000;
font-size:3rem;
}
.hackerEffect{
color : #fff;
font-family: "Space Mono", monospace;
text-transform: uppercase;
}
|
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
52
53
54
55
56
57
58
59
|
class HackerEffectText{
set_dom($dom){
this.$dom = $dom;
this.originalText = this.$dom.textContent;
this.letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
this.flag = true;
return this;
}//set_dom
init(){
this.$dom.addEventListener('mouseover', this.on_mouse_over);
this.$dom.addEventListener('mouseleave',this.on_mouse_leave);
}//init
on_mouse_over = e =>{
if(!this.flag) return;
this.flag = false;
let count = 0;
const interval = setInterval(()=>{
const newStr = this.$dom.textContent.split('')
.map((_,idx) => {
if(idx < count){
return this.originalText[idx];
}else if(_ == " "){
return _;
}else{
return this.letters[this.get_random_idx()]
}
})
.join('');
this.$dom.textContent = newStr;
count += 0.3;
if(count >= this.originalText.length){
this.flag = true;
clearInterval(interval);
this.on_mouse_leave();
}
},60);
}//on_mouse_over
get_random_idx(){
return Math.floor(Math.random() * 36);
}//get_random_idx
on_mouse_leave = e =>{
this.$dom.textContent = this.originalText;
}//on_mouse_leave
}//HackerEffectText
/* ----------------------- */
const $$hefct = document.querySelectorAll('.hackerEffect');
$$hefct.forEach($hefct =>{
new HackerEffectText()
.set_dom($hefct)
.init();
})
|
cs |
'CSS&JS > 👀Study and Copy' 카테고리의 다른 글
| [Hyperplexed]opacity, blur 효과 매직완드 갤러리 (0) | 2023.07.12 |
|---|---|
| [Hyperplexed]패럴랙스 드래그 슬라이드 (0) | 2023.06.14 |
| [Hyperplexed] 인터랙티브한 마우스 커서 (0) | 2023.06.13 |
| [RIPT][JS][CANVAS] canvas로 드래그 가능한 사각형/원 만들기 (0) | 2023.04.17 |
| [JS] 자바스크립트 클래스 멀티 상속 (JavaScript Class Multiple Inheritance) (0) | 2023.03.31 |