vance/vance.land
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

run after that banana bonzi

Browse Source
This commit is contained in:
vance 2024-05-05 15:52:18 -07:00
parent 2602f82d26
commit db3a938a0b
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
banana.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

35
index.html
View File

@ -21,7 +21,7 @@
color: #20C20E;
font-family: 'VT323', monospace;
font-size: 16pt;
cursor: none;
cursor: url('banana.png'), auto;
}
html {
@ -52,9 +52,10 @@
font-size: 1rem;
}
#cursor {
#bonzi {
position: absolute;
transform: translate(-95%, -45%);
transition: transform 0.8s;
transform-style: preserve-3d;
z-index: 1;
pointer-events: none;
}
@ -71,7 +72,7 @@
</head>
<body>
<img alt='cursor' id='cursor' src='bonzi.png'/>
<img alt='bonzi' id='bonzi' src='bonzi.png'/>
<iframe allowfullscreen height='360px' id='live' referrerpolicy='origin' scrolling='no'
src='https://live.vance.land/vance/' title='live.vance.land' width='640px'>
</iframe>
@ -135,14 +136,28 @@
}
};
const cursor = document.getElementById('cursor');
const bonzi = document.getElementById('bonzi');
const live = document.getElementById('live');
// bonzi cursor
// bonzi
let mouseTop = 0;
let mouseLeft = 0;
let bonziTop = 0;
let bonziLeft = 0;
const speed = 0.02;
function moveBonzi() {
bonzi.style.transform = bonziLeft > mouseLeft ? 'translate(5%, -35%) scaleX(-1)' : 'translate(-80%, -35%)';
bonziTop = bonziTop + ((mouseTop - bonziTop) * speed);
bonziLeft = bonziLeft + ((mouseLeft - bonziLeft) * speed);
bonzi.style.top = `${bonziTop}px`;
bonzi.style.left = `${bonziLeft}px`;
requestAnimationFrame(moveBonzi);
}
moveBonzi();
['mousemove', 'touchstart', 'touchmove'].forEach(type => {
window.addEventListener(type, event => {
cursor.style.top = (event.clientY || event.touches[0].clientY) + 'px';
cursor.style.left = (event.clientX || event.touches[0].clientX) + 'px';
mouseTop = event.clientY || event.touches[0].clientY;
mouseLeft = event.clientX || event.touches[0].clientX;
});
});
@ -156,8 +171,8 @@
// resize iframe if view width is smaller than frame
if (parseInt(live.width, 10) > vw) {
live.width = vw + 'px';
live.height = vw * (9 / 16) + 'px';
live.width = `${vw}px`;
live.height = `${vw * (9 / 16)}px`;
}
// check if stream active every 5 seconds