Visitors can feel the page with scrolling and it has a really minimal learning curve.
Getteing Started
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-bottom attribute to quickly build powerful templates of your own.
Slack is free to use for as long as you want for teams of all sizes.
Make own effect you can imagine
Maximize the relevancy of your creative while minimizing set-up and production time with the Spongecell platform.
Good for All devices ( Mobiles, Tablet, Laptop, PC...)
Maximize the relevancy of your creative while minimizing set-up and production time with the Spongecell platform.
We developed the most easier way to work with scroll animation for desktop and mobile.
Maximize the relevancy of your creative while minimizing set-up and production time with the Spongecell platform.
Include Library: To get started, just downloadscrolly.js [download ] andcssanimation.css [download ]. Now include thecssanimation.css stylesheet into thehead and addscrolly.js scripts before thebody tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="scrolly/cssanimation.css">
</head>
<body>
<script type="text/javascript" src="scrolly/scrolly.js">
</body>
</html>Activate Now: When finished is included, now activate the scrolly.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="scrolly/cssanimation.css">
</head>
<body>
<script type="text/javascript" src="scrolly/scrolly.js"></script>
<script>
window.onload = function() {
scrolly();
};
</script>
</body>
</html>Define Top Animation: Once you've done that, define animation class name indata-scrolly-top attribute like the example below to the elementthat you want to animate when the page scroll UP. here we are usingflipY.
<div data-scrolly-top="flipY">
it's easy to do
</div>Define Bottom Animation: Like the top animation, to animate elementwhile scrollig DOWN, just usedata-scrolly-bottom attribute and add whatever animation you want. We useddoorCloseFromLeft for example.
<div data-scrolly-bottom="moveFromRight">
it's easy to do
</div>Use Both Top and Bottom Animation: You can also trigger an animation effect in any given element from bothUP & DOWN, means it will animate on both scrollingUP & DOWN. See the example below-
<div data-scrolly-top="moveFromRight" data-scrolly-bottom="moveFromRight">
it's easy to do
</div>Use Animation on Character: Yes !! you can now animate each character of any sentences while you scroll. Adddata-scrolly-characters="sequentially" for sequential animation of the characters ordata-scrolly-characters="randomly" if you want it to animate it in random order....isn't it exciting !!
<h1 data-scrolly-characters="sequentially" data-scrolly-top="leSpinInLeft" data-scrolly-bottom="leSpinInRight">
I am Awesome. I can animate every characters in a sentence
</h1>
<h1 data-scrolly-characters="randomly" data-scrolly-top="leSpinInLeft" data-scrolly-bottom="leSpinInRight">
I am Awesome. I can animate every characters in a sentence
</h1>Use Animation Duration: Default animation duration is1s but you can always define your custom duration by addingduration:2s attribute.
<div data-scrolly-top="moveFromRight, duration:2s">
it's easy to do
</div>Add Delay: By adding the attributedelay:2s you can set a delay time to start of an animation.
<div data-scrolly-top="moveFromRight, delay:2s">
I am start after 2s
</div>Infinite or Specify The Number of Animation: 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.
<div data-scrolly-top="moveFromRight, iteration-count:3">
I am animate 3 times
</div>
<div data-scrolly-top="moveFromRight, iteration-count:infinite">
I am animate unlimited times
</div>Animation Direction: You can run the animation in reverse direction or alternate cycle(forward, backward, then again forward) usingdirection attribute.
<div data-scrolly-top="moveFromRight, direction:reverse">
it's easy to do
</div>
<div data-scrolly-top="moveFromRight, iteration-count:3, direction:alternate">
it's easy to do
</div>Timing Function: 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.
<div data-scrolly-top="moveFromRight, timing-function:linear">
it's easy to do
</div>
<div data-scrolly-top="moveFromRight, timing-function:cubic-bezier(.17,.67,.83,.67)">
it's easy to do
</div>Define Top Offset Value: Set the top animation starting point after it appears on the browser windowdata-scrolly-offset-top="300px".
<div data-scrolly-top="moveFromRight" data-scrolly-offset-top="300px">
it's easy to do
</div>Define Bottom Offset Value: Like the top offset thedata-scrolly-offset-bottom="500px" attribute can be used to set the bottom starting point of the animation.
<div data-scrolly-top="moveFromRight" data-scrolly-offset-bottom="500px">
it's easy to do
</div>On Click Animtion: Initiate the animation with on click event withdata-scrolly-click="fadeIn".
<div data-scrolly-top="moveFromRight" data-scrolly-click="moveFromRight">
I am animate when you click me. Please click
</div>Mouse Over Animtion: For mouse over animation add thedata-scrolly-mouseover="zoomIn" attribute.
<div data-scrolly-top="moveFromRight" data-scrolly-mouseover="moveFromRight">
I am animate when you hover me
</div>Mouse Out Animtion: Adddata-scrolly-mouseout="zoomOut" attribute to animate on mouse out event.
<div data-scrolly-top="moveFromRight" data-scrolly-mouseout="moveFromRight">
I am animate when you click me
</div>Targeted Object Animate When You Click: If you want to animate a content by clicking on another one, follow this simple instruction.
Click me to animate targeted object
<input type="button" value="Hit me to Animate targetd object" data-srolly-selector="targetElement">
<div data-scrolly-selector="targetElement" data-scrolly-target-click="moveFromRight">
I am animate your target object when you click me
</div>Targeted Object Animate When You Mouse Over: Animate any content while hovering mouse on another one.Hover me to animate targetd object
<input type="button" value="Hit me to Animate targetd object" data-srolly-selector="targetElement">
<div data-scrolly-selector="targetElement" data-scrolly-target-click="moveFromRight">
I am animate your target object when you hover me
</div>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. Mouse out from me to animate targeted object
<input type="button" value="Hit me to Animate targetd object" data-srolly-selector="targetElement">
<div data-scrolly-selector="targetElement" data-scrolly-target-click="moveFromRight">
I am animate your target object when you mouse out from me
</div>Scrolly Offset Top– specifies the distance between the beginning of the object and the beginning of the browser window from top
<script>
scrolly ({
scrollyOffsetTop: 20px,
});
</script>Scrolly Offset Bottom– specifies the distance between the beginning of the object and the ending of the browser window from bottom
<script>
scrolly ({
scrollyOffsetBottom: 20px,
});
</script>Scrolly [Device or 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
<script>
scrolly ({
scrollyMacOffsetTop: 200px; /*Setting Offset Top Value for MAC*/
scrollyWindowsOffsetTop: 200px; /*Setting Offset Top Value for Windows*/
scrollyTabOffsetTop: 200px; /*Setting Offset Top Value for Tab*/
scrollyMobileOffsetTop: 200px; /*Setting Offset Top Value for Mobile*/
});
</script>Scrolly [Device or 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
<script>
scrolly ({
scrollyMacOffsetBottom: 200px; /*Setting Offset Bottom Value for MAC*/
scrollyWindowsOffsetBottom: 200px; /*Setting Offset Bottom Value for Windows*/
scrollyTabOffsetBottom: 200px; /*Setting Offset Bottom Value for Tab*/
scrollyMobileOffsetBottom: 200px; /*Setting Offset Bottom Value for Mobile*/
});
</script>Scrolly Stop It– There are several options that you can use to destroy scrolly on certains devices.
mobile: true<script>
scrolly ({
scrollyStopIt: {
largeDesktop: false,
desktop: false,
mobile: true,
tab: false,
}
});
</script>Scrolly Disable– you can usescrollyDisable to kill scrolly.
<script>
scrolly ({
scrollyDisable: true,
});
</script>Scrolly.js is free to use. If you want to use scrolly.js to develop commercial sites, themes, projects, and applications, the commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about support and licensing.
$28.99
$79.99
