hyprwm
/
hyprland-website
mirror of https://github.com/hyprwm/hyprland-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

HeroBackground: Remove images+animations

This commit is contained in:
Christofer 2023-09-21 17:33:15 +04:00
parent 1a22aa95f8
commit 4979bf2a39
2 changed files with 5 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/routes/+page.server.js
View File

@ -12,12 +12,6 @@ function getHeroBackgroundTiles() {
const workspaceHeight = 240 const workspaceHeight = 240
const gapLength = 32 const gapLength = 32
const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]] const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]]
const images = [
'/imgs/chan/joy.svg',
'/imgs/chan/surprise.svg',
'/imgs/chan/tongueout.svg',
'/imgs/waylnad.webp'
]
const leftColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow)) const leftColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
@ -56,16 +50,11 @@ function getHeroBackgroundTiles() {
} }
function generateTile() { function generateTile() {
return { color: getRandomColor(), image: Math.random() > 0.7 ? getRandomImage() : undefined } return { color: getRandomColor() }
} }
/** @returns {string} */ /** @returns {string} */
function getRandomColor() { function getRandomColor() {
return colors.at(Math.floor(Math.random() * colors.length)) return colors.at(Math.floor(Math.random() * colors.length))
} }
/** @returns {string} */
function getRandomImage() {
return images.at(Math.floor(Math.random() * images.length))
}
} }

64
src/routes/HeroBackground.svelte
View File

@ -20,13 +20,8 @@
<div class="workspace"> <div class="workspace">
{#each workspace as tiles} {#each workspace as tiles}
<div class="tiles"> <div class="tiles">
{#each tiles as { color, image }} {#each tiles as { color }}
<div <div class="tile" style:--color={color}></div>
class="tile"
style:--color={color}
class:with-image={image}
style:--image={`url(${image})`}
></div>
{/each} {/each}
</div> </div>
{/each} {/each}
@ -43,13 +38,8 @@
<div class="workspace"> <div class="workspace">
{#each workspace as tiles} {#each workspace as tiles}
<div class="tiles"> <div class="tiles">
{#each tiles as { color, image }} {#each tiles as { color }}
<div <div class="tile" style:--color={color}></div>
class="tile"
style:--color={color}
class:with-image={image}
style:--image={`url(${image})`}
></div>
{/each} {/each}
</div> </div>
{/each} {/each}
@ -179,23 +169,6 @@
animation: reveal-artwork_tile calc(var(--reveal-length) + 280ms) animation: reveal-artwork_tile calc(var(--reveal-length) + 280ms)
cubic-bezier(1, -0.4, 0.165, 1) forwards; cubic-bezier(1, -0.4, 0.165, 1) forwards;
} }
&.with-image::after {
content: ' ';
position: absolute;
inset: 0;
background-image: var(--image);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1520ms ease-in-out;
}
&:hover::after {
animation: reveal-artwork var(--reveal-length) ease-in-out 400ms both;
opacity: 1;
transition: opacity 1520ms ease-in-out;
}
} }
.top-light { .top-light {
@ -214,33 +187,4 @@
pointer-events: none; pointer-events: none;
contain: strict; contain: strict;
} }
@keyframes reveal-artwork {
0% {
opacity: 0%;
filter: brightness(1);
}
50% {
filter: brightness(1.45);
opacity: 40%;
}
100% {
filter: brightness(1);
opacity: 100%;
}
}
@keyframes reveal-artwork_tile {
0% {
opacity: inherit;
scale: 1;
}
50% {
filter: brightness(1.5);
scale: 1.1;
}
100% {
opacity: 100%;
scale: 1;
}
}
</style> </style>