Fragments
Fragments are used to highlight or incrementally reveal individual elements on a slide. Every element with the classfragment will be stepped through before moving on to the next slide.
The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment.
<pclass="fragment">Fade in</p><pclass="fragment fade-out">Fade out</p><pclass="fragment highlight-red">Highlight red</p><pclass="fragment fade-in-then-out">Fade in, then out</p><pclass="fragment fade-up">Slide up while fading in</p>Fade in
Fade out
Highlight red
Fade in, then out
Slide up while fading in
| Name | Effect |
|---|---|
| fade-out | Start visible, fade out |
| fade-up | Slide up while fading in |
| fade-down | Slide down while fading in |
| fade-left | Slide left while fading in |
| fade-right | Slide right while fading in |
| fade-in-then-out | Fades in, then out on the next step |
| current-visible | Fades in, then out on the next step |
| fade-in-then-semi-out | Fades in, then to 50% on the next step |
| grow | Scale up |
| semi-fade-out | Fade out to 50% |
| shrink | Scale down |
| strike | Strike through |
| highlight-red | Turn text red |
| highlight-green | Turn text green |
| highlight-blue | Turn text blue |
| highlight-current-red | Turn text red, then back to original on next step |
| highlight-current-green | Turn text green, then back to original on next step |
| highlight-current-blue | Turn text blue, then back to original on next step |
Custom Fragments4.5.0
Custom effects can be implemented by defining CSS styles for.fragment.effectname and.fragment.effectname.visible respectively. Thevisible class is added to each fragment as they are stepped through in the presentation.
For example, the following defines a fragment style where elements are initially blurred but become focused when stepped through.
<style>.fragment.blur{filter:blur(5px);}.fragment.blur.visible{filter: none;}</style><section><pclass="fragment custom blur">One</p><pclass="fragment custom blur">Two</p><pclass="fragment custom blur">Three</p></section>One
Two
Three
Note that we are adding acustom class to each fragment. This tells reveal.js to avoid applying its default fade-in fragment styles.
If you want all elements to remain blurred except the current fragment, you can substitutevisible forcurrent-fragment.
.fragment.blur.current-fragment{filter: none;}Nested Fragments
Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step, turn it red on the second and fade out on the third.
<spanclass="fragment fade-in"><spanclass="fragment highlight-red"><spanclass="fragment fade-out"> Fade in > Turn red > Fade out</span></span></span>Fragment Order
By default fragments will be stepped through in the order that they appear in the DOM. This display order can be changed using thedata-fragment-index attribute. Note that multiple elements can appear at the same index.
<pclass="fragment"data-fragment-index="3">Appears last</p><pclass="fragment"data-fragment-index="1">Appears first</p><pclass="fragment"data-fragment-index="2">Appears second</p>Appears last
Appears first
Appears second
Events
When a fragment is either shown or hidden reveal.js will dispatch an event.
Reveal.on('fragmentshown',(event)=>{// event.fragment = the fragment DOM element});Reveal.on('fragmenthidden',(event)=>{// event.fragment = the fragment DOM element});
