maki-js

Stupidly simple on-scroll element reveal handler


Keywords
scroll, js, css, reveal, animation, scroll-in
License
ISC
Install
npm install maki-js@1.0.72

Documentation

maki-js

Stupidly simple on-scroll element reveal handler

Powered by:

Anatomy:

  • maki.js → checks for viewport intersections of elements with data-maki css attribute selectors
  • maki.css → includes prefabricated classes and @keyframes animations to apply on intersection

Quick start:

0. install via npm (optional)

npm install maki-js

1. include maki.js

<script src="./scripts/maki.js"></script>

2. include maki.css

<link href="./style/maki.css type="text/css" rel="stylesheet>

3. run maki()

<script>maki()</script>

4. add the data-maki data attribute to your target elements

<div data-maki="scroll-in">Senatus Populusque Romanus</div>

Animations

scroll-in

[data-maki="scroll-in"]

Elements scroll in on the Y axis

scale-x-in

[data-maki="scale-x-in"]

Elements scale in on the X axis, beginning from the top left corner

scale-y-in

[data-maki="scale-y-in"]

Elements scale in on the Y axis, beginning from the top left corner

blur-in

[data-maki="scale-x-in"]

Elements resolve to a focus from an initial blurred state