@cfrezier/reveal-progress-image-plugin
v1.2.1
Published
Reveal.js plugin allowing to add a small image to your progress bar
Downloads
20
Readme
reveal-progress-image-plugin
Add an image in your reveal.js progress bar
Use plugin
<script type="module">
import RevealProgressImage from "../node_modules/@cfrezier/reveal-progress-image-plugin/dist/index.js";
Reveal.initialize({
hash: true,
progress: true,
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealProgressImage(Reveal)],
});
</script>
This is available inside an ESModule, so you probably should use an <script type="module">
tag.
Custom Configuration
Overload configuration
Please make sure to include a file at ./images/progress.web or change the parameter. You can overload this configuration like this:
Reveal.initialize({
hash: true,
progress: true,
progressImage: {
imageSrc: './my-image.png'
},
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealProgressImage(Reveal)],
});
Default configuration
By defaut configuration is set to:
iconSize: [30, 30],
bottom: 5,
moveTransition: 'left .8s cubic-bezier(.26,.86,.44,.985)',
imageSrc: './images/progress.webp',
imageAnimation: ANIMATIONS.DANCE,
Use preconfigured animations
const progressPlugin = RevealProgressImage(Reveal);
Reveal.initialize({
hash: true,
progress: true,
progressImage: {
imageAnimation: progressPlugin.ANIMATIONS.FLY
},
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, progressPlugin],
});