new-scroll-animations v1.0.1

📝 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.

Prerequisites

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

<div data-scroll="fade-up 1s hide">
  <h1>code here...</h1>
</div>

Installing

• 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 :

<div data-scroll="fade-up 1s hide">
 <h1>code here...</h1>
</div>

🎈 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