@st-graphics/scrolly
Opensource scrollytelling components used by Straits Times Interactive Graphics Team
Modern
Uses `position: sticky`. No unsightly jerk when sticky content "snap" into position. Fallbacks to `position: fixed` in older browsers.
Declarative
Experiment with different scrollytelling formats effortlessly using our simple declarative API.
Flexible
Uses `slots` and `render props` giving user the flexibility to include any content and implement transition in different ways.
# Installing
npm install @st-graphics/scrolly
1
or
npm install @st-graphics/react-scrolly
1
# Usage
# With Vue
<template>
<st-scrolly>
<template v-slot:background="{slideIndex}"><!-- your sticky content--></template>
<!-- your slides content -->
</st-scrolly>
</tempate>
<script>
import '@st-graphics/scrolly/dist/bundle.css'
import StScrolly from '@st-graphics/scrolly'
export default {
components: {StScrolly}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# With React
import '@st-graphics/react-scrolly/dist/bundle.css'
import StScrolly from '@st-graphics/react-scrolly'
export function (props) {
const renderBackground = ({slideIndex}) => (
<!-- your sticky content -->
)
return (
<StScrolly renderBackground={renderBackground}>
<!-- your slides content-->
</StScrolly>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13