A library for animations based on scroll and touch events.
Install
yarn add ovos
# or
npm install --save ovosImport:
import { fitOnScreen } from 'ovos';<script src="https://unpkg.com/ovos@1.2.4/dist/ovos.bundle.min.js"></script>
<script>window.ovos.fitOnScreen</script>- 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)
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
>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" |
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>.
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/ovos@1.2.4/dist/ovos.bundle.min.js"></script>
</body>
</html>