ovos
v1.3.1
Published
A library for animations based on scroll and touch events.
Downloads
82
Readme
ovos 🍳
A library for animations based on scroll and touch events.
Installation and usage
NPM module
Install
yarn add ovos
# or
npm install --save ovos
Import:
import { fitOnScreen } from 'ovos';
CDN
<script src="https://unpkg.com/[email protected]/dist/ovos.js"></script>
<script>window.ovos.fitOnScreen</script>
Components
Interface
- Anchor
- Carousel
- Fit On Screen
- Page Progress
- Parallax
- Scroll Spy
- Scrollable Sticky
- Scrollable Tabs
- Spin Images
- Sticky (to do)
- Sticky Header
- Drag and Drop (in progress)
- Drawer (to do)
API
Utilities
Patterns and concepts
Less JavaScript
All config can be putted to the HTML. For example:
<section
data-carousel="carousel"
data-carousel-visible-slides="3"
data-carousel-autoplay="2000"
data-ovo-auto
>
🥚 attribute name
Every 🥚 has its own root HTML attribute. The name follows the following pattern:
| default | 🥚 name in kebab case | attribute in kebab case | |-----------|--------------------------|--------------------------| | data-ovo- | spin-images | | | data-ovo- | spin-images | -debounce="NUMBER" | | data-ovo- | spin-images | -quantity="NUMBER" | | data-ovo- | scrollable-sticky | | | data-ovo- | carousel | | | data-ovo- | carousel | -visible-slides="NUMBER" |
Auto play
The attribute data-ovo-auto
starts automatically any 🥚. Just put this HTML attribute to the respective the tag that you want the effect, for example: <div data-ovo-anchor="to-anchor" data-ovo-auto>
.
Global module
The 🍳 Ovos library is putted to the global object (window) and can be used everywhere. Below an example of the 🥚 Sticky Header made only on HTML.
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>OVO - Sticky Header</title>
<style>
body {
font-size: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 0;
min-height: 300vh;
background-color: lightblue; }
main,
header {
padding: 40px;
}
header {
background: black;
color: white;
}
</style>
</head>
<body>
<header data-ovo-hs="header" data-ovo-auto>
HEADER
</header>
<main>
<p>You can scroll down and the header will scroll together.</p>
<p>Emmediately when you scroll up the header will appear again.</p>
</main>
<script src="https://unpkg.com/[email protected]/dist/ovos.js"></script>
</body>
</html>