hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-23 10:49:49 +01:00
Code Issues Projects Releases Packages Wiki Activity

Revert "HeroBackground: Remove images+animations"

Browse source 
This reverts commit 4979bf2a39.
This commit is contained in:
VDawg 2023-10-24 18:41:52 +02:00
parent b4762f0dbd
commit 5da0d85244
2 changed files with 72 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,6 +12,12 @@ 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))
@ -50,11 +56,16 @@ function getHeroBackgroundTiles() {
} }
function generateTile() { function generateTile() {
return { color: getRandomColor() } return { color: getRandomColor(), image: Math.random() > 0.7 ? getRandomImage() : undefined }
} }
/** @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,8 +20,13 @@
<div class="workspace"> <div class="workspace">
{#each workspace as tiles} {#each workspace as tiles}
<div class="tiles"> <div class="tiles">
{#each tiles as { color }} {#each tiles as { color, image }}
<div class="tile" style:--color={color}></div> <div
class="tile"
style:--color={color}
class:with-image={image}
style:--image={`url(${image})`}
></div>
{/each} {/each}
</div> </div>
{/each} {/each}
@ -38,8 +43,13 @@
<div class="workspace"> <div class="workspace">
{#each workspace as tiles} {#each workspace as tiles}
<div class="tiles"> <div class="tiles">
{#each tiles as { color }} {#each tiles as { color, image }}
<div class="tile" style:--color={color}></div> <div
class="tile"
style:--color={color}
class:with-image={image}
style:--image={`url(${image})`}
></div>
{/each} {/each}
</div> </div>
{/each} {/each}
@ -169,6 +179,23 @@
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 {
@ -187,4 +214,33 @@
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>