@monoceros/core
v1.0.6
Published
Monoceros core
Downloads
15
Readme
@monoceros/core
Core for Monoceros. Intializes core elements, sets up intersection observers and exposes core functions & classes
Table of contents
Install
NPM
npm install @monoceros/coreUsage
import Monoceros from '@monoceros/core'
Monoceros.init()HTML Setup
[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>Set options
Note: set must be called before use and init
Monoceros.set({ debug: true })
.init()Options
| 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) |
options.base defaults
{
viewport: 'viewport',
section: 'section',
item: 'item',
rogue: 'rogue',
}Register plugins
Note: use must be called before init
Monoceros.set({ debug: true })
.use(SomePlugin)
.init()Plugin options
Monoceros
.use(SomePlugin, {debug: false})
.init()Mutliple plugins
Monoceros
.use(SomePlugin, {debug: false})
.use(SomeOtherPlugin)
.use(SomeOtherOtherPlugin, {debug: true})
.init()or
Monoceros
.use([
[SomePlugin, {debug: false}],
SomeOtherPlugin,
[SomeOtherOtherPlugin, {debug: true}]
])
.init()Plugins
- @monoceros/plugin-reverse-scroll - Plugin that reverses the scroll direction within a
[data-monoceros-section]
Acknowledgements
Inspired by locomotive-scroll. Will have quite different usecases though.