Animate your page effortlessly.
Animations are always something we shelve off. Aniro is here to help – you'll only need to scatter some attributes here and your page will be animated right away.
Insert this into your head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/uyouthe/aniro/aniro.min.css">...and this at the end of your <body>:
<script src="https://cdn.jsdelivr.net/gh/uyouthe/aniro/aniro.min.js"></script>
<script>aniro()</script>- Add the
data-aniro_rootto the element you want the magic to happen inside. - Add the
data-aniroto all the elements you want to be animated.
You can pass the configuration object to the aniro() initialization function:
aniro({
// the position of the virtual line that triggers the animation, in pixels relative to the viewport top.
// defaults to document.documentElement.clientHeight / 2
line: 300,
// a padding of the animated elements' "hitbox", in pixels
// defaults to 30
gap: 30,
// disable the whole animation when the bottom is reached. Recommended for better performance
// defaults to false
disableWhenBottomReached: false
})You may add data-aniro_delay attribute to delay the animation. The value is milliseconds:
<div data-aniro_delay="300"> ... </div>If you want an element to be animated right after page loads, add data-aniro_now attribute to it. You'll probably want to use it for something your users would see right away.
It's "animation" plus "yamero" – "stop it" in Japanese. The word is heavily associated with anime culture.
Miloslav Voloskov
The idea by nice-naming team
Gifs are from 30000fps