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
| class TextScramble {
constructor(el) {
this.el = el;
this.chars = '!@#$%^&*()_-=+{}:"|<>?,./;';
this.update = this.update.bind(this);
}
setText(newText) {
const oldText = this.el.innerText;
const length = Math.max(oldText.length, newText.length);
const promise = new Promise((resolve) => this.resolve = resolve);
this.queue = [];
for (let i = 0; i < length; i++) {
const from = oldText[i] || '';
const to = newText[i] || '';
const start = Math.floor(Math.random() * 40);
const end = start + Math.floor(Math.random() * 40);
this.queue.push({
from,
to,
start,
end
})
}
cancelAnimationFrame(this.frameRequest);
this.frame = 0;
this.update();
return promise
}
update() {
let output = '';
let complete = 0;
for (let i = 0, n = this.queue.length; i < n; i++) {
let {
from,
to,
start,
end,
char
} = this.queue[i];
if (this.frame >= end) {
complete++;
output += to;
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar();
this.queue[i].char = char;
}
output += `<span class="dud">${char}</span>`;
} else {
output += from;
}
}
this.el.innerHTML = output;
if (complete === this.queue.length) {
this.resolve();
} else {
this.frameRequest = requestAnimationFrame(this.update);
this.frame++;
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)];
}
}
const phrases = ['Yes, I am a criminal.', 'My crime is that of curiosity.', 'My crime is that of judging people by what they say and think, not what they look like.', 'My crime is that of outsmarting you, something that you will never forgive me for.', 'I am a hacker, and this is my manifesto.', 'You may stop this individual, but you cant stop us all...', 'after all, were all alike.'];
const el = document.querySelector('.text');
const fx = new TextScramble(el);
let counter = 0;
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 1500);
});
counter = (counter + 1) % phrases.length
}
next()
'use strict';
var app = {
chars: ['PureHackers', 'Unleashed', '127.0.0.1', '1337', '0x523344', 'Localhost', 'Cr4sH CoD3', 'HACKED!', 'Security', 'Breached!', 'System'],
init: function () {
app.container = document.createElement('div');
app.container.className = 'animation-container';
document.body.appendChild(app.container);
window.setInterval(app.add, 100);
},
add: function () {
var element = document.createElement('span');
app.container.appendChild(element);
app.animate(element);
},
animate: function (element) {
var character = app.chars[Math.floor(Math.random() * app.chars.length)];
var duration = Math.floor(Math.random() * 15) + 1;
var offset = Math.floor(Math.random() * (50 - duration * 2)) + 3;
var size = 10 + (15 - duration);
element.style.cssText = 'right:' + offset + 'vw; font-size:' + size + 'px;animation-duration:' + duration + 's';
element.innerHTML = character;
window.setTimeout(app.remove, duration * 1000, element);
},
remove: function (element) {
element.parentNode.removeChild(element);
},
};
document.addEventListener('DOMContentLoaded', app.init);
|
