new-scroll-animations

1.0.1 • Public • Published

Project logo

code here...

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

✍️ 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

Package Sidebar

Install

npm i new-scroll-animations

Weekly Downloads

3

Version

1.0.1

License

ISC

Unpacked Size

53.9 kB

Total Files

7

Last publish

Collaborators

  • abdoseadaa