This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
bandolier-template/client/components/SnapImage.svelte

68 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>