switched background to jaxtavi
This commit is contained in:
parent
bc7fe43e12
commit
074eeb057f
|
|
@ -1,10 +1,20 @@
|
|||
:root {
|
||||
--primary-pink: #F5A9B8;
|
||||
--primary-blue: #5BCFFA;
|
||||
--white: #FFFFFF;
|
||||
--dark-bg: #161618;
|
||||
--gray-blue: #A8C5DB;
|
||||
--dark-blue: #12354B;
|
||||
--dark-teal: #12404B;
|
||||
|
||||
}
|
||||
|
||||
display-imagebody,html{
|
||||
-ms-scroll-chaining:none;
|
||||
overscroll-behavior:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
background-image: url(../images/background.webp);
|
||||
background-color: black;
|
||||
background-color: var(--dark-bg);
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
font-family: "Noto Sans", serif;
|
||||
|
|
@ -29,6 +39,16 @@ display-imagebody,html{
|
|||
to{background-position:100px 0}
|
||||
}
|
||||
|
||||
.background-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.min-h-full{
|
||||
min-height:100vh
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
(() => {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const canvas = document.getElementById("backgroundCanvas");
|
||||
if (!canvas) return;
|
||||
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
|
||||
const ctx = canvas.getContext("2d", { alpha: true, desynchronized: true });
|
||||
|
||||
const isMobile = window.matchMedia("(max-width: 768px)").matches;
|
||||
const DPR_CAP = Math.min(1.5, isMobile ? 1.0 : 1.25);
|
||||
|
||||
const getOrbCount = () => {
|
||||
const baseCount = Math.floor((window.innerWidth * window.innerHeight) / 40000);
|
||||
return Math.min(Math.max(baseCount, isMobile ? 15 : 25), isMobile ? 30 : 50);
|
||||
};
|
||||
|
||||
const R_MIN = isMobile ? 3 : 4;
|
||||
const R_MAX = isMobile ? 8 : 12;
|
||||
const SPEED = isMobile ? 0.08 : 0.12;
|
||||
|
||||
const PINK = [245, 169, 184];
|
||||
const BLUE = [91, 207, 250];
|
||||
|
||||
let w = 0, h = 0, dpr = 1;
|
||||
let orbs = [];
|
||||
let raf = 0;
|
||||
let last = 0;
|
||||
|
||||
function resize() {
|
||||
w = window.innerWidth;
|
||||
h = window.innerHeight;
|
||||
|
||||
dpr = Math.min(DPR_CAP, window.devicePixelRatio || 1);
|
||||
canvas.width = Math.floor(w * dpr);
|
||||
canvas.height = Math.floor(h * dpr);
|
||||
canvas.style.width = w + "px";
|
||||
canvas.style.height = h + "px";
|
||||
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
createOrbs();
|
||||
last = 0;
|
||||
}
|
||||
|
||||
function createOrbs() {
|
||||
const count = getOrbCount();
|
||||
orbs = new Array(count);
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const r = Math.random() * (R_MAX - R_MIN) + R_MIN;
|
||||
const color = Math.random() > 0.5 ? PINK : BLUE;
|
||||
orbs[i] = {
|
||||
x: Math.random() * w,
|
||||
y: Math.random() * h,
|
||||
r,
|
||||
a: Math.random() * 0.15 + 0.4,
|
||||
vx: (Math.random() - 0.5) * SPEED,
|
||||
vy: (Math.random() - 0.5) * SPEED,
|
||||
color: color
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function step() {
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
for (let i = 0; i < orbs.length; i++) {
|
||||
const o = orbs[i];
|
||||
o.x += o.vx;
|
||||
o.y += o.vy;
|
||||
|
||||
const margin = o.r * 3;
|
||||
if (o.x < -margin) o.x = w + margin;
|
||||
else if (o.x > w + margin) o.x = -margin;
|
||||
if (o.y < -margin) o.y = h + margin;
|
||||
else if (o.y > h + margin) o.y = -margin;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(o.x, o.y, o.r, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(${o.color[0]}, ${o.color[1]}, ${o.color[2]}, ${o.a})`;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function tick(now) {
|
||||
if (document.hidden) {
|
||||
raf = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!last) last = now;
|
||||
if (now - last >= 16) {
|
||||
last = now;
|
||||
step();
|
||||
}
|
||||
|
||||
raf = requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
let resizeTimer;
|
||||
window.addEventListener("resize", () => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(resize, 150);
|
||||
}, { passive: true });
|
||||
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (document.hidden) {
|
||||
cancelAnimationFrame(raf);
|
||||
raf = 0;
|
||||
} else if (!raf) {
|
||||
last = 0;
|
||||
raf = requestAnimationFrame(tick);
|
||||
}
|
||||
});
|
||||
|
||||
resize();
|
||||
raf = requestAnimationFrame(tick);
|
||||
});
|
||||
})();
|
||||
17
index.html
17
index.html
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</link>
|
||||
<title>JaxOff Links</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
<script src="https://kit.fontawesome.com/14a35c233c.js" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
|
||||
<!-- Open Graph -->
|
||||
|
|
@ -32,13 +32,14 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Snowfall Background Animation -->
|
||||
<!-- Snowfall Background Animation
|
||||
<section class="animated-background">
|
||||
<div id="stars1"></div>
|
||||
<div id="stars2"></div>
|
||||
<div id="stars3"></div>
|
||||
</section>
|
||||
<!-- End of Snowfall Background Animation -->
|
||||
End of Snowfall Background Animation -->
|
||||
<canvas class="background-canvas" id="backgroundCanvas" aria-hidden="true"></canvas>
|
||||
|
||||
<div class="min-h-full flex-h-center" id="background_div">
|
||||
<div class="mt-48 page-full-wrap relative ">
|
||||
|
|
@ -202,7 +203,7 @@
|
|||
|
||||
<div class="page-item-wrap relative">
|
||||
<div class="page-item flex-both-center absolute"></div>
|
||||
<a target="_blank" class="page-item-each py-10 flex-both-center credit" href="https://credit.11tw.ink">
|
||||
<a class="page-item-each py-10 flex-both-center credit" href="https://credit.11tw.ink">
|
||||
<svg class="link-each-image">
|
||||
<use href="#svg-images"></use>
|
||||
</svg>
|
||||
|
|
@ -213,7 +214,7 @@
|
|||
|
||||
<div class="page-item-wrap relative">
|
||||
<div class="page-item flex-both-center absolute"></div>
|
||||
<a target="_blank" class="page-item-each py-10 flex-both-center colours" href="https://c.11tw.ink">
|
||||
<a class="page-item-each py-10 flex-both-center colours" href="https://c.11tw.ink">
|
||||
<svg class="link-each-image">
|
||||
<use href="#svg-palette"></use>
|
||||
</svg>
|
||||
|
|
@ -349,6 +350,7 @@
|
|||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="./assets/js/background.js" defer></script>
|
||||
|
||||
<!-- SVG Dump -->
|
||||
<svg style="display: none;">
|
||||
|
|
@ -435,10 +437,9 @@
|
|||
<path d="M576 320v2.7c-.4 36.5-33.6 61.3-70.1 61.3H408c-26.5 0-48 21.5-48 48 0 3.4.4 6.7 1 9.9 2.1 10.2 6.5 20 10.8 29.9 6.1 13.8 12.1 27.5 12.1 42 0 31.8-21.6 60.7-53.4 62-3.5.1-7 .2-10.6.2-141.4 0-256-114.6-256-256S178.6 64 320 64s256 114.6 256 256m-384 32c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32m0-96c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32m160-96c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32m96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32" />
|
||||
</symbol>
|
||||
|
||||
|
||||
|
||||
</svg>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<!--
|
||||
|
|
|
|||
Loading…
Reference in New Issue