Skip to content

Commit a47d118

Browse files
committed
Add feature parallax special effects
1 parent e1083a1 commit a47d118

File tree

3 files changed

+101
-24
lines changed

3 files changed

+101
-24
lines changed

src/lib/FxParallax.svelte

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script>
2+
import Img from './SvelteImg.svelte'
3+
import observe from './_observe.js'
4+
import { onMount } from 'svelte'
5+
6+
let classes = ''
7+
export { classes as class }
8+
export let factor = 0.75
9+
export let ref = undefined
10+
11+
let mounted = false
12+
let inview = false
13+
let scrollY = 0
14+
let offsetHeight = 0
15+
let screenHeight = 0
16+
let stamp = 0
17+
let height = 100
18+
let offset = 0
19+
20+
function entered(e) {
21+
stamp = scrollY + e.detail.boundingClientRect.top
22+
inview = true
23+
}
24+
25+
$: if (screenHeight && offsetHeight) {
26+
height = 100 + Math.abs(factor - 1) * (screenHeight / offsetHeight - 1) * 100
27+
}
28+
29+
$: if (inview) {
30+
offset = Math.floor((scrollY - stamp) * Math.abs(factor - 1))
31+
}
32+
33+
onMount(() => {
34+
screenHeight = window.screen.height
35+
mounted = true
36+
})
37+
</script>
38+
39+
<svelte:window bind:scrollY />
40+
41+
<div
42+
class="wrap {classes}"
43+
class:mounted
44+
bind:offsetHeight
45+
use:observe
46+
on:enter={entered}
47+
on:leave={() => (inview = false)}
48+
>
49+
<Img
50+
style="height:{height}%;transform:translate(0,{offset}px)"
51+
bind:ref
52+
on:load
53+
on:click
54+
{...$$restProps}
55+
/>
56+
</div>
57+
58+
<style>
59+
.wrap {
60+
position: relative;
61+
overflow: hidden;
62+
}
63+
.wrap :global(img) {
64+
width: 100%;
65+
object-fit: cover;
66+
will-change: transform;
67+
margin: 0;
68+
}
69+
</style>

src/lib/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Img from './SvelteImg.svelte'
22
import FxReveal from './FxReveal.svelte'
3+
import FxParallax from './FxParallax.svelte'
34

4-
export { Img as default, FxReveal }
5+
export { Img as default, FxReveal, FxParallax }

src/routes/+page.svelte

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,8 @@ import cat12 from './cat12.jpg?run&width=640&height=640&fit=cover'
1414
import cat13 from './cat13.jpg?run&width=640&height=640&fit=cover'
1515
import cat14 from './cat14.jpg?run&width=640&height=640&fit=cover'
1616
import cat15 from './cat15.jpg?run&width=640&height=640&fit=cover'
17-
import Img, { FxReveal } from '$lib/index.js'
17+
import Img, { FxReveal, FxParallax } from '$lib/index.js'
1818
19-
const features = [
20-
[
21-
'Full width image in 10 variants - <code>avif/webp/jpg</code> formats at <code>480/1024/1920</code> widths, and a low-quality image placeholder (LQIP) background.',
22-
cat02
23-
],
24-
[
25-
'Delegate the heavy lifting to native browser handlers and existing build pipelines. The <code>svelte-img</code> component is intended to be a drop-in replacement of the native <code>&lt;img&gt;</code> tag and works as equivalently as possible.',
26-
cat03
27-
],
28-
[
29-
'Images still work without Javascript. Try disabling JS and refreshing the page. Also check out the lighthouse score.',
30-
cat04
31-
]
32-
]
3319
const dynamic = [cat05, cat06, cat07, cat08, cat09, cat10, cat11, cat12, cat13, cat14, cat15]
3420
let selected = 0
3521
</script>
@@ -46,23 +32,44 @@ let selected = 0
4632
</div>
4733
</div>
4834

49-
<div class="max-w-7xl mx-auto prose px-4 mb-28">
35+
<div class="max-w-7xl mx-auto prose px-4 mb-96">
5036
<h1>svelte-img</h1>
5137
<blockquote>
5238
Render the bare minimum, minimally invasive, LQIP-included HTML code to represent responsive
5339
images, served in multiple widths and next-gen formats.
5440
</blockquote>
5541

5642
<ol>
57-
{#each features as f}
58-
<li class="mb-12">
59-
<p>{@html f[0]}</p>
60-
<FxReveal class="w-full h-128 object-cover" src={f[1]} alt="cat" />
61-
</li>
62-
{/each}
43+
<li class="mb-12">
44+
<p>
45+
Easily render a responsive image in 10 variants - <code>avif/webp/jpg</code> formats at
46+
<code>480/1024/1920</code> widths, with a low-quality image placeholder (LQIP) background.
47+
</p>
48+
<Img class="w-full h-128 object-cover" src={cat02} alt="cat" />
49+
</li>
50+
51+
<li class="mb-12">
52+
<p>
53+
Or reveal images with fade-in special effects. Delegate the heavy lifting to native browser
54+
handlers and existing build pipelines. The <code>svelte-img</code>
55+
component is intended to be a drop-in replacement of the native <code>&lt;img&gt;</code> tag
56+
and tries to work as equivalently as possible.
57+
</p>
58+
<FxReveal class="w-full h-128 object-cover" src={cat03} alt="cat" />
59+
</li>
60+
61+
<li class="mb-12">
62+
<p>
63+
Or add parallax special effects to images. All images should still work without Javascript.
64+
Try disabling JS and refreshing the page. Also check out the lighthouse score.
65+
</p>
66+
<FxParallax class="w-full h-128" src={cat04} alt="cat" />
67+
</li>
68+
6369
<li>
6470
<p>
65-
Image <code>src</code> can be dynamically updated - well, this requires Javascript because interactivity.
71+
Image <code>src</code> can be dynamically updated - well, this requires Javascript because
72+
<em>interactivity</em>.
6673
</p>
6774
<div class="flex flex-col md:flex-row">
6875
<div class="flex justify-center">

0 commit comments

Comments
 (0)