Core for Monoceros. Intializes core elements, sets up intersection observers and exposes core functions & classes
npm install @monoceros/coreimport Monoceros from '@monoceros/core'
Monoceros.init()-
[data-monoceros-viewport](required) - Fixed section where the page will scroll in -
[data-monoceros-section](optional) - Section within the page where scroll behaviour will be different. Will receive classes based on visibility within viewport -
[data-monoceros-item](optional) - Item within the viewport or section. Will receive classes based on visibility within viewport and/or section
<body>
<div data-monoceros-viewport>
<section data-monoceros-item>
Item without monoceros section
<section>
<section data-monoceros-section>
<div data-monoceros-item>
Item with monoceros-section
</div>
</section>
</div>
<!-- scripts and hidden stuff go here -->
</body>Note: set must be called before use and init
Monoceros.set({ debug: true })
.init()| Property | Default value | Description |
|---|---|---|
classNamePrefix |
'm-' |
Prefix put before every class added by monoceros. (does not apply to 'in-viewport' class) |
selectorPrefix |
'monoceros-' |
Prefix every data attribute added by monoceros starts with. |
debug |
false |
Controls wether or not monoceros (and plugins) will output debug logs to the console. |
base |
object | Controls naming of all elements (viewport, section, item, rogue) |
{
viewport: 'viewport',
section: 'section',
item: 'item',
rogue: 'rogue',
}Note: use must be called before init
Monoceros.set({ debug: true })
.use(SomePlugin)
.init()Monoceros
.use(SomePlugin, {debug: false})
.init()Monoceros
.use(SomePlugin, {debug: false})
.use(SomeOtherPlugin)
.use(SomeOtherOtherPlugin, {debug: true})
.init()or
Monoceros
.use([
[SomePlugin, {debug: false}],
SomeOtherPlugin,
[SomeOtherOtherPlugin, {debug: true}]
])
.init()- @monoceros/plugin-reverse-scroll - Plugin that reverses the scroll direction within a
[data-monoceros-section]
Inspired by locomotive-scroll. Will have quite different usecases though.