Skip to content

Instantly share code, notes, and snippets.

@joshnuss
Last active Mar 1, 2021
Embed
What would you like to do?
Slideshow moving in both X & Y directions
<script>
import { tweened } from 'svelte/motion'
const slideDimensions = {
width: 640,
height: 480
}
let stepIndex = 0
let slides = [
{
column: 1,
row: 1,
text: "A",
color: "red"
},
{
column: 1,
row: 2,
text: "B",
color: "green"
},
{
column: 1,
row: 3,
text: "C",
color: "purple"
},
{
column: 2,
row: 1,
text: "D",
color: "blue"
},
]
let steps = [
0,
1,
2,
0,
3
]
$: dimensions = {
height: max(slides, 'column') * slideDimensions.width,
width: max(slides, 'row') * slideDimensions.height
}
$: current = slides[steps[stepIndex]]
$: viewbox = {
x: (current.column-1) * slideDimensions.width,
y: (current.row-1) * slideDimensions.height,
width: slideDimensions.width,
height: slideDimensions.height
}
let tweenedX = tweened(0)
let tweenedY = tweened(0)
$: {
tweenedX.set(viewbox.x)
}
$: {
tweenedY.set(viewbox.y)
}
function max(array, key) {
const items = array.map(i => i[key])
return Math.max(...items)
}
function advance() {
if (stepIndex < steps.length - 1)
stepIndex ++
else
stepIndex = 0
}
</script>
<svelte:window on:click={advance} on:keyup={advance}/>
<!--
<pre>dimensions = {JSON.stringify(dimensions)}</pre>
<pre>viewbox = {JSON.stringify(viewbox)}</pre>
-->
<main>
<svg viewBox="{$tweenedX} {$tweenedY} {viewbox.height} {viewbox.width}" width="100%" preserveAspectRatio="xMinYMid slice">
{#each slides as slide, i}
<rect
x={(slide.column-1) * slideDimensions.width}
y={(slide.row-1) * slideDimensions.height}
width={slideDimensions.width}
height={slideDimensions.height}
fill={slide.color}
/>
<text x={(slide.column * slideDimensions.width) - (slideDimensions.width * 0.5)}
y={(slide.row * slideDimensions.height) - (slideDimensions.height * 0.5)}>
{slide.text}
</text>
{/each}
</svg>
</main>
<style>
:global(body) {
height: 100vh;
display: flex;
padding: 0;
}
svg {
}
text {
fill: white;
font-size: 5rem;
text-anchor: middle;
}
main {
width: 100vw;
height: 100vh;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment