You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.0 KiB
67 lines
2.0 KiB
<script>
|
|
import rando from 'randomcolor';
|
|
import { visibility } from "$/client/helpers.js";
|
|
|
|
export let width = 800;
|
|
export let height = 450;
|
|
// if you don't set any colors then it will use randomColor with these options
|
|
export let random_options = {hue: "monochrome", "format": "rgbArray", "luminosity": "random", count: 10};
|
|
// default colors are simple grays taken from a still image
|
|
export let colors = rando(random_options);
|
|
export let src = "";
|
|
export let lazy = false;
|
|
let show_image = false;
|
|
let img_id = `image-${Math.floor(Math.random() * 1000000)}`;
|
|
let in_view = false;
|
|
|
|
const visible = () => in_view = true;
|
|
|
|
const image_loaded = () => show_image = true;
|
|
|
|
</script>
|
|
|
|
<style>
|
|
img {
|
|
z-index: -1;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
img.visible {
|
|
opacity: 1;
|
|
transition: opacity 0.5s;
|
|
}
|
|
|
|
svg {
|
|
z-index: 1;
|
|
opacity: 1;
|
|
}
|
|
|
|
svg.hidden {
|
|
opacity: 0.5;
|
|
transition: opacity 0.5s;
|
|
z-index: -1;
|
|
}
|
|
</style>
|
|
|
|
<cover class="stacked" use:visibility on:visible={ visible }>
|
|
|
|
<svg class="layer" class:hidden={ show_image && in_view } xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 {width} {height}">
|
|
<filter id="blur" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
<feGaussianBlur stdDeviation="40 40" edgeMode="duplicate" />
|
|
<feComponentTransfer>
|
|
<feFuncA type="discrete" tableValues="1 1" />
|
|
</feComponentTransfer>
|
|
</filter>
|
|
<g filter="url(#blur)">
|
|
{#each colors as row,i}
|
|
{#each colors as color,j}
|
|
<rect x="{ i * width / colors.length }" y="{ j * height / colors.length}" width="{ width / colors.length}" height="{ height / colors.length}" stroke="none" fill="rgb({ colors[Math.floor(Math.random() * colors.length)] })" fill-opacity="1" stroke-opacity="0.8" />
|
|
{/each}
|
|
{/each}
|
|
</g>
|
|
</svg>
|
|
|
|
{#if in_view}
|
|
<img class="layer" class:visible={ show_image } src={src} id={ img_id } loading={ lazy ? 'lazy' : 'eager'} on:load={ image_loaded }>
|
|
{/if}
|
|
</cover>
|
|
|