https://github.com/charmingdc/scrolljs
ScrollJs: A lightweight and customizable JavaScript library for seamless scroll-triggered animations. Elevate your web projects with smooth effects, dynamic triggers, and ease of integration.
https://github.com/charmingdc/scrolljs
aos-animation javascript-library open-source scrolljs
Last synced: over 1 year ago
JSON representation
ScrollJs: A lightweight and customizable JavaScript library for seamless scroll-triggered animations. Elevate your web projects with smooth effects, dynamic triggers, and ease of integration.
- Host: GitHub
- URL: https://github.com/charmingdc/scrolljs
- Owner: Charmingdc
- Created: 2024-09-23T09:57:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-23T16:25:38.000Z (over 1 year ago)
- Last Synced: 2025-02-23T16:30:29.316Z (over 1 year ago)
- Topics: aos-animation, javascript-library, open-source, scrolljs
- Language: JavaScript
- Homepage: https://scrolljs.vercel.app
- Size: 5.14 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
ScrollJs
ScrollJs is a lightweight and easy to use javascript library that allows you to add scroll triggered animations (AOS) with optional callback functions and also lazy load your images to make your website more optimize.
While other scroll triggered animation library offer predefined animation classes not giving full control and how you want your animations to display, ScrollJs allows you to use your already styled animation class.
# Installation
## Browser
A simple and fast way to get started is to include this script on your page
``` html
```
This will create the global variable `ScrollObserver`
## Module
``` bash
$ npm install @charmingdc/scrolljs
```
### CommonJs
``` js
const ScrollObserver = require('@charmingdc/scrolljs')
```
### ES2015
``` js
import ScrollObserver from '@charmingdc/scrolljs'
```
# Usage
Installation provides us with the constructor function `ScrollObserver` Calling this function returns the ScrollObserver instance, the “brain” behind the magic.
> ScrollObserver employs the singleton pattern; no matter how many times the constructor is called, it will always return the same instance. This means we can call it anywhere, worry-free.
There’s a lot we can do with this instance, but most of the time we’ll be using the observer() method to create animation. Fundamentally, this is how to use ScrollObserver:
`HTML`
``` html
Demo Card
```
`CSS`
``` css
.card {
width: 4rem;
height: 6rem;
background-color: blue;
border-radius: 1rem;
transform: translateX(-1rem);
transition: 200ms;
}
.fade-in {
transform: translateX(0rem);
transition: 200ms;
} /* Animation to display when element enters viewport */
```
`JAVASCRIPT`
``` js
const cards = document.querySelectorAll('.card');
ScrollObserver().observe(cards, null, 'fade-in')
```
or store the `ScrollObserver` instance to a variable
``` js
const observer = new ScrollObserver()
observer.observe(cards, null, 'fade-in');
```
### Link to documentation
> The full documentation can be found at:
>
[https://scrolljs.vercel.app](https://scrolljs.vercel.app)
# ChangeLog
> For a detailed list of changes please see:
[Changelog](./CHANGELOG.md)
# License
Licensed under the MIT license for open source projects