Plugin that reverses the scroll direction within a monoceros section
npm install @monoceros/plugin-reverse-scrollimport Monoceros from 'monoceros'
import ReverseScrollPlugin from '@monoceros/plugin-reverse-scroll'
Monoceros
.use(ReverseScrollPlugin)
.init()import Monoceros from 'monoceros'
import ReverseScrollPlugin from '@monoceros/plugin-reverse-scroll'
Monoceros
.use(ReverseScrollPlugin, { speed: 0.5 })
.init()| Property | Type | Default | Description |
|---|---|---|---|
debug |
boolean |
false |
Controls wether or not ReverseScrollPlugin will output debug logs to the console. |
speed |
number |
1 |
Scroll speed. Should be beteen 0 and 1. The lower, the slower. |
base |
object |
base | Selector and classnames use this value to generate with. |
{
reverse: 'reverse'
}[data-monoceros-reverse](required) - Reverse scroll section. Must be placed within a[data-monoceros-section]element.
Note: To truly see the reverse scroll effect, elements within the
[data-monoceros-reverse]element should be larger than 100vh combined.
<style>
section {
height: 100vh;
}
</style>
<body>
<div data-monoceros-viewport>
<section>Before reverse scroll</section>
<div data-monoceros-section>
<div data-monoceros-reverse>
<section>End reverse scroll</section>
<section>Just a little further....</section>
<section>Keep scrolling...</section>
<section>Start reverse scroll</section>
</div>
</div>
<section>After reverse scroll</section>
</div>
</body>