Content
Scroll reveal
Elements fade or slide in when they scroll into view.
Five ways in
Scroll this page down and back up, or reload it, to see them again.
Updata-pw-reveal
Fadedata-pw-reveal="fade"
From the leftdata-pw-reveal="left"
From the rightdata-pw-reveal="right"
Zoomdata-pw-reveal="zoom"
HTML
<div class="demo-grid-2">
<div class="demo-card" data-pw-reveal data-once="false"><b>Up</b><span>data-pw-reveal</span></div>
<div class="demo-card" data-pw-reveal="fade" data-once="false"><b>Fade</b><span>data-pw-reveal="fade"</span></div>
<div class="demo-card" data-pw-reveal="left" data-once="false"><b>From the left</b><span>data-pw-reveal="left"</span></div>
<div class="demo-card" data-pw-reveal="right" data-once="false"><b>From the right</b><span>data-pw-reveal="right"</span></div>
<div class="demo-card" data-pw-reveal="zoom" data-once="false"><b>Zoom</b><span>data-pw-reveal="zoom"</span></div>
</div>One after the other
A group gives each child a small delay.
First
Second
Third
Fourth
HTML
<div class="demo-grid-2" data-pw-reveal-group data-stagger="120">
<div class="demo-card"><b>First</b></div>
<div class="demo-card"><b>Second</b></div>
<div class="demo-card"><b>Third</b></div>
<div class="demo-card"><b>Fourth</b></div>
</div>Options
Set them as attributes on the element.
| Attribute | Default | What it does |
|---|---|---|
data-pw-reveal | up | fade, left, right or zoom. |
data-delay | Milliseconds to wait. | |
data-once | true | false: hide again when it leaves the view. |
data-pw-reveal-group | On a parent: reveals each child. The value is the way in. | |
data-stagger | 80 | On a group: delay between children, in milliseconds. |
Events
Listen with addEventListener. Details are in event.detail.
| Event | When |
|---|---|
pw:reveal | On the element when it comes into view. |
Good to know
- Without JavaScript everything is simply visible.
- If elements at the top of a page show for a moment before they animate, add this line to the
<head>:<script>document.documentElement.classList.add('pw-js')</script>. It hides them before the first paint. - People who ask their device for less motion see no animation.
- Printing shows everything.
- Do not put a reveal on text that people need at once, like the first heading of a page.
Files
Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/50-more.css, js/50-more.js.