Scroll Animations

---

Fast and Fancy animations , Easy to use and perfect for any kind of style.. 🎉✨🎨

📝 Table of Contents

- About
- Getting Started
- Deployment
- Usage
- Options
- Built Using
- TODO
- Contributing
- Authors
- Acknowledgments

🧐 About

- Scroll animations is a new library that will make your website alive 😀
- with only one data attribute you can do a lot with less code 😌

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

$3

Nothing required to start using it , just put it right in your files and that's it 🥳

``

code here...

`

$3

- You can download an offline copy for you project 📴 , just by clicking Download Zip up above 👆👆

Or

- you can use npm to install it , run the line below in your machine command line (need Node.js to be installed ) 📁📁

`
npm install scroll-aniamtions --save
`

OR

- You can use the CDN links below and include it directly to your project 🔗🔗

`
link.css
`

`
link.min.css
`

`
link.scss
`

`
link.js
`

`
link.min.js
`

🎈 Usage

- After downloading files or adding CDN links , Add the data-scroll attribute to any element of your HTML code
example :

`

code here...

`

🎈 Options

- version 1.0.0 comes with limited options for this library for now for sure 😌😀

- So How to Edit it ?

`
data-scroll='fade-up 2s hide'
`

- in order to work properly you need to add at least one property in the data-scroll attr and that would be the animation behavior like "fade-up , slide-up , blur ... etc "
see all examples on here Scroll Animations Examples

Example for one property

`
data-scroll='fade-up'
`

- By default animation duration is 1.5 seconds , but if you want to change it you can do it easily by adding second property beside the animation behavior like so 👇👇

`
data-scroll='fade-up .5s'
`

- If you want the parent element of the selected element to have over-flow hidden add so element start the animation on it's container only you need to add "hide" beside the duration property , like so 👇

`
data-scroll='fade-up .5s hide'

``

- And thats is for now , more features is coming with upper versions🥳😌✨🎉

🚀 Deployment

Add additional notes about how to deploy this on a live system.

⛏️ Built Using

- JavaScript - JavaScript
- Sass - Sass

✍️ Authors

- abdoseadaa - Idea & Initial work
- abdoseadaa - Twitter
- abdoseadaa - My website
- Scroll Animations -Library Website

🎉 Acknowledgements

- الفضل كل الفضل والحمد كل الحمد لله ❤
- Thanks to the people whom helped me to do this small project [Eng/Osama Elzero , DevEd , Traversy Media , and many many more......Thanks alot ❤]
- Inspiration was by the aos library (animate on scroll)
- aos - Reference