- Notifications
You must be signed in to change notification settings - Fork12
yesiamrocks/scrolly.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
You can create a rich andstorytelling 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 bycssanimation.io team, that a web based open source animation library by a team ofpassionate web animation lover.
We developed the most easier way to work with scroll animation, Just usedata-scrolly-top anddata-scrolly-down attribute to quickly build powerful templates of your own.
To get started, just downloadscrolly.js andcssanimation.cssdownload. Now include thecssanimation.css stylesheet into the head and addscrolly.js scripts before thebody tagOr add it directly to your webpage using a CDN:https://rawcdn.githack.com/yesiamrocks/scrolly.js/2a3d10b8065c42ad000859cf38ef55e6fff60973/scrolly.min.js
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><scripttype="text/javascript"src="scrolly/scrolly.js"></script></body></html>
when done with including stuff, time to activate scrolly.js
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Once you've done that, define animation class name indata-scrolly-down attribute like the example below to the elementthat you want to animate when the page scroll to DOWN. here we are usingblurInTop.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInTop"> it's easy to do</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Like the DOWN animation, to animate elementwhile scrollig to TOP, just usedata-scrolly-top attribute and add whatever animation you want. We usedblurInBottom for example.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-top="blurInBottom"> it's easy to do</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
You can also trigger an animation effect in any given element from bothDOWN & TOP, means it will animate on both scrollingDOWN & TOP. See the example below-
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-top="blurInBottom"data-scrolly-down="blurInTop"> it's easy to do</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Yes!! you can now animate each character of any sentences while you scroll. Adddata-scrolly-characters="sequential" for sequential animation of the characters ordata-scrolly-characters="random" if you want it to animate it in random order....isn't it exciting !!
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><h1data-scrolly-characters="sequentially"data-scrolly-down="leSpinInRight"data-scrolly-top="leSpinInLeft"> I am Awesome. I can animate every characters in a sentence</h1><h1data-scrolly-characters="randomly"data-scrolly-down="leSpinInRight"data-scrolly-top="leSpinInLeft"> I am Awesome. I can animate every characters in a sentence</h1><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
You can add dealy on character animation by addingdata-scrolly-characters="delay:100" attribute.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><h1data-scrolly-characters="sequentially"data-scrolly-characters="delay:100"data-scrolly-down="leSpinInRight"data-scrolly-top="leSpinInLeft"> I am Awesome. I can animate every characters in a sentence</h1><h1data-scrolly-characters="randomly"data-scrolly-characters="delay:100"data-scrolly-down="leSpinInRight"data-scrolly-top="leSpinInLeft"> I am Awesome. I can animate every characters in a sentence</h1><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Default animation duration is1s but you can always define your custom duration by addingduration:[number]s attribute.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInTop, duration:2s"> it's easy to do</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
By adding the attributedelay:[number]s you can set a delay time to start of an animation.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInTop, delay:2s"> I am start after 2s</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Theiteration-count specifies the number of times an animation should be played. Useiteration-count: 3 if you want to animate 3 times or useiteration-count:infinite which should play the animation with no limit.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInTop, iteration-count:3"> I am animate 3 times</div><divdata-scrolly-down="blurInTop, iteration-count:infinite"> I am animate unlimited times</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
You can run the animation in reverse direction or alternate cycle(forward, backward, then again forward) usingdirection attribute.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInTop, direction:reverse"> it's easy to do</div><divdata-scrolly-top="moveFromRight, iteration-count:3, direction:alternate"> it's easy to do</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
You can add all CSS pre-defined speed curveease, ease-in, ease-out, linear of an animation or define your own values with acubic-bezier function by addingtiming-function attribute.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInTop, timing-function:linear"> it's easy to do</div><divdata-scrolly-down="blurInTop, timing-function:cubic-bezier(.17,.67,.83,.67)"> it's easy to do</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Set the top animation starting point after it appears on the browser windowdata-scrolly-offset-top="300px".
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInTop"data-scrolly-offset-top="300px"> it's easy to do</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Like the top offset thedata-scrolly-offset-bottom="500px" attribute can be used to set the bottom starting point of the animation.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInBottom"data-scrolly-offset-bottom="500px"> it's easy to do</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Initiate the animation with on click event using bydata-scrolly-click="fadeIn".
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInBottom"data-scrolly-click="fadeIn"> I am animate when you click me. Please click</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
For mouse over animation add thedata-scrolly-mouseover="zoomIn" attribute
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInBottom"data-scrolly-mouseover="zoomIn"> I am animate when you hover me</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Adddata-scrolly-mouseout="fadeInLeft" attribute to animate on mouse out event.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><divdata-scrolly-down="blurInBottom"data-scrolly-mouseout="fadeInLeft"> I am animate when you click me</div<scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Targeted Object Animate When You Click: If you want to animate a content by clicking by another one, follow this simple instruction.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><inputtype="button"value="Hit me to Animate targetd object"data-srolly-selector="targetElement"><divdata-scrolly-selector="targetElement"data-scrolly-target-click="pushReleaseFromBottom"> I am animate your target object when you click me</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Animate any content while hovering mouse on another one.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><inputtype="button"value="Hit me to Animate targetd object"data-srolly-selector="targetElement"><divdata-scrolly-selector="targetElement"data-scrolly-target-click="flipYZoomIn"> I am animate your target object when you hover me</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
Unlike those two follow the instruction below to animate targeted contents while doing mouse out on another one.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="scrolly/cssanimation.css"></head><body><inputtype="button"value="Hit me to Animate targetd object"data-srolly-selector="targetElement"><divdata-scrolly-selector="targetElement"data-scrolly-target-click="rotateInLeft"> I am animate your target object when you mouse out from me</div><scripttype="text/javascript"src="scrolly/scrolly.js"></script><script>window.onload=function(){scrolly();};</script></body></html>
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 –
<script>scrolly({scrollyOffsetTop:20});</script>
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 –
<script>scrolly({scrollyOffsetBottom:20});</script>
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 –
<script>scrolly({scrollyMacOffsetTop:200,/*Setting Offset Top Value for MAC*/scrollyWindowsOffsetTop:200/*Setting Offset Top Value for Windows*/});</script>
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 –
<script>scrolly({scrollyMacOffsetBottom:200,/*Setting Offset Bottom Value for MAC*/scrollyWindowsOffsetBottom:200/*Setting Offset Bottom Value for Windows*/});</script>
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 –
<script>scrolly({scrollyTabOffsetTop:200,/*Setting Offset Top Value for Tab*/scrollyMobileOffsetTop:200/*Setting Offset Top Value for Mobile*/});</script>
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 –
<script>scrolly({scrollyTabOffsetBottom:200,/*Setting Offset Bottom Value for Tab*/scrollyMobileOffsetBottom:200/*Setting Offset Bottom Value for Mobile*/});</script>
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 –
<script>scrolly({scrollyStopIt:{largeDesktop:false,desktop:false,mobile:true,tab:false}});</script>
Scrolly Disable – you can usescrollyDisable to kill scrolly.
- Default value – false
- Type – Boolean
- Example value – true
- Uses –
<script>scrolly({scrollyDisable:true});</script>
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.
Your imagination can be real. Just imagine and implement your own animation effect with this platform.
Easy-going installation and flexible scroll animation library that have insignificant production time. The platform is developer friendly and extendable.
This is 100% responsive and ready for all devices with any screen resolutions.
Just a 12KB file which is really lightweight to use any of your projects.
A Very easiest scroll animation library which has extensive features to build any scroll animation as you want.
Plug and play and ready to implement. No dependency with any third party JavaScript plugin, framework or library.
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 oursupport andlicensing sections.