Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wajik45/wajik-gulir
Library sederhana animasi ketika di scroll
https://github.com/wajik45/wajik-gulir
animation-library javascript javascript-library scroll scroll-animations wajik-gulir
Last synced: about 4 hours ago
JSON representation
Library sederhana animasi ketika di scroll
- Host: GitHub
- URL: https://github.com/wajik45/wajik-gulir
- Owner: wajik45
- License: mit
- Created: 2023-10-24T22:21:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-27T21:00:12.000Z (4 months ago)
- Last Synced: 2024-11-07T13:48:01.522Z (10 days ago)
- Topics: animation-library, javascript, javascript-library, scroll, scroll-animations, wajik-gulir
- Language: TypeScript
- Homepage:
- Size: 42 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WAJIK GULIR
Library sederhana animasi ketika di scroll
## INSTALLASI
### CDN
Wajib taro di head
```html
```
### Package manager
```
npm install wajik-gulir
```
## CONTOH
### Dasar
```html
Wajik Gulir
wajikGulir.cus();
Halo
```
### React
```jsx
import * as React from "react";
import wajikGulir from "wajik-gulir";
const App = () => {
React.useEffect(() => {
// INISIALISASI
wajikGulir.cus();
}, []);
return
Halo nama saya Udin!
;
};
export default App;
```
### Inisialisasi dengan menambahkan nilai bawaan
```ts
// Method cus mempunyai parameter opsional jika tidak diberikan argument maka nilai bawaan menjadi
{
delay: 0,
duration: 700,
await: 0,
timingFunction: 'ease',
view: 'middle',
oneAction: false
}
// Jika ingin mengubah nilai bawaan saat inisialisasi maka tambahkan argument berupa object seperti ini
wajikGulir.cus({
delay?: number, // milidetik
duration?: number, // milidetik
await?: number, // milidetik
timingFunction?: string, // timing function css
view?: 'top' | 'middle' | 'bottom',
oneAction?: boolean
});
```
## Penggunaan
### Basic
Atribut-atribut
- data-wajik="animasi"
- data-wajik-delay="milidetik"
- data-wajik-duration="milidetik"
- data-wajik-timing-function="timing-function-css"
- data-wajik-view="top" / "middle" / "bottom"
Bawaan Pabrik
```html
Helo Breh
```
Unit Spesifik
```html
Helo Cuyy
Helo Cuyy
Helo Cuyy
Helo Cuyy
```
Nilai Spesifik
```html
Hello World!
Helo Cuyy
```
### Async await
Atribut-atribut
- data-wajik-async
- data-wajik-await="milidetik"
- data-wajik="animasi"
- data-wajik-delay="milidetik"
- data-wajik-duration="milidetik"
- data-wajik-timing-function="timing-function-css"
- data-wajik-view="top" / "middle" / "bottom"
Bawaan pabrik
```html
Hello Boyy!!
Hello Boyy!!
Hello Boyy!!
Hello Boyy!!
```
Sebagai grup
```html
Hello World!!
Hello World!!
Hello World!!
Hello World!!
```
Atribut view harus sejajar dengan atribut data-wajik-async
```html
Hello World!!
Hello World!!
Hello World!!
Hello World!!
```
## Animasi-animasi
Sumbu dan (-) diisi otomatis
| Name | Units | Nilai awal bawaan |
| -------------- | ------------- | ----------------- |
| swipe-right | -tr() | -tr(50%) |
| swipe-left | -tr() | -tr(50%) |
| swipe-up | -tr() | -tr(50%) |
| swipe-down | -tr() | -tr(50%) |
| zoom-in | -sc() | -sc(50%) |
| zoom-in-right | -sc() / -tr() | -sc(50%)-tr(50%) |
| zoom-in-left | -sc() / -tr() | -sc(50%)-tr(50%) |
| zoom-in-up | -sc() / -tr() | -sc(50%)-tr(50%) |
| zoom-in-down | -sc() / -tr() | -sc(50%)-tr(50%) |
| zoom-out | -sc() | -sc(150%) |
| zoom-out-right | -sc() / -tr() | -sc(150%)-tr(50%) |
| zoom-out-left | -sc() / -tr() | -sc(150%)-tr(50%) |
| zoom-out-up | -sc() / -tr() | -sc(150%)-tr(50%) |
| zoom-out-down | -sc() / -tr() | -sc(150%)-tr(50%) |
| flip-x | -rt() | -rt(180deg) |
| flip-y | -rt() | -rt(180deg) |
| fade-in | |
### Artinya apa bang mesi
- -tr() = transform: translate()
- -sc() = transform: scale()
- -rt() = transform: rotate()
## Tips
Selalu perhatikan dimensi dari element karna lumayan berpengaruh
Contoh:
```html
h1 {
border: 1px solid red;
}
.oke {
width: max-content;
}
Tes 123
Tes 123
```
Pastikan element tidak ada transition, jika ada maka bungkus dengan element lain
Contoh:
```html
.box {
width: 50px;
height: 50px;
background-color: lightgreen;
border: 1px solid #333;
transition: 0.2s;
}
.box:hover {
background-color: green;
}
.wrapper {
width: max-content;
background-color: yellow;
}
```