scroll-magik

Fast and Fancy animations , Easy to use and perfect for any kind of style

Usage no npm install needed!

<script type="module">
  import scrollMagik from 'https://cdn.skypack.dev/scroll-magik';
</script>

README

Project logo

Scroll Magik

Status GitHub Issues GitHub Pull Requests License

Fast and Fancy animations , Easy to use and perfect for any kind of style.. πŸŽ‰βœ¨πŸŽ¨

πŸ“ Table of Contents

🧐 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/scroll-magik@1.1.0/dist/css/scroll.css

https://unpkg.com/scroll-magik@1.1.0/dist/css/scroll.min.css

https://unpkg.com/scroll-magik@1.1.0/dist/scss/scroll.scss

https://unpkg.com/scroll-magik@1.1.0/dist/js/scroll.js

https://unpkg.com/scroll-magik@1.1.0/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

✍️ Authors

πŸŽ‰ 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"