https://github.com/yesiamrocks/scrolly.js
https://github.com/yesiamrocks/scrolly.js
css-animation-effects css3-animation javascript-animation-library parallax-effect scroll-js scrolling-website text-animation vertical-scroll
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/yesiamrocks/scrolly.js
- Owner: yesiamrocks
- Created: 2017-05-31T23:30:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-24T20:39:41.000Z (about 2 years ago)
- Last Synced: 2023-12-24T21:29:13.527Z (about 2 years ago)
- Topics: css-animation-effects, css3-animation, javascript-animation-library, parallax-effect, scroll-js, scrolling-website, text-animation, vertical-scroll
- Language: JavaScript
- Homepage: https://cssanimation.io/scrollyjs/index.html
- Size: 25.4 KB
- Stars: 42
- Watchers: 10
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Scrolly.js
You can create a rich and **storytelling animated web pages** with up and down scrolling 👋
Visitors can feel the page with scrolling and it has a really minimal learning curve.
Scrolly.js plugin is proudly created and maintained by [cssanimation.io](http://cssanimation.io/) team, that a web based open source animation library by a team of **passionate web animation lover**.
We developed the most easier way to work with scroll animation, Just use `data-scrolly-top` and `data-scrolly-down` attribute to quickly build powerful templates of your own.
# How To Use It?
### Include Library
To get started, just download `scrolly.js` and `cssanimation.css` [download](http://cssanimation.io/). Now include the `cssanimation.css` stylesheet into the head and add `scrolly.js` scripts before the `body` tag
Or add it directly to your webpage using a CDN: https://rawcdn.githack.com/yesiamrocks/scrolly.js/2a3d10b8065c42ad000859cf38ef55e6fff60973/scrolly.min.js
``` html
Document
```
### Activate Now
when done with including stuff, time to activate scrolly.js
``` html
Document
window.onload = function() {
scrolly();
};
```
### Define DOWN Animation
Once you've done that, define animation class name in `data-scrolly-down` attribute like the example below to the element **that you want to animate when the page scroll to DOWN**. here we are using `blurInTop`.
``` html
Document
it's easy to do
window.onload = function() {
scrolly();
};
```
### Define TOP Animation
Like the DOWN animation, to animate element **while scrollig to TOP**, just use `data-scrolly-top` attribute and add whatever animation you want. We used `blurInBottom` for example.
``` html
Document
it's easy to do
window.onload = function() {
scrolly();
};
```
### Use Both DOWN and TOP Animation
You can also trigger an animation effect in any given element from both **DOWN & TOP**, means it will animate on both scrolling **DOWN & TOP**. See the example below-
``` html
Document
it's easy to do
window.onload = function() {
scrolly();
};
```
### Use Animation on Character
Yes!! you can now animate each character of any sentences while you scroll. Add `data-scrolly-characters="sequential"` for sequential animation of the characters or `data-scrolly-characters="random"` if you want it to animate it in random order.... **isn't it exciting !!**
``` html
Document
I am Awesome. I can animate every characters in a sentence
I am Awesome. I can animate every characters in a sentence
window.onload = function() {
scrolly();
};
```
### Add Delay in Character Animation
You can add dealy on character animation by adding `data-scrolly-characters="delay:100"` attribute.
``` html
Document
I am Awesome. I can animate every characters in a sentence
I am Awesome. I can animate every characters in a sentence
window.onload = function() {
scrolly();
};
```
### Use Animation Duration
Default animation duration is `1s` but you can always define your custom duration by adding `duration:[number]s` attribute.
``` html
Document
it's easy to do
window.onload = function() {
scrolly();
};
```
### Add Delay
By adding the attribute `delay:[number]s` you can set a delay time to start of an animation.
``` html
Document
I am start after 2s
window.onload = function() {
scrolly();
};
```
### Infinite or Specify The Number of Animation
The `iteration-count` specifies the number of times an animation should be played. Use `iteration-count: 3` if you want to animate 3 times or use `iteration-count:infinite` which should play the animation with no limit.
``` html
Document
I am animate 3 times
I am animate unlimited times
window.onload = function() {
scrolly();
};
```
### Animation Direction
You can run the animation in reverse direction or alternate cycle **(forward, backward, then again forward)** using `direction` attribute.
``` html
Document
it's easy to do
it's easy to do
window.onload = function() {
scrolly();
};
```
### Timing Function
You can add all CSS pre-defined speed curve `ease, ease-in, ease-out, linear` of an animation or define your own values with a `cubic-bezier` function by adding `timing-function` attribute.
``` html
Document
it's easy to do
it's easy to do
window.onload = function() {
scrolly();
};
```
### Define Top Offset Value
Set the top animation starting point after it appears on the browser window `data-scrolly-offset-top="300px"`.
``` html
Document
it's easy to do
window.onload = function() {
scrolly();
};
```
### Define Bottom Offset Value
Like the top offset the `data-scrolly-offset-bottom="500px"` attribute can be used to set the bottom starting point of the animation.
``` html
Document
it's easy to do
window.onload = function() {
scrolly();
};
```
### On Click Animtion
Initiate the animation with on click event using by `data-scrolly-click="fadeIn"`.
``` html
Document
I am animate when you click me. Please click
window.onload = function() {
scrolly();
};
```
### Mouse Over Animtion
For mouse over animation add the `data-scrolly-mouseover="zoomIn"` attribute
``` html
Document
I am animate when you hover me
window.onload = function() {
scrolly();
};
```
### Mouse Out Animtion
Add `data-scrolly-mouseout="fadeInLeft"` attribute to animate on mouse out event.
``` html
Document
I am animate when you click me
window.onload = function() {
scrolly();
};
```
### Targeted Object Animate When You Click
Targeted Object Animate When You Click: If you want to animate a content by clicking by another one, follow this simple instruction.
``` html
Document
I am animate your target object when you click me
window.onload = function() {
scrolly();
};
```
### Targeted Object Animate When You Mouse Over
Animate any content while hovering mouse on another one.
``` html
Document
I am animate your target object when you hover me
window.onload = function() {
scrolly();
};
```
### Targeted Object Animate When You Mouse Out
Unlike those two follow the instruction below to animate targeted contents while doing mouse out on another one.
``` html
Document
I am animate your target object when you mouse out from me
window.onload = function() {
scrolly();
};
```
# Advanced Settings
**Scrolly Offset Top** – specifies the distance between the beginning of the object and the beginning of the browser window from top
* Default value – 0px
* Example value – 20px
* Uses –
``` html
scrolly ({
scrollyOffsetTop: 20
});
```
**Scrolly Offset Bottom** – specifies the distance between the beginning of the object and the ending of the browser window from bottom
* Default value – 0px
* Example value – 20px
* Uses –
``` html
scrolly ({
scrollyOffsetBottom: 20
});
```
**Scrolly [OS name] Offset Top** – specifies the distance between the beginning of the object and the beginning of the browser window from top based on OS and devices
* OS Supports – MAC OS and Windows
* Default value – 0px
* Example value – 200px
* Uses –
``` html
scrolly ({
scrollyMacOffsetTop: 200, /*Setting Offset Top Value for MAC*/
scrollyWindowsOffsetTop: 200 /*Setting Offset Top Value for Windows*/
});
```
**Scrolly [OS Name] Offset Bottom** – specifies the distance between the beginning of the object and the ending of the browser bottom window based on OS and devices
* OS Supports – MAC OS and Windows
* Default value – 0px
* Example value – 200px
* Uses –
``` html
scrolly ({
scrollyMacOffsetBottom: 200, /*Setting Offset Bottom Value for MAC*/
scrollyWindowsOffsetBottom: 200 /*Setting Offset Bottom Value for Windows*/
});
```
**Scrolly [Device] Offset Top** – specifies the distance between the beginning of the object and the beginning of the browser window from top based on OS and devices
* Device Supports – Tab and Mobile
* Default value – 0px
* Example value – 200px
* Uses –
``` html
scrolly ({
scrollyTabOffsetTop: 200, /*Setting Offset Top Value for Tab*/
scrollyMobileOffsetTop: 200 /*Setting Offset Top Value for Mobile*/
});
```
**Scrolly [Device Name] Offset Bottom** – specifies the distance between the beginning of the object and the ending of the browser bottom window based on OS and devices
* Device Supports – Tab and Mobile
* Default value – 0px
* Example value – 200px
* Uses –
``` html
scrolly ({
scrollyTabOffsetBottom: 200, /*Setting Offset Bottom Value for Tab*/
scrollyMobileOffsetBottom: 200 /*Setting Offset Bottom Value for Mobile*/
});
```
**Scrolly Stop It** – There are several options that you can use to destroy scrolly on certains devices.
* Default value – false
* Type – Boolean
* Device Supports – Large Desktop, Desktop, Tab and Mobile
* Example value – `mobile: true`
* Uses –
``` html
scrolly ({
scrollyStopIt: {
largeDesktop: false,
desktop: false,
mobile: true,
tab: false
}
});
```
**Scrolly Disable** – you can use `scrollyDisable` to kill scrolly.
* Default value – false
* Type – Boolean
* Example value – true
* Uses –
``` html
scrolly ({
scrollyDisable: true
});
```
# Why Scrolly.js
Scrolly JS is efficient and flexible JavaScript library for building an interactive and attractive animation with scrolling. Fully responsive, lightweight, powerful and flexible pure JavaScript scroll animation library.
### Animated by CSS
Your imagination can be real. Just imagine and implement your own animation effect with this platform.
### Flexibility and extendibility
Easy-going installation and flexible scroll animation library that have insignificant production time. The platform is developer friendly and extendable.
### Support for responsive
This is 100% responsive and ready for all devices with any screen resolutions.
### Lightweight
Just a 12KB file which is really lightweight to use any of your projects.
### Easy to use
A Very easiest scroll animation library which has extensive features to build any scroll animation as you want.
### No dependency
Plug and play and ready to implement. No dependency with any third party JavaScript plugin, framework or library.
# Pricing Guide
ScrollyJS is completely free to use. For any commercial projects, themes or any applications you should have to buy a commercial license. We offer you to a commercial license with two different packages. To learn more please take a look our [support](https://scrollyjs.com/support-policy.html) and [licensing](https://scrollyjs.com/licensing.html) sections.