owo
This commit is contained in:
codepupper
commit
9f77e7cfe1
12 changed files with 2013 additions and 0 deletions
102
assets/css/x.css
Normal file
102
assets/css/x.css
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
a:not(#yugen) {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-bottom: 1vh solid #dadada;
|
||||
border-right: 1vh solid #dadada;
|
||||
border-left: 1vh solid #dadada;
|
||||
border-top: 1vh solid #dadada;
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100vh;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 7vw;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#home {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#thaldrin {
|
||||
background: #ff841f;
|
||||
}
|
||||
|
||||
#kaito {
|
||||
background: #96400e;
|
||||
}
|
||||
|
||||
#Twitter {
|
||||
background: #1DA1F2;
|
||||
}
|
||||
|
||||
#homepage {
|
||||
background: #d83333;
|
||||
}
|
||||
|
||||
#yiff {
|
||||
background: #e01653;
|
||||
}
|
||||
|
||||
#portfolio {
|
||||
background: #2022a0;
|
||||
}
|
||||
|
||||
#yugen {
|
||||
background: #ffffff;
|
||||
color: #000;
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
#yugen button {
|
||||
background: #ffffff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 2vw;
|
||||
border-style: none;
|
||||
padding: 1vh;
|
||||
background: white;
|
||||
}
|
||||
/*# sourceMappingURL=x.css.map */
|
||||
9
assets/css/x.css.map
Normal file
9
assets/css/x.css.map
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA,OAAO,CAAC,mEAAI;AAEZ,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CAAG;;AAGjB,AAAA,IAAI,CAAC;EACD,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,qBAAqB;CAAG;;AAEzC,AAAA,CAAC,AAAA,IAAK,CAAA,MAAM,EAAE;EACV,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,WAAW;CAAG;;AAE1B,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;EACrB,aAAa,EAAE,iBAAiB;EAChC,YAAY,EAAE,iBAAiB;EAC/B,WAAW,EAAE,iBAAiB;EAC9B,UAAU,EAAE,iBAAiB;CAAG;;AACpC,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,KAAK;EACb,YAAY,EAAE,IAAI;CAAG;;AAEzB,AAAA,EAAE,CAAC;EACC,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;CAAG;;AAE9B,AAAA,KAAK,CAAC;EACF,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AAEzB,AAAA,SAAS,CAAC;EACN,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,QAAQ,CAAC;EACL,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,SAAS,CAAC;EACN,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,KAAK,CAAC;EACF,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,UAAU,CAAC;EACP,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,GAAG;CAGQ;;AANxB,AAII,MAJE,CAIF,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;CAAG;;AAEtB,AAAA,QAAQ,CAAC;EACL,OAAO,EAAE,MAAM;CAAG;;AAEtB,AAAA,MAAM,CAAC;EACC,SAAS,EAAE,GAAG;EACd,YAAY,EAAE,IAAI;EAClB,OAAO,EAAE,GAAG;EACZ,UAAU,EAAE,KAAK;CAAG",
|
||||
"sources": [
|
||||
"x.sass"
|
||||
],
|
||||
"names": [],
|
||||
"file": "x.css"
|
||||
}
|
||||
75
assets/css/x.sass
Normal file
75
assets/css/x.sass
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap')
|
||||
|
||||
*
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
|
||||
body
|
||||
background-color: black
|
||||
color: white
|
||||
font-family: 'Poppins', sans-serif
|
||||
|
||||
a:not(#yugen)
|
||||
color: white
|
||||
text-decoration: none
|
||||
border: transparent
|
||||
|
||||
a
|
||||
color: white
|
||||
text-decoration: none
|
||||
border-bottom: 1vh solid #dadada
|
||||
border-right: 1vh solid #dadada
|
||||
border-left: 1vh solid #dadada
|
||||
border-top: 1vh solid #dadada
|
||||
section
|
||||
height: 100vh
|
||||
border-style: none
|
||||
|
||||
h1
|
||||
font-size: 7vw
|
||||
height: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
#home
|
||||
background-color: black
|
||||
color: white
|
||||
font-style: italic
|
||||
|
||||
#thaldrin
|
||||
background: #ff841f
|
||||
|
||||
#kaito
|
||||
background: #96400e
|
||||
|
||||
#Twitter
|
||||
background: #1DA1F2
|
||||
|
||||
#homepage
|
||||
background: #d83333
|
||||
|
||||
#yiff
|
||||
background: #e01653
|
||||
|
||||
#portfolio
|
||||
background: #2022a0
|
||||
|
||||
#yugen
|
||||
background: #ffffff
|
||||
color: #000
|
||||
padding: 2vw
|
||||
button
|
||||
background: #ffffff
|
||||
color: #000
|
||||
|
||||
.buttons
|
||||
display: inline
|
||||
|
||||
button
|
||||
font-size: 2vw
|
||||
border-style: none
|
||||
padding: 1vh
|
||||
background: white
|
||||
76
assets/js/main.js
Normal file
76
assets/js/main.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
// ——————————————————————————————————————————————————
|
||||
// TextScramble
|
||||
// ——————————————————————————————————————————————————
|
||||
|
||||
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)];
|
||||
}
|
||||
}
|
||||
|
||||
// ——————————————————————————————————————————————————
|
||||
// Example
|
||||
// ——————————————————————————————————————————————————
|
||||
|
||||
const phrases = [ 'Portfolio', 'Discord', 'Twitter', 'Websites' ];
|
||||
|
||||
const el = document.querySelector('.text');
|
||||
const fx = new TextScramble(el);
|
||||
|
||||
let counter = 0;
|
||||
const next = () => {
|
||||
fx.setText(phrases[counter]).then(() => {
|
||||
setTimeout(next, 1000 * 1);
|
||||
});
|
||||
counter = (counter + 1) % phrases.length;
|
||||
};
|
||||
|
||||
next();
|
||||
Loading…
Add table
Add a link
Reference in a new issue