Wajik-scroll NPM

wajik-scroll

library sederhana animasi ketika di scroll https://wajik45.github.io/wajik-scroll

Installation

Using NPM

npm i wajik-scroll

Example in React

import * as React from "react";

// Import CSS and JS
import "wajik-scroll/dist/wajik-scroll.css";
import { wajikScroll } from "wajik-scroll";

const App = () => {
  // Initialization
  React.useEffect(() => {
    wajikScroll.start();
  }, []);

  return <h1 data-wajik="swipe-left">Hello Wolrd!</h1>;
};

export default App;

Using CDN

CSS

<!-- In <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wajik-scroll@1.3.4/dist/wajik-scroll.css" />

<!-- Before closing </body> -->
<script src="https://cdn.jsdelivr.net/npm/wajik-scroll@1.3.4/dist/wajik-scroll.umd.js"></script>

<script>
  // Initialization
  WAJIK.wajikScroll.start();
</script>

initialize it by adding a default values

/*
  if the method is not supplied with arguments then the default value is
  - delay: 0
  - duration: 700
  - wait: 150
  - timing function: 'ease'
  - view: wait ? 'top' : 'middle'
  - oneAction: false
*/

wajikScroll.start({
  delay: number,
  duration: number,
  wait: number,
  timingFunction: string,
  view: 'top' | 'middle' | 'bottom',
  oneAction: boolean,
});

// CDN
WAJIK.wajikScroll.start({
  delay: number,
  duration: number,
  wait: number,
  timingFunction: string,
  view: 'top' | 'middle' | 'bottom'
  oneAction: boolean,
});

Usage

Create animation with default values

<!-- Normal -->
<h1 data-wajik="swipe-right">Hello World</h1>

<!-- Wait -->
<!-- can only be used on groups with the class "wajik-wait-group" -->
<div class="wajik-wait-group">
  <h1 data-wajik="swipe-right">Hello World</h1>
  <h1 data-wajik="swipe-right">Hello World</h1>
  <h1 data-wajik="swipe-right">Hello World</h1>
</div>

if you want to change the default value to a certain value then add the attributes as below

Normal

<!-- Duration -->
<!-- Value: milliseconds -->
<h1 data-wajik="swipe-right" data-wajik-duration="2000">Hello World</h1>

<!-- Delay -->
<!-- Value: milliseconds -->
<h1 data-wajik="swipe-right" data-wajik-delay="2000">Hello World</h1>

<!-- Timing Function -->
<!-- Value: timing function in CSS -->
<h1 data-wajik="swipe-right" data-wajik-timing-function="ease-in">Hello World</h1>

<!-- View -->
<!-- Value: "top" | "middle" | "bottom" -->
<h1 data-wajik="swipe-right" data-wajik-view="bottom">Hello World</h1>

<!-- Combination -->
<h1
  data-wajik="swipe-right"
  data-wajik-duration="1500"
  data-wajik-delay="1200"
  data-wajik-view="middle"
  data-wajik-timing-function="linear"
>
  Hello World
</h1>

Wait

<div class="wajik-wait-group">
  <!-- Value: milliseconds -->
  <h1 data-wajik="swipe-right" data-wajik-wait="500">Hello World</h1>
  <h1 data-wajik="swipe-right" data-wajik-wait="500">Hello World</h1>
  <h1 data-wajik="swipe-right" data-wajik-wait="500">Hello World</h1>
</div>

<!-- for delay and view you have to add their attributes to the group -->

<!-- Delay -->
<div class="wajik-wait-group" data-wajik-delay="2000">
  <h1 data-wajik="swipe-right" data-wajik-wait="500">Hello World</h1>
  <h1 data-wajik="swipe-right" data-wajik-wait="500">Hello World</h1>
  <h1 data-wajik="swipe-right" data-wajik-wait="500">Hello World</h1>
</div>

<!-- View -->
<div class="wajik-wait-group" data-wajik-view="bottom">
  <h1 data-wajik="swipe-right" data-wajik-wait="500">Hello World</h1>
  <h1 data-wajik="swipe-right" data-wajik-wait="500">Hello World</h1>
  <h1 data-wajik="swipe-right" data-wajik-wait="500">Hello World</h1>
</div>

<!-- Combination -->
<div
  class="wajik-wait-group"
  data-wajik-view="bottom"
  data-wajik-delay="1200"
>
  <h1
    data-wajik="swipe-right"
    data-wajik-duration="500"
    data-wajik-wait="200"
    data-wajik-timing-function="ease-in"
  >
    Hello World
  </h1>
  <h1
    data-wajik="swipe-left"
    data-wajik-duration="1000"
    data-wajik-wait="400"
    data-wajik-timing-function="ease-out"
  >
    Hello World
  </h1>
  <h1
    data-wajik="swipe-down"
    data-wajik-duration="1500"
    data-wajik-wait="600"
    data-wajik-timing-function="linear"
  >
    Hello World
  </h1>
</div>

https://wajik45.github.io/wajik-scroll