📝 Table of Contents

• About
• Getting Started
• Usage
• Options
• Built Using
• Authors
• Acknowledgments

🧐 About

• Scroll Magik 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

• Main goal of doing this library that i want user to write less code to make more animations 🎉✨
• with only one data attribute "data-scroll" user can do 3 options for now 😌

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-magik --save

OR

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

https://unpkg.com/[email protected]/dist/css/scroll.css

https://unpkg.com/[email protected]/dist/css/scroll.min.css

https://unpkg.com/[email protected]/dist/scss/scroll.scss

https://unpkg.com/[email protected]/dist/js/scroll.js

https://unpkg.com/[email protected]/dist/js/scroll.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 Magik 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🥳😌✨🎉

⛏️ Built Using

• JavaScript - JavaScript
• Sass - Sass

✍️ Authors

• abdoseadaa - Idea & Initial work
• abdoseadaa - Twitter
• abdoseadaa - My website
• Scroll Magik -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 "# scroll-magik"