Premium DOM Component
Multi-panel story with cool effectsby Read Write Tools
|The rwt-storyboard DOM component displays a sequence of panels that tell a story. Transitions from one panel to the next can slide-in or fade-in to dramatic effect. The content of each panel is provided by an HTML template, and the sequencing speed can be controlled by CSS variables.|
The rwt-storyboard DOM component is intended for use on web pages where the author wants to grab the reader's attention and funnel them towards a particular action.
The component has these features:
- Each panel may contain any arbitrary content and styling.
- Each panel may be transitioned to visibility using it's own effect.
- The first panel can be shown with an initial delay before the sequencing begins.
- The last panel can be shown with a final hold time before restarting the full sequence.
- Sequencing occurs only when the component is fully visible within the browser's viewport. It is suspended when the component is hidden or only partially visible.
- The user may suspend the auto-sequencing by clicking anywhere within the component's frame, and may resume the auto-sequencing by clicking the component a second time.
- Round buttons along the bottom of the storyboard allow the user to override the auto-sequencing to display a particular panel.
In the wild
To see an example of this component in use, visit the READ WRITE STACK website. Each page uses this component to tell a user story about apps, plugins and DOM components. To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity.
|Documentation||READ WRITE HUB|
|Component catalog||DOM COMPONENTS|
|Publication venue||READ WRITE STACK|