edits demos, documentation
This commit is contained in:
MinamiFunakoshiTR
parent
3ae074ab03
commit
0ab89de32a
9 changed files with 293 additions and 326 deletions
|
|
@ -2,7 +2,7 @@ import { Meta } from '@storybook/blocks';
|
|||
|
||||
import * as HorizontalScrollerStories from './HorizontalScroller.stories.svelte';
|
||||
|
||||
import IllustratorScreenshot from './assets/illustrator.png';
|
||||
import IllustratorScreenshot from './assets/illustrator.jpg';
|
||||
|
||||
<Meta of={HorizontalScrollerStories} />
|
||||
|
||||
|
|
@ -16,19 +16,20 @@ The child content inside the `HorizontalScroller` must be wider than `100vw` so
|
|||
|
||||
> 💡TIP: Use `lvh` or `svh` units instead of `vh` unit for the height, as [these units](https://www.w3.org/TR/css-values-4/#large-viewport-size) are more reliable on mobile or other devices where elements such as the address bar toggle between being shown and hidden.
|
||||
|
||||
Set the `showDebugInfo` prop to `true` to visualise the scroll progress and other useful information.
|
||||
> 💡TIP: Set the `showDebugInfo` prop to `true` to visualise the scroll progress and other useful information.
|
||||
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--demo)
|
||||
See the full list of available props under the `Controls` tab in the [demo](?path=/story/components-graphics-horizontalscroller--demo).
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { HorizontalScroller } from '@reuters-graphics/graphics-components';
|
||||
import { HorizontalScroller, Block } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
|
||||
<Block width="fluid">
|
||||
<!-- Optionally set `height` prop to adjust scroll length. Defaults to `200lvh` -->
|
||||
<HorizontalScroller>
|
||||
<!-- Child content wider than 100vw -->
|
||||
<!-- Child content wider than 100vw. Only the top 100lvh is visible. -->
|
||||
<div style="width: 400vw; height: 100lvh;">
|
||||
<img
|
||||
src="my-wide-image.jpg"
|
||||
|
|
@ -37,99 +38,260 @@ Set the `showDebugInfo` prop to `true` to visualise the scroll progress and othe
|
|||
/>
|
||||
</div>
|
||||
</HorizontalScroller>
|
||||
</Block>
|
||||
```
|
||||
|
||||
## Controlling scroll with stops and easing
|
||||
## Controlling scroll behaviour with stops and easing
|
||||
|
||||
The `HorizontalScroller` allows you to control the horizontal scroll experience using various props.
|
||||
The `HorizontalScroller` allows you to control the horizontal scroll behaviour and pacing with various props.
|
||||
|
||||
**`stops`:**
|
||||
|
||||
`stops` is an optional prop that accepts an array of numbers between `0` and `1` — which corresponds to the scroll `progress` — at which to stop or slow down the scrolling. This is useful for creating progress-based horizontal scrolling experiences.
|
||||
`stops` is an optional prop that accepts an array of numbers between `0` and `1`. At these points, which corresponds to the scroll `progress` values, the scrolling stops or slows down. This is useful for adding custom pauses based on progress.
|
||||
|
||||
For example, as shown in the demo below, if you define `stops` as `[0.2, 0.5, 0.6, 0.7]`, the scrolling will pause or slow down at these `progress` values as the user scrolls through the `HorizontalScroller` section.
|
||||
For example, as shown in the demo below, if you define `stops` as `[0.2, 0.5, 0.9]`, the scrolling will pause or slow down at these `progress` values as the user scrolls through the `HorizontalScroller` section.
|
||||
|
||||
**`scrubbed`, `duration`, and `easing`:**
|
||||
The `scrubbed` prop controls whether the scrolling tied exactly to the scroll position (`scrubbed: true`) or is smoothed out (`scrubbed: false`). The prop defaults to `true`.
|
||||
**`scrubbed`:**
|
||||
|
||||
If `scrubbed` is set to `false` and `stops` are defined, `HorizontalScroller` transitions smoothly between the stop values.
|
||||
The `scrubbed` prop controls whether the scrolling is tied exactly to the scroll position (`scrubbed: true`) or is smoothed out (`scrubbed: false`). This prop defaults to `true`.
|
||||
|
||||
when the `Mapped Progress` reaches the midpoint between the two stops. The transition speed is controlled by the `duration` prop (in milliseconds) and the `easing` prop (which accepts any easing function from `svelte/easing` or a custom function based on signature `(t: number) => number`).
|
||||
If `scrubbed` is set to `false` and `stops` are defined, the scrolling transitions smoothly between the stop values.
|
||||
|
||||
If `scrubbed` is set to `true` and `stops` are defined, all the stops are traversed at equal distance but based on the easing function provided.
|
||||
**`easing`** and **`duration`**:
|
||||
|
||||
`easing` accepts any easing function from `svelte/easing` or a custom easing function, while `duration` sets the time, in milliseconds, for each transition between stops.
|
||||
|
||||
So, if the stops are at irregular intervals — for example, `[0.2, 0.9]` — the scroll to the first stop will be much quicker than the scroll to the second stop since the distance to travel is different but the duration of the transition is the same.
|
||||
|
||||
|
||||
`Progress` indicates the scroll progress value between `0` and `1`. The `Mapped Progress` indicates the vertical progress mapped to `mappedStart` and `mappedEnd` values. By default these are 0 and 1 respectively. Finally, the `Eased Progress` value indicates the horizontal scroll progress after applying stops and easing (if any). `Eased Progress` accurately reflects the transition of horizontal scroll position.
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--demo)
|
||||
By default, `duration` is set to `400` milliseconds.
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--with-stops)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { HorizontalScroller } from '@reuters-graphics/graphics-components';
|
||||
import { HorizontalScroller, Block } from '@reuters-graphics/graphics-components';
|
||||
import { quartInOut } from 'svelte/easing';
|
||||
</script>
|
||||
|
||||
<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
|
||||
<Block width="fluid">
|
||||
<HorizontalScroller
|
||||
height="200lvh"
|
||||
stops={[0.2, 0.5, 0.6, 0.7]}
|
||||
stops={[0.2, 0.5, 0.9]}
|
||||
duration={400}
|
||||
scrubbed={false}
|
||||
easing={quartInOut}
|
||||
showDebugInfo
|
||||
direction="right"
|
||||
showDebugInfo={true}
|
||||
>
|
||||
<!-- Child content wider than 100vw. Only the top 100lvh is visible. -->
|
||||
<div style="width: 200vw; height: 100lvh;">
|
||||
<!-- Content wider than 100vw -->
|
||||
<!-- Only the top 100lvh will be visible -->
|
||||
<img
|
||||
src="path/to/wide-image.jpg"
|
||||
src="my-wide-image.jpg"
|
||||
alt="alt text"
|
||||
style="width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0;"
|
||||
/>
|
||||
</div>
|
||||
</HorizontalScroller>
|
||||
</Block>
|
||||
```
|
||||
|
||||
## Extended boundary
|
||||
## Extended boundaries
|
||||
|
||||
`HorizontalScroller` also provides `mappedStart` and `mappedEnd` props to extend the horizontal scroll boundaries beyond the default 0 to 1 range. This is useful when you want to create an overscroll effect or have more control over the horizontal scroll range. By default these values are set to 0 and 1 respectively.
|
||||
`HorizontalScroller` has `mappedStart` and `mappedEnd` props, which extend the horizontal scroll boundaries beyond the default 0 to 1 range. This is useful when you want to create an overscroll effect or have more control over the horizontal scroll range. By default, these values are set to 0 and 1 respectively.
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--extended-boundary)
|
||||
If using custom `mappedStart` and `mappedEnd` values, you must also set `stops` values that are within the mapped range.
|
||||
|
||||
> 💡TIP: In the debugging info box, `Progress` indicates the raw scroll progress value between `0` and `1`. `Mapped Progress` indicates the vertical progress mapped to `mappedStart` and `mappedEnd`. If they are not set, `Mapped Progress` is bound between 0 and 1 and matches `Progress`. `Eased Progress` indicates the scroll progress with any stops and easing applied. `Eased Progress` is what reflects the actual transition of the horizontal scroll position.
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--extended-boundaries)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { HorizontalScroller } from '@reuters-graphics/graphics-components';
|
||||
import { HorizontalScroller, Block } from '@reuters-graphics/graphics-components';
|
||||
import { quartInOut } from 'svelte/easing';
|
||||
</script>
|
||||
|
||||
<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
|
||||
<Block width="fluid">
|
||||
<HorizontalScroller
|
||||
height="200lvh"
|
||||
mappedStart={-0.5}
|
||||
mappedEnd={1.5}
|
||||
stops={[0, 1]}
|
||||
scrubbed={true}
|
||||
showDebugInfo={true}
|
||||
easing={quartInOut}
|
||||
direction="right"
|
||||
showDebugInfo
|
||||
>
|
||||
<!-- Child content wider than 100vw. Only the top 100lvh is visible. -->
|
||||
<div style="width: 200vw; height: 100lvh;">
|
||||
<!-- Content wider than 100vw -->
|
||||
<!-- Only the top 100lvh will be visible -->
|
||||
<img
|
||||
src="path/to/wide-image.jpg"
|
||||
src="my-wide-image.jpg"
|
||||
alt="alt text"
|
||||
style="width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0;"
|
||||
/>
|
||||
</div>
|
||||
</HorizontalScroller>
|
||||
</Block>
|
||||
```
|
||||
|
||||
## With ai2svelte components
|
||||
|
||||
With [ai2svelte](https://reuters-graphics.github.io/ai2svelte/) v1.0.3 onwards, you can export your ai2svelte graphic with a wider-than-viewport layout and use it directly inside `HorizontalScroller` to create horizontally scrolling graphics.
|
||||
|
||||
To do that, follow these steps:
|
||||
|
||||
1. In Illustrator, rename your artboard with the breakpoint at which you want that artboard to be visible on the page. For example, to make the XL artboard visible on viewports wider than 1200px, rename it to `xl:1200`. You can have multiple artboards with different breakpoints.
|
||||
2. Add these properties to the ai2svelte settings and run the script to export the component.
|
||||
|
||||
```yaml
|
||||
include_resizer_css: false
|
||||
respect_height: true
|
||||
allow_overflow: true
|
||||
```
|
||||
|
||||
<img
|
||||
src={IllustratorScreenshot}
|
||||
alt="Screenshot showing Illustrator document with artboard panel"
|
||||
/>
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--scrollable-ai-2-svelte)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { HorizontalScroller, Block } from '@reuters-graphics/graphics-components';
|
||||
import AiGraphic from './ai2svelte/ai-graphic.svelte';
|
||||
|
||||
// If using with the graphics kit
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
// Optional easing function
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
</script>
|
||||
|
||||
<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
|
||||
<Block width="fluid">
|
||||
<HorizontalScroller
|
||||
height="800lvh"
|
||||
easing={sineInOut}
|
||||
showDebugInfo
|
||||
>
|
||||
<AiGraphic assetsPath={assets} />
|
||||
</HorizontalScroller>
|
||||
</Block>
|
||||
```
|
||||
|
||||
## With ai2svelte components: advanced
|
||||
|
||||
You can use the bound prop `progress` to create advanced interactivity with an ai2svelte graphic.
|
||||
|
||||
The demo below has 2 advanced interactions: fade in/out of caption boxes based on scroll position and parallax movement of a `png` layer.
|
||||
|
||||
### Captions fading in/out
|
||||
|
||||
Caption boxes are exported as `htext` [tagged layers](https://reuters-graphics.github.io/ai2svelte/users/tagged-layers/) in ai2svelte. In this example, we use the `handleScroll()` function to check the position of each caption box relative to the viewport width and set its opacity to `1` (visible) or `0` (hidden) based on whether the caption box is within the `threshold` of the viewport.
|
||||
|
||||
### Parallax effect with png layer
|
||||
|
||||
This demo has a tagged `png` [layer](https://reuters-graphics.github.io/ai2svelte/users/tagged-layers/), which contains the foreground overlay image. The `handleScroll()` function uses the bound `progress` value to calculate a horizontal translation for the `png` layer, creating a parallax effect as the user scrolls through the `HorizontalScroller`.
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--scrollable-ai-2-svelte-advanced)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { HorizontalScroller, Block } from '@reuters-graphics/graphics-components';
|
||||
import AiGraphic from './ai2svelte/ai-graphic.svelte';
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
|
||||
// If using with the graphics kit
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
// bind progress for advanced interactivity
|
||||
let progress: number = $state(0);
|
||||
let pngLayer: HTMLElement | null;
|
||||
let captions: HTMLElement[] | null;
|
||||
let threshold = 0.8;
|
||||
let screenWidth: number = $state(0);
|
||||
|
||||
function handleScroll() {
|
||||
// Create a parallax movement for the foreground png layer
|
||||
if (pngLayer) {
|
||||
pngLayer.style.transform = `translateX(${map(progress, 0, 1, -400, 400)}px)`;
|
||||
}
|
||||
|
||||
// For each caption, checks if position of the caption is below the threshold.
|
||||
// If it is, show it. If not, hide it
|
||||
if (captions?.length) {
|
||||
captions.forEach((caption) => {
|
||||
let captionWidth = caption.getBoundingClientRect().width;
|
||||
let captionMidpoint =
|
||||
caption.getBoundingClientRect().left + captionWidth / 2;
|
||||
|
||||
if (
|
||||
captionMidpoint < screenWidth * threshold &&
|
||||
caption.style.opacity !== '1'
|
||||
) {
|
||||
caption.style.opacity = '1';
|
||||
} else if (
|
||||
captionMidpoint > screenWidth * threshold &&
|
||||
caption.style.opacity !== '0'
|
||||
) {
|
||||
caption.style.opacity = '0';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Refetch new captions and png image every time the artboard changes
|
||||
function onArtboardChange(artboard: HTMLElement) {
|
||||
pngLayer = artboard.querySelector('.g-png-layer-overlay');
|
||||
captions = Array.from(artboard.querySelectorAll('.g-captions'));
|
||||
|
||||
if (pngLayer) {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
window.addEventListener('scroll', handleScroll, {
|
||||
passive: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
|
||||
<Block width="fluid">
|
||||
<HorizontalScroller
|
||||
height="800lvh"
|
||||
bind:progress
|
||||
easing={sineInOut}
|
||||
showDebugInfo={true}
|
||||
>
|
||||
<AiGraphic assetsPath={assets} {onArtboardChange}
|
||||
taggedText={{
|
||||
htext: {
|
||||
captions: {
|
||||
caption1:
|
||||
'<div class="scroller-caption"><strong>Caption 1!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
caption2:
|
||||
'<div class="scroller-caption"><strong>Caption 2!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
caption3:
|
||||
'<div class="scroller-caption"><strong>Caption 3!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
caption4:
|
||||
'<div class="scroller-caption"><strong>Caption 4!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
},
|
||||
},
|
||||
}} />
|
||||
</HorizontalScroller>
|
||||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
:global(.scroller-caption) {
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 8px;
|
||||
filter: drop-shadow(0px 2px 16px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
## With custom child components
|
||||
|
||||
You can create a horizontal stack of any components and pass it as children to the `HorizontalScroller`. Here's an example of using `DatawrapperChart`, `Headline` and ai2svelte components inside the scroller.
|
||||
You can create a custom horizontal layout with any component and pass it as a child to the `HorizontalScroller`. Here's an example with `DatawrapperChart`, `Headline` and ai2svelte components laid out in a horizontal scroll.
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--custom-children)
|
||||
|
||||
|
|
@ -142,18 +304,11 @@ You can create a horizontal stack of any components and pass it as children to t
|
|||
HorizontalScroller,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import AiChart from './ai2svelte/ai-chart.svelte';
|
||||
import { quartInOut } from 'svelte/easing';
|
||||
</script>
|
||||
|
||||
<HorizontalScroller
|
||||
height="200lvh"
|
||||
stops={[0.2, 0.5, 0.6, 0.7]}
|
||||
duration={400}
|
||||
scrubbed={false}
|
||||
easing={quartInOut}
|
||||
direction="right"
|
||||
showDebugInfo
|
||||
>
|
||||
<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
|
||||
<Block width="fluid">
|
||||
<HorizontalScroller>
|
||||
<div id="horizontal-stack">
|
||||
<div style="width: 100vw;">
|
||||
<DatawrapperChart
|
||||
|
|
@ -181,6 +336,7 @@ You can create a horizontal stack of any components and pass it as children to t
|
|||
</div>
|
||||
</div>
|
||||
</HorizontalScroller>
|
||||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
#horizontal-stack {
|
||||
|
|
@ -194,188 +350,44 @@ You can create a horizontal stack of any components and pass it as children to t
|
|||
</style>
|
||||
```
|
||||
|
||||
## With ai2svelte components
|
||||
|
||||
With ai2svelte v1.0.3 onwards, you can export your ai2svelte graphic with a wider-than-viewport layout and use it directly inside the `HorizontalScroller` component to create horizontal scrolling graphics.
|
||||
|
||||
To do that, follow these steps:
|
||||
|
||||
1. In Illustrator, rename your artboard with a tag indicating breakpoint width for that artboard to be visible on page. For example, to make the XL artboard visible on viewports wider than 1200px, rename the artboard to `xl:1200`. You can have more than one artboard with different breakpoint widths.
|
||||
2. In ai2svelte settings, set these properties and run ai2svelte to export the component.
|
||||
|
||||
```yaml
|
||||
include_resizer_css: false
|
||||
respect_height: true
|
||||
allow_overflow: true
|
||||
```
|
||||
|
||||
<img
|
||||
src={IllustratorScreenshot}
|
||||
alt="Screenshot showing Illustrator document with artboard panel"
|
||||
/>
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--scrollable-ai-2-svelte)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { HorizontalScroller } from '@reuters-graphics/graphics-components';
|
||||
import AiGraphic from './ai2svelte/ai-graphic.svelte';
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
// If using with the graphics kit
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<HorizontalScroller
|
||||
width="fluid"
|
||||
height="800lvh"
|
||||
direction="right"
|
||||
easing={sineInOut}
|
||||
showDebugInfo
|
||||
>
|
||||
<AiGraphic assetsPath={assets} />
|
||||
</HorizontalScroller>
|
||||
```
|
||||
|
||||
## With ai2svelte components (advanced)
|
||||
|
||||
Binding the `progress` can be useful to even transition tagged content inside the ai2svelte graphic as part of the horizontal scrolling experience. For example, caption boxes exported as `htext` tagged layers can be animated to fade in/out or move in/out of view based on the scroll progress. Or one could even use tagged `png` layers to create parallax effects.
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--scrollable-ai-2-svelte-advanced)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { HorizontalScroller } from '@reuters-graphics/graphics-components';
|
||||
import AiGraphic from './ai2svelte/ai-graphic.svelte';
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
// If using with the graphics kit
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
// bind progress for advanced interactivity
|
||||
let progress: number = $state(0);
|
||||
let pngLayer: HTMLElement | null;
|
||||
let captions: HTMLElement[] | null;
|
||||
let threshold = 0.8;
|
||||
let screenWidth: number = $state(0);
|
||||
|
||||
function handleScroll() {
|
||||
// to create the parallax movement
|
||||
if (pngLayer) {
|
||||
pngLayer.style.transform = `translateX(${map(progress, 0, 1, -400, 400)}px)`;
|
||||
}
|
||||
|
||||
// for each caption, checks if position of the caption < 80vw
|
||||
// if it is, show it
|
||||
// if not, hide it
|
||||
if (captions?.length) {
|
||||
captions.forEach((caption) => {
|
||||
let captionWidth = caption.getBoundingClientRect().width;
|
||||
let captionMidpoint =
|
||||
caption.getBoundingClientRect().left + captionWidth / 2;
|
||||
|
||||
if (
|
||||
captionMidpoint < screenWidth * threshold &&
|
||||
caption.style.opacity !== '1'
|
||||
) {
|
||||
caption.style.opacity = '1';
|
||||
} else if (
|
||||
captionMidpoint > screenWidth * threshold &&
|
||||
caption.style.opacity !== '0'
|
||||
) {
|
||||
caption.style.opacity = '0';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// refetch new captions and png image
|
||||
// every time the artboard changes
|
||||
function onArtboardChange(artboard: HTMLElement) {
|
||||
pngLayer = artboard.querySelector('.g-png-layer-overlay');
|
||||
captions = Array.from(artboard.querySelectorAll('.g-captions'));
|
||||
|
||||
if (pngLayer) {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
window.addEventListener('scroll', handleScroll, {
|
||||
passive: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<HorizontalScroller
|
||||
width="fluid"
|
||||
height="800lvh"
|
||||
direction="right"
|
||||
bind:progress
|
||||
easing={sineInOut}
|
||||
showDebugInfo
|
||||
>
|
||||
<AiGraphic assetsPath={assets} {onArtboardChange} />
|
||||
</HorizontalScroller>
|
||||
|
||||
<style lang="scss">
|
||||
:global(.scroller-caption) {
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 8px;
|
||||
filter: drop-shadow(0px 2px 16px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## With ScrollerBase
|
||||
|
||||
You can also integrate HorizontalScroller with `ScrollerBase` for a horizontal scroll with vertical captions experience.
|
||||
You can also integrate HorizontalScroller with `ScrollerBase` for a horizontal scroll with vertical captions.
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--scrollable-ai-2-svelte)
|
||||
When using `HorizontalScroller` with `ScrollerBase` or other scrollers, you must:
|
||||
- Create a `progress` state variable and bind it to both `ScrollerBase` and `HorizontalScroller`
|
||||
- Set `HorizontalScroller`'s `height` to `100lvh`
|
||||
- Set `handleScroll` to `false`
|
||||
|
||||
[Demo](?path=/story/components-graphics-horizontalscroller--with-scroller-base)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import {
|
||||
HorizontalScroller,
|
||||
ScrollerBase,
|
||||
Block
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import AiGraphic from './ai2svelte/ai-graphic.svelte';
|
||||
import { circInOut } from 'svelte/easing';
|
||||
import { circInOut } from 'svelte/easing';
|
||||
|
||||
// Optional: Bind your own variables to use them in your code.
|
||||
let count = $state(1);
|
||||
let index = $state(0);
|
||||
let offset = $state(0);
|
||||
let progress = $state(0);
|
||||
let top = $state(0);
|
||||
let threshold = $state(0.5);
|
||||
let bottom = $state(1);
|
||||
</script>
|
||||
|
||||
<ScrollerBase
|
||||
{top}
|
||||
{threshold}
|
||||
{bottom}
|
||||
bind:count
|
||||
bind:index
|
||||
bind:offset
|
||||
bind:progress
|
||||
query="div.step-foreground-container"
|
||||
>
|
||||
<ScrollerBase bind:progress query="div.step-foreground-container">
|
||||
{#snippet backgroundSnippet()}
|
||||
<!-- Make sure to set height to `100lvh` -->
|
||||
<!-- and handleScroll to false to avoid scroll conflicts -->
|
||||
<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
|
||||
<Block width="fluid">
|
||||
<HorizontalScroller
|
||||
width="fluid"
|
||||
height="100lvh"
|
||||
direction="right"
|
||||
bind:progress
|
||||
scrubbed
|
||||
stops={[0.5]}
|
||||
height="100lvh"
|
||||
handleScroll={false}
|
||||
easing={circInOut}
|
||||
showDebugInfo
|
||||
showDebugInfo={true}
|
||||
>
|
||||
<Demo />
|
||||
<AiGraphic />
|
||||
</HorizontalScroller>
|
||||
</Block>
|
||||
{/snippet}
|
||||
{#snippet foregroundSnippet()}
|
||||
<!-- Add custom foreground HTML or component -->
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import HorizontalScroller from './HorizontalScroller.svelte';
|
||||
import { quartInOut } from 'svelte/easing';
|
||||
|
||||
import HorizontalScroller from './HorizontalScroller.svelte';
|
||||
import DemoComponent from './demo/Demo.svelte';
|
||||
import DemoSnippetBlock from './demo/DemoSnippet.svelte';
|
||||
import CustomChildrenBlock from './demo/CustomChildrenSnippet.svelte';
|
||||
import ScrollableGraphic from './demo/ScrollableGraphic.svelte';
|
||||
import AdvancedScrollableGraphic from './demo/AdvancedScrollableGraphic.svelte';
|
||||
import WithScrollerBaseComponent from './demo/withScrollerBase.svelte';
|
||||
import Block from '../Block/Block.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/Graphics/HorizontalScroller',
|
||||
|
|
@ -21,14 +21,6 @@
|
|||
|
||||
<svelte:window bind:innerWidth={width} />
|
||||
|
||||
{#snippet DemoSnippet()}
|
||||
<DemoSnippetBlock />
|
||||
{/snippet}
|
||||
|
||||
{#snippet CustomChildrenSnippet()}
|
||||
<CustomChildrenBlock />
|
||||
{/snippet}
|
||||
|
||||
<Story name="Demo">
|
||||
<DemoComponent>
|
||||
<DemoSnippetBlock />
|
||||
|
|
@ -36,53 +28,31 @@
|
|||
</Story>
|
||||
|
||||
<Story name="With stops and easing" exportName="WithStops">
|
||||
<Block width="fluid">
|
||||
<DemoComponent
|
||||
stops={[0.2, 0.5, 0.6, 0.7]}
|
||||
stops={[0.2, 0.5, 0.9]}
|
||||
duration={400}
|
||||
toggleScrub={true}
|
||||
easing={quartInOut}
|
||||
direction="left"
|
||||
>
|
||||
<DemoSnippetBlock />
|
||||
</DemoComponent>
|
||||
</Block>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Extended boundary"
|
||||
args={{
|
||||
children: DemoSnippet,
|
||||
height: '200lvh',
|
||||
mappedStart: -0.5,
|
||||
mappedEnd: 1.5,
|
||||
showDebugInfo: true,
|
||||
scrubbed: true,
|
||||
stops: [0, 1],
|
||||
easing: quartInOut,
|
||||
}}
|
||||
<Story name="Extended boundaries">
|
||||
<DemoComponent
|
||||
mappedStart={-0.5}
|
||||
mappedEnd={1.5}
|
||||
easing={quartInOut}
|
||||
stops={[0, 1]}
|
||||
>
|
||||
{#snippet children(args)}
|
||||
<DemoComponent {...args}></DemoComponent>
|
||||
{/snippet}
|
||||
<DemoSnippetBlock />
|
||||
</DemoComponent>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Custom children"
|
||||
args={{
|
||||
children: CustomChildrenSnippet,
|
||||
height: '200lvh',
|
||||
stops: [0.5],
|
||||
duration: 400,
|
||||
scrubbed: false,
|
||||
easing: quartInOut,
|
||||
showDebugInfo: true,
|
||||
direction: 'right',
|
||||
}}
|
||||
>
|
||||
{#snippet children(args)}
|
||||
<DemoComponent {...args}></DemoComponent>
|
||||
{/snippet}
|
||||
<Story name="Custom children">
|
||||
<DemoComponent>
|
||||
<CustomChildrenBlock />
|
||||
</DemoComponent>
|
||||
</Story>
|
||||
|
||||
<Story name="Scrollable ai2svelte">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { Tween } from 'svelte/motion';
|
||||
import { clamp, map } from './utils/index';
|
||||
import type { Action } from 'svelte/action';
|
||||
|
||||
import Debug from './Debug.svelte';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -210,7 +211,7 @@
|
|||
|
||||
<div
|
||||
{id}
|
||||
class={`horizontal-scroller-container ${cls}`}
|
||||
class="horizontal-scroller-container {cls}"
|
||||
style="height: {height};"
|
||||
bind:this={container}
|
||||
bind:clientHeight={containerHeight}
|
||||
|
|
|
|||
BIN
src/components/HorizontalScroller/assets/illustrator.jpg
Normal file
BIN
src/components/HorizontalScroller/assets/illustrator.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
|
|
@ -1,6 +1,8 @@
|
|||
<script lang="ts">
|
||||
import Demo from './graphic/ai2svelte/demo.svelte';
|
||||
import BodyText from '../../BodyText/BodyText.svelte';
|
||||
import Block from '../../Block/Block.svelte';
|
||||
|
||||
import HorizontalScroller from '../HorizontalScroller.svelte';
|
||||
import { map } from '../utils/index';
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
|
|
@ -57,9 +59,9 @@
|
|||
|
||||
<BodyText text={foobarText} />
|
||||
|
||||
<Block width="fluid">
|
||||
<HorizontalScroller
|
||||
height="800lvh"
|
||||
direction="right"
|
||||
bind:progress
|
||||
easing={sineInOut}
|
||||
showDebugInfo
|
||||
|
|
@ -71,18 +73,19 @@
|
|||
htext: {
|
||||
captions: {
|
||||
caption1:
|
||||
'<div class="scroller-caption"><strong>Destruction!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
'<div class="scroller-caption"><strong>Caption 1!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
caption2:
|
||||
'<div class="scroller-caption"><strong>Destruction!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
'<div class="scroller-caption"><strong>Caption 2!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
caption3:
|
||||
'<div class="scroller-caption"><strong>Destruction!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
'<div class="scroller-caption"><strong>Caption 3!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
caption4:
|
||||
'<div class="scroller-caption"><strong>Destruction!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
'<div class="scroller-caption"><strong>Caption 4!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</HorizontalScroller>
|
||||
</Block>
|
||||
|
||||
<BodyText text={foobarText} />
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,9 @@
|
|||
</Block>
|
||||
{/if}
|
||||
|
||||
<Block width="fluid">
|
||||
<HorizontalScroller showDebugInfo={true} {...args} {scrubbed} />
|
||||
</Block>
|
||||
|
||||
<BodyText text={foobarText} />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import Demo from './graphic/ai2svelte/demo.svelte';
|
||||
import BodyText from '../../BodyText/BodyText.svelte';
|
||||
import Block from '../../Block/Block.svelte';
|
||||
import HorizontalScroller from '../HorizontalScroller.svelte';
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
|
||||
|
|
@ -10,15 +11,11 @@
|
|||
|
||||
<BodyText text={foobarText} />
|
||||
|
||||
<HorizontalScroller
|
||||
height="800lvh"
|
||||
direction="right"
|
||||
easing={sineInOut}
|
||||
showDebugInfo
|
||||
>
|
||||
<Block width="fluid">
|
||||
<HorizontalScroller height="800lvh" easing={sineInOut}>
|
||||
<Demo />
|
||||
</HorizontalScroller>
|
||||
|
||||
</Block>
|
||||
<BodyText text={foobarText} />
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,49 +1,31 @@
|
|||
<script lang="ts">
|
||||
import Demo from './graphic/ai2svelte/demo.svelte';
|
||||
import BodyText from '../../BodyText/BodyText.svelte';
|
||||
import Block from '../../Block/Block.svelte';
|
||||
import HorizontalScroller from '../HorizontalScroller.svelte';
|
||||
import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
|
||||
import { circInOut } from 'svelte/easing';
|
||||
|
||||
const foobarText: string =
|
||||
'In the mystical land of Foobaristan, the legendary hero Foo set out on an epic quest to find his missing semicolon, only to discover that Bar had accidentally used it as a bookmark inside a JSON file. Naturally, the entire kingdom crashed immediately. As the villagers panicked, Foo and Bar tried to fix the situation by turning everything off and on again, but all that did was anger the ancient deity known as “The Build System,” which now demanded three sacrifices: a clean cache, a fresh node_modules folder, and someone’s weekend. And thus began the saga nobody asked for, yet every developer somehow relates to.';
|
||||
|
||||
// Optional: Bind your own variables to use them in your code.
|
||||
let count = $state(1);
|
||||
let index = $state(0);
|
||||
let offset = $state(0);
|
||||
let progress = $state(0);
|
||||
let top = $state(0);
|
||||
let threshold = $state(0.5);
|
||||
let bottom = $state(1);
|
||||
</script>
|
||||
|
||||
<BodyText text={foobarText} />
|
||||
|
||||
<ScrollerBase
|
||||
{top}
|
||||
{threshold}
|
||||
{bottom}
|
||||
bind:count
|
||||
bind:index
|
||||
bind:offset
|
||||
bind:progress
|
||||
query="div.step-foreground-container"
|
||||
>
|
||||
<ScrollerBase bind:progress query="div.step-foreground-container">
|
||||
{#snippet backgroundSnippet()}
|
||||
<!-- Add custom background HTML or component -->
|
||||
<Block width="fluid">
|
||||
<HorizontalScroller
|
||||
height="100lvh"
|
||||
direction="right"
|
||||
bind:progress
|
||||
scrubbed
|
||||
stops={[0.5]}
|
||||
height="100lvh"
|
||||
handleScroll={false}
|
||||
easing={circInOut}
|
||||
showDebugInfo
|
||||
>
|
||||
<Demo />
|
||||
</HorizontalScroller>
|
||||
</Block>
|
||||
{/snippet}
|
||||
{#snippet foregroundSnippet()}
|
||||
<!-- Add custom foreground HTML or component -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue