Skip to content

Instantly share code, notes, and snippets.

@p-baleine

p-baleine/cyberia.js

Last active July 5, 2020 03:42
Show Gist options
  • Save p-baleine/b789d4f87e29194b71abf2d9fc84aa34 to your computer and use it in GitHub Desktop.
Save p-baleine/b789d4f87e29194b71abf2d9fc84aa34 to your computer and use it in GitHub Desktop.
Download ZIP
Cyberia
Raw
cyberia.js
javascript:(function() { const bg = document.createElement('div'); const noiseSecond = 5; function charHtml(c) { let classes = 'c-container'; if (c === '') classes += ' await'; return `<div class="${classes}"> <div class="c">${c}</div> <div class="prompt">&#x02588;</div></div>`.trim(); } const line1 = [ 'ソ', 'ウ', 'ダ', '' ].map(charHtml).join('\n'); const line2 = [ 'サ', 'イ', 'ベ', 'リ', 'ア', '、', 'イ', 'コ', 'ウ', '。', '' ].map(charHtml).join('\n'); bg.innerHTML = `<div class="cyberia"> <style> @keyframes noise { 0% { opacity: 0 } 10% { opacity: .1 } 70% { opacity: .8 } 71% { opacity: .3 } /* ☆ */ 72% { opacity: .8 } 77% { opacity: .8 } 78% { opacity: .3 } /* ☆ */ 81% { opacity: .8 } 84% { opacity: .8 } 85% { opacity: .3 } /* ☆ */ 87% { opacity: .8 } 95% { opacity: .8 } 100% { opacity: 0 } } @keyframes lain { 0% { opacity: 0 } 70% { opacity: 0 } 71% { opacity: .8 } /* ☆ */ 72% { opacity: .3 } 78% { opacity: .8 } /* ☆ */ 81% { opacity: 0 } 85% { opacity: .8 } /* ☆ */ 100% { opacity: 0 } } @keyframes copy { 0% { opacity: 0 } 95% { opacity: 0 } 100% { opacity: .9 } } @keyframes prompt { 0% { opacity: 0 } 100% { opacity: .9 } } .cyberia { font-family: monaco, Consolas, "Lucida Console" "Hiragino Kaku Gothic ProN"; font-size: 16px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; } .cyberia .bg-noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(https://66.media.tumblr.com/tumblr_mbjwlvwO5R1reeolao1_500.gif); background-size: cover; animation: noise ${noiseSecond}s; } .cyberia .bg-lain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(https://steamuserimages-a.akamaihd.net/ugc/255965188109565887/BCC11EBFC8674C7E0AB0D8DA6F93FEF6A0F1DBFA/); background-size: cover; animation: lain ${noiseSecond}s linear; } .cyberia .copy { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; box-shadow: 0 0 50em #0008 inset; animation: copy ${noiseSecond}s linear; } .cyberia .copy .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2em; line-height: 1.5em; text-shadow: 2px 2px 5px #ff6666; color: #ff6666; font-weight: 800; } .cyberia .copy .content .l.no1 { margin-bottom: 7em; } .cyberia .copy .content .l.no2 { margin-left: 5em; } .cyberia .copy .c-container { position: relative; display: inline-block; width: 1em; } .cyberia .copy .c-container .c { position: absolute; display: none; } .cyberia .copy .c-container.active .c { position: absolute; display: block; } .cyberia .copy .c-container .prompt { position: absolute; display: none; animation: prompt 1s ease infinite; text-shadow: .5em .5em 5px #ff6666; } .cyberia .copy .c-container.waiting .prompt { display: block; } </style> <div class="bg-noise"></div> <div class="bg-lain"></div> <div class="copy"> <div class="content"> <div class="l no1"> ${line1} </div> <div class="l no2"> ${line2} </div> </div> </div></div>`.trim(); document.body.appendChild(bg.firstChild); function randn_bm() { let u = 0, v = 0; while(u === 0) u = Math.random(); while(v === 0) v = Math.random(); let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v ); num = num / 10.0 + 0.5; if (num > 1 || num < 0) return randn_bm(); return num; } function sleep(d = 1.0) { return new Promise((resolve) => { setTimeout(resolve, d); }); } function randomSleep(mu = 1.5) { return sleep(randn_bm() * mu * 1000); } const copy = document.querySelector('.cyberia .copy'); const text = document.querySelectorAll('.cyberia .copy .c-container'); async function type() { for (let c of text) { c.classList.add('waiting'); const t = c.classList.contains('await') ? 5 : .8; await randomSleep(t); c.classList.remove('waiting'); c.classList.add('active'); } } setTimeout(type, noiseSecond * 1000); }())
Raw
playground.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Untitled</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
your experience.
</p>
<![endif]-->
<!-- 00:30 -->
<div style="font-size: 100px">
hoge
</div>
<script>
(function() {
const bg = document.createElement('div');
const noiseSecond = 5;
function charHtml(c) {
let classes = 'c-container';
if (c === '') classes += ' await';
return `
<div class="${classes}">
<div class="c">${c}</div>
<div class="prompt">&#x02588;</div>
</div>`.trim();
}
const line1 = [
'ソ', 'ウ', 'ダ', ''
].map(charHtml).join('\n');
const line2 = [
'サ', 'イ', 'ベ', 'リ', 'ア', '、', 'イ', 'コ', 'ウ', '。', ''
].map(charHtml).join('\n');
bg.innerHTML = `
<div class="cyberia">
<style>
@keyframes noise {
0% { opacity: 0 }
10% { opacity: .1 }
70% { opacity: .8 }
71% { opacity: .3 } /* ☆ */
72% { opacity: .8 }
77% { opacity: .8 }
78% { opacity: .3 } /* ☆ */
81% { opacity: .8 }
84% { opacity: .8 }
85% { opacity: .3 } /* ☆ */
87% { opacity: .8 }
95% { opacity: .8 }
100% { opacity: 0 }
}
@keyframes lain {
0% { opacity: 0 }
70% { opacity: 0 }
71% { opacity: .8 } /* ☆ */
72% { opacity: .3 }
78% { opacity: .8 } /* ☆ */
81% { opacity: 0 }
85% { opacity: .8 } /* ☆ */
100% { opacity: 0 }
}
@keyframes copy {
0% { opacity: 0 }
95% { opacity: 0 }
100% { opacity: .9 }
}
@keyframes prompt {
0% { opacity: 0 }
100% { opacity: .9 }
}
.cyberia {
font-family: monaco, Consolas, "Lucida Console" "Hiragino Kaku Gothic ProN";
font-size: 16px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
.cyberia .bg-noise {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://66.media.tumblr.com/tumblr_mbjwlvwO5R1reeolao1_500.gif);
background-size: cover;
animation: noise ${noiseSecond}s;
}
.cyberia .bg-lain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://steamuserimages-a.akamaihd.net/ugc/255965188109565887/BCC11EBFC8674C7E0AB0D8DA6F93FEF6A0F1DBFA/);
background-size: cover;
animation: lain ${noiseSecond}s linear;
}
.cyberia .copy {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 0 0 50em #0008 inset;
animation: copy ${noiseSecond}s linear;
}
.cyberia .copy .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
line-height: 1.5em;
text-shadow: 2px 2px 5px #ff6666;
color: #ff6666;
font-weight: 800;
}
.cyberia .copy .content .l.no1 {
margin-bottom: 7em;
}
.cyberia .copy .content .l.no2 {
margin-left: 5em;
}
.cyberia .copy .c-container {
position: relative;
display: inline-block;
width: 1em;
}
.cyberia .copy .c-container .c {
position: absolute;
display: none;
}
.cyberia .copy .c-container.active .c {
position: absolute;
display: block;
}
.cyberia .copy .c-container .prompt {
position: absolute;
display: none;
animation: prompt 1s ease infinite;
text-shadow: .5em .5em 5px #ff6666;
}
.cyberia .copy .c-container.waiting .prompt {
display: block;
}
</style>
<div class="bg-noise"></div>
<div class="bg-lain"></div>
<div class="copy">
<div class="content">
<div class="l no1">
${line1}
</div>
<div class="l no2">
${line2}
</div>
</div>
</div>
</div>`.trim();
document.body.appendChild(bg.firstChild);
function randn_bm() {
let u = 0, v = 0;
while(u === 0) u = Math.random();
while(v === 0) v = Math.random();
let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
num = num / 10.0 + 0.5;
if (num > 1 || num < 0) return randn_bm();
return num;
}
function sleep(d = 1.0) {
return new Promise((resolve) => {
setTimeout(resolve, d);
});
}
function randomSleep(mu = 1.5) {
return sleep(randn_bm() * mu * 1000);
}
const copy = document.querySelector('.cyberia .copy');
const text = document.querySelectorAll('.cyberia .copy .c-container');
async function type() {
for (let c of text) {
c.classList.add('waiting');
const t = c.classList.contains('await') ? 5 : .8;
await randomSleep(t);
c.classList.remove('waiting');
c.classList.add('active');
}
}
setTimeout(type, noiseSecond * 1000);
}())
</script>
</body>
</html>
@p-baleine
Copy link
Author

p-baleine commented Jul 4, 2020 •
edited
Loading

使い方:

  1. 任意のページをブックマークする
  2. 1 のブックマークの「編集」をクリックする
  3. https://gist.github.com/p-baleine/b789d4f87e29194b71abf2d9fc84aa34/raw/f3c82624112d96a19ac77aa119745873f12e6a67/cyberia.js のコードを URL の欄にはりつけて保存する
  4. 任意のページを開いて、ブックマークをクリックする

output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment