ScrollJS
by Sam Sirianni
ScrollJS is a library written in Javascript. With ScrollJS you can animate elements on scroll events. Visit the ScrollJS website.
Installation
First thing first, remember to link in the head section the CSS file (scrolljs.css) that you can directly download at this github link.
NPM and React
If you want to use ScrollJS with React, open the terminal and type:
npm i @samsiri/scrolljs --save
Usage
import React, { Component } from 'react';
import scrolljs from '@samsiri/scrolljs';
export default class Index extends Component {
componentDidMount() {
scrolljs(); // initialize ScrollJS
}
render() {
return (
<div>
<h1 scrolljs="fade-up">Hello World!</h1>
</div>
)
}
}
HTML
If you want to use ScrollJS directly in a HTML page, download the files scrolljs.js and scrolljs.css from my GitHub repository.
Usage
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="scrolljs.css"/>
</head>
<body>
<h1 scrolljs="flip-left">Hello World!</h1>
<script src="scrolljs.js"></script>
</body>
</html>
ScrollJS attributes
<div scrolljs="type[|duration(ms)|timing-function]"></div>
<!-- Examples -->
<div scrolljs="flip-left|800|ease"></div>
<div scrolljs="fade-up|350"></div>
<div scrolljs="flip-left|750|linear"></div>
type
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-left
- fade-down-left
- fade-down-right
- fade-up-right
- flip-left
- flip-up
- flip-right
- flip-up-right
- flip-down-right
- flip-up-left
- flip-down-left
- flip-down
- scale-up
- scale-down
duration
Duration represents the transition duration in milliseconds.
timing-function
Timing function represents the timing function (Ex. ease-in).
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
22.3k Jan 2, 2023
14 Dec 15, 2022
5 Oct 28, 2022
38 Sep 19, 2022
4.4k Jan 2, 2023
7 May 10, 2022
1 Oct 13, 2022
13 Nov 21, 2022
9.7k Jan 8, 2023
2k Dec 25, 2022