This commit is contained in:
parent
218c01a1a1
commit
9924477482
7 changed files with 315 additions and 30 deletions
|
@ -1,37 +1,39 @@
|
||||||
div.scroll-banner {
|
html {
|
||||||
background-color: black;
|
background-image: url("../pics/bg-web3.gif");
|
||||||
position: absolute;
|
background-repeat: revert;
|
||||||
top: 0.2em;
|
color: white;
|
||||||
left: 0.1%;
|
|
||||||
width: 99.8%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.scroll-text {
|
div#scroll-banner {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 3px double white;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#scroll-text {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
animation: marquee 13s linear infinite;
|
animation: marquee 8s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.scroll-banner > div.scroll-text > * {
|
div#scroll-banner > div#scroll-text > * {
|
||||||
color: #ff6161;
|
font-size: 200%;
|
||||||
font-size: 150%;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes marquee {
|
@keyframes marquee {
|
||||||
from {
|
from {
|
||||||
transform: translateX(55%);
|
transform: translateX(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
transform: translateX(-100%);
|
transform: translateX(-140%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 850px) {
|
@media only screen and (max-width: 850px) {
|
||||||
/* Mobile display */
|
/* Mobile display */
|
||||||
div.info-text {
|
div#scroll-text {
|
||||||
animation: marquee 9s linear infinite;
|
animation: marquee 9s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -45,3 +47,24 @@ div.scroll-banner > div.scroll-text > * {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 250%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
a {
|
||||||
|
font-size: 125%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgb(147, 107, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
BIN
static/cursors/0.png
(Stored with Git LFS)
Normal file
BIN
static/cursors/0.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
static/cursors/1.png
(Stored with Git LFS)
Normal file
BIN
static/cursors/1.png
(Stored with Git LFS)
Normal file
Binary file not shown.
|
@ -1,7 +1,7 @@
|
||||||
window.addEventListener("load", () => main());
|
window.addEventListener("load", () => main());
|
||||||
|
|
||||||
const main = () => {
|
const main = () => {
|
||||||
// Handle change of focus
|
/* Handle change of focus */
|
||||||
const title = document.title;
|
const title = document.title;
|
||||||
const blurMessage = "Hey.. come back!";
|
const blurMessage = "Hey.. come back!";
|
||||||
|
|
||||||
|
@ -12,4 +12,223 @@ const main = () => {
|
||||||
window.addEventListener("focus", function () {
|
window.addEventListener("focus", function () {
|
||||||
document.title = title;
|
document.title = title;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* Mouse cursor */
|
||||||
|
const nb_available_cursors = 2;
|
||||||
|
const id = Math.floor(Math.random() * nb_available_cursors);
|
||||||
|
document.body.style = `cursor: url('/cursors/${id}.png'), default;`;
|
||||||
|
new cursoreffects.fairyDustCursor();
|
||||||
|
oneko();
|
||||||
|
|
||||||
|
/* Nb of visitors */
|
||||||
|
document.getElementById("visitors-number").innerHTML =
|
||||||
|
Math.floor(Math.random() * 3578) + 1312;
|
||||||
|
|
||||||
|
/* Scroll text */
|
||||||
|
document.getElementById("scroll-text").firstElementChild.innerHTML =
|
||||||
|
"WELCOME HERE IN MY WEBSPACE! ".repeat(3);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** https://github.com/adryd325/oneko.js */
|
||||||
|
const oneko = () => {
|
||||||
|
const nekoEl = document.createElement("div");
|
||||||
|
let nekoPosX = 32;
|
||||||
|
let nekoPosY = 32;
|
||||||
|
let mousePosX = 0;
|
||||||
|
let mousePosY = 0;
|
||||||
|
let frameCount = 0;
|
||||||
|
let idleTime = 0;
|
||||||
|
let idleAnimation = null;
|
||||||
|
let idleAnimationFrame = 0;
|
||||||
|
const nekoSpeed = 10;
|
||||||
|
const spriteSets = {
|
||||||
|
idle: [[-3, -3]],
|
||||||
|
alert: [[-7, -3]],
|
||||||
|
scratchSelf: [
|
||||||
|
[-5, 0],
|
||||||
|
[-6, 0],
|
||||||
|
[-7, 0],
|
||||||
|
],
|
||||||
|
scratchWallN: [
|
||||||
|
[0, 0],
|
||||||
|
[0, -1],
|
||||||
|
],
|
||||||
|
scratchWallS: [
|
||||||
|
[-7, -1],
|
||||||
|
[-6, -2],
|
||||||
|
],
|
||||||
|
scratchWallE: [
|
||||||
|
[-2, -2],
|
||||||
|
[-2, -3],
|
||||||
|
],
|
||||||
|
scratchWallW: [
|
||||||
|
[-4, 0],
|
||||||
|
[-4, -1],
|
||||||
|
],
|
||||||
|
tired: [[-3, -2]],
|
||||||
|
sleeping: [
|
||||||
|
[-2, 0],
|
||||||
|
[-2, -1],
|
||||||
|
],
|
||||||
|
N: [
|
||||||
|
[-1, -2],
|
||||||
|
[-1, -3],
|
||||||
|
],
|
||||||
|
NE: [
|
||||||
|
[0, -2],
|
||||||
|
[0, -3],
|
||||||
|
],
|
||||||
|
E: [
|
||||||
|
[-3, 0],
|
||||||
|
[-3, -1],
|
||||||
|
],
|
||||||
|
SE: [
|
||||||
|
[-5, -1],
|
||||||
|
[-5, -2],
|
||||||
|
],
|
||||||
|
S: [
|
||||||
|
[-6, -3],
|
||||||
|
[-7, -2],
|
||||||
|
],
|
||||||
|
SW: [
|
||||||
|
[-5, -3],
|
||||||
|
[-6, -1],
|
||||||
|
],
|
||||||
|
W: [
|
||||||
|
[-4, -2],
|
||||||
|
[-4, -3],
|
||||||
|
],
|
||||||
|
NW: [
|
||||||
|
[-1, 0],
|
||||||
|
[-1, -1],
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const create = () => {
|
||||||
|
nekoEl.id = "oneko";
|
||||||
|
nekoEl.style.width = "32px";
|
||||||
|
nekoEl.style.height = "32px";
|
||||||
|
nekoEl.style.position = "fixed";
|
||||||
|
nekoEl.style.pointerEvents = "none";
|
||||||
|
nekoEl.style.backgroundImage = "url('./pics/oneko.gif')";
|
||||||
|
nekoEl.style.imageRendering = "pixelated";
|
||||||
|
nekoEl.style.left = `${nekoPosX - 16}px`;
|
||||||
|
nekoEl.style.top = `${nekoPosY - 16}px`;
|
||||||
|
nekoEl.style.zIndex = "999";
|
||||||
|
|
||||||
|
document.body.appendChild(nekoEl);
|
||||||
|
|
||||||
|
document.onmousemove = (event) => {
|
||||||
|
mousePosX = event.clientX;
|
||||||
|
mousePosY = event.clientY;
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onekoInterval = setInterval(frame, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setSprite = (name, frame) => {
|
||||||
|
const sprite = spriteSets[name][frame % spriteSets[name].length];
|
||||||
|
nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetIdleAnimation = () => {
|
||||||
|
idleAnimation = null;
|
||||||
|
idleAnimationFrame = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const idle = () => {
|
||||||
|
idleTime++;
|
||||||
|
|
||||||
|
// every ~ 20 seconds
|
||||||
|
if (
|
||||||
|
idleTime > 10 &&
|
||||||
|
Math.floor(Math.random() * 200) == 0 &&
|
||||||
|
idleAnimation == null
|
||||||
|
) {
|
||||||
|
let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
|
||||||
|
if (nekoPosX < 32) {
|
||||||
|
avalibleIdleAnimations.push("scratchWallW");
|
||||||
|
}
|
||||||
|
if (nekoPosY < 32) {
|
||||||
|
avalibleIdleAnimations.push("scratchWallN");
|
||||||
|
}
|
||||||
|
if (nekoPosX > window.innerWidth - 32) {
|
||||||
|
avalibleIdleAnimations.push("scratchWallE");
|
||||||
|
}
|
||||||
|
if (nekoPosY > window.innerHeight - 32) {
|
||||||
|
avalibleIdleAnimations.push("scratchWallS");
|
||||||
|
}
|
||||||
|
idleAnimation =
|
||||||
|
avalibleIdleAnimations[
|
||||||
|
Math.floor(Math.random() * avalibleIdleAnimations.length)
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (idleAnimation) {
|
||||||
|
case "sleeping":
|
||||||
|
if (idleAnimationFrame < 8) {
|
||||||
|
setSprite("tired", 0);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
|
||||||
|
if (idleAnimationFrame > 192) {
|
||||||
|
resetIdleAnimation();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "scratchWallN":
|
||||||
|
case "scratchWallS":
|
||||||
|
case "scratchWallE":
|
||||||
|
case "scratchWallW":
|
||||||
|
case "scratchSelf":
|
||||||
|
setSprite(idleAnimation, idleAnimationFrame);
|
||||||
|
if (idleAnimationFrame > 9) {
|
||||||
|
resetIdleAnimation();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
setSprite("idle", 0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
idleAnimationFrame++;
|
||||||
|
};
|
||||||
|
|
||||||
|
const frame = () => {
|
||||||
|
frameCount++;
|
||||||
|
const diffX = nekoPosX - mousePosX;
|
||||||
|
const diffY = nekoPosY - mousePosY;
|
||||||
|
const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
|
||||||
|
|
||||||
|
if (distance < nekoSpeed || distance < 48) {
|
||||||
|
idle();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
idleAnimation = null;
|
||||||
|
idleAnimationFrame = 0;
|
||||||
|
|
||||||
|
if (idleTime > 1) {
|
||||||
|
setSprite("alert", 0);
|
||||||
|
// count down after being alerted before moving
|
||||||
|
idleTime = Math.min(idleTime, 7);
|
||||||
|
idleTime -= 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
direction = diffY / distance > 0.5 ? "N" : "";
|
||||||
|
direction += diffY / distance < -0.5 ? "S" : "";
|
||||||
|
direction += diffX / distance > 0.5 ? "W" : "";
|
||||||
|
direction += diffX / distance < -0.5 ? "E" : "";
|
||||||
|
setSprite(direction, frameCount);
|
||||||
|
|
||||||
|
nekoPosX -= (diffX / distance) * nekoSpeed;
|
||||||
|
nekoPosY -= (diffY / distance) * nekoSpeed;
|
||||||
|
|
||||||
|
nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16);
|
||||||
|
nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16);
|
||||||
|
|
||||||
|
nekoEl.style.left = `${nekoPosX - 16}px`;
|
||||||
|
nekoEl.style.top = `${nekoPosY - 16}px`;
|
||||||
|
};
|
||||||
|
|
||||||
|
create();
|
||||||
};
|
};
|
||||||
|
|
BIN
static/pics/bg-web3.gif
(Stored with Git LFS)
Normal file
BIN
static/pics/bg-web3.gif
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
static/pics/oneko.gif
(Stored with Git LFS)
Normal file
BIN
static/pics/oneko.gif
(Stored with Git LFS)
Normal file
Binary file not shown.
|
@ -46,12 +46,37 @@
|
||||||
{{#data}}
|
{{#data}}
|
||||||
<header>
|
<header>
|
||||||
<div id="scroll-banner">
|
<div id="scroll-banner">
|
||||||
<div id="scroll-text"></div>
|
<div id="scroll-text">
|
||||||
|
<p>...</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main></main>
|
<main>
|
||||||
|
<h1>anri's website</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
idk if you know but i do love
|
||||||
|
<img
|
||||||
|
src="//cdn.shopify.com/s/files/1/0154/2777/products/4_1024x1024.jpg"
|
||||||
|
alt="pic of a crab, mascot of rust"
|
||||||
|
width="10%"
|
||||||
|
/>(RUST)
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>in fact the whole website backend is 🦀🦀</p>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
<pre>
|
||||||
|
welcome to my web3 space feel free to send me nfts as jpeg format</pre
|
||||||
|
>
|
||||||
|
</h2>
|
||||||
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
<p>
|
||||||
|
you are the <span id="visitors-number">...</span><sup>th</sup> visitors!
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="badges">
|
<div class="badges">
|
||||||
<a href="//en.wikipedia.org/wiki/Template:Smile">
|
<a href="//en.wikipedia.org/wiki/Template:Smile">
|
||||||
<img
|
<img
|
||||||
|
@ -124,7 +149,7 @@
|
||||||
title="don't do it"
|
title="don't do it"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<a href="//archlinux.org/">
|
<a href="//wiki.archlinux.org/title/arch_is_the_best">
|
||||||
<img
|
<img
|
||||||
src="./badges/archlinux.gif"
|
src="./badges/archlinux.gif"
|
||||||
alt="arch linux"
|
alt="arch linux"
|
||||||
|
@ -140,15 +165,6 @@
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<iframe
|
|
||||||
src="//incr.easrng.net/badge?key=mylloon"
|
|
||||||
style="background: url(//incr.easrng.net/bg.gif)"
|
|
||||||
title="increment badge"
|
|
||||||
width="88"
|
|
||||||
height="31"
|
|
||||||
frameborder="0"
|
|
||||||
></iframe>
|
|
||||||
|
|
||||||
<a href="//bitwarden.com/">
|
<a href="//bitwarden.com/">
|
||||||
<img
|
<img
|
||||||
src="./badges/bitwarden.gif"
|
src="./badges/bitwarden.gif"
|
||||||
|
@ -241,12 +257,27 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<p>
|
|
||||||
|
<iframe
|
||||||
|
src="//incr.easrng.net/badge?key=mylloon"
|
||||||
|
style="background: url(//incr.easrng.net/bg.gif)"
|
||||||
|
title="increment badge"
|
||||||
|
width="88"
|
||||||
|
height="31"
|
||||||
|
frameborder="0"
|
||||||
|
></iframe>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<!-- <p>
|
||||||
<a href="//fediring.net/previous?host=mylloon.fr/web3">←</a>
|
<a href="//fediring.net/previous?host=mylloon.fr/web3">←</a>
|
||||||
<a href="//fediring.net/">Fediring</a>
|
<a href="//fediring.net/">Fediring</a>
|
||||||
<a href="//fediring.net/next?host=mylloon.fr/web3">→</a>
|
<a href="//fediring.net/next?host=mylloon.fr/web3">→</a>
|
||||||
</p>
|
<br />
|
||||||
|
<a href="//fediring.net/random">Randomize member</a>
|
||||||
|
</p> -->
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
|
||||||
<script src="js/web3.js"></script>
|
<script src="js/web3.js"></script>
|
||||||
{{/data}}
|
{{/data}}
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue