Fanoos

Fanoos (Farsi: فانوس, "Lighthouse") is a super lightweight jQuery plugin that lets you reveal part's of your website with animations when user is scrolling down the page.

Fanoos is created by Javid Izadfar at IKA Computing Club as a free and open-source tool; so feel free to use and modify it as you need.

License

Fanoos files are licensed under the MIT License:

• https://opensource.org/licenses/mit-license.html

Contributing

We support and encourage any kind of contribution by anyone. Please read through contributing guidelines. In these guidelines, directions to asking for an option, reporting a bug and other notes are fully explained.

Animations

Fanoos itself is not an animation library so you need to add a CSS toolkit.

by defaults, Fanoos looks for Animate.css.

Usage

To use Fanoos on your project, follow these steps:

1. Download Fanoos’s latest release.

2. Add Fanoos folder to your preferred directory on your project.

3. Add Fanoos.js to your HTML file (after jQuery):

<!-- Fanoos js -->
    <script src="js/fanoos.js"></script>

or

<!-- Fanoos min.js -->
    <script src="js/fanoos.min.js"></script>

4. Add your favorite animation toolkit to your HTML file:

<!-- Animate css -->
  <link href="css/animate.css" rel="stylesheet">

5. Initiate Fanoos in your custom js file:

$('body').fanoos()

see Options for more initialization options.

6. Implement a Fanoos element, using .fanoos and animation classes:

<div class="fanoos fadeIn"> .... </div>

Options

Option	Default value	Functionality
animationClass	'animated'	Name of the class which activates animation
duration	1000	Duration of Animation. ms
offset	0	Distance from element to play animation. pixels
delay	0	Time from activating animation to actually playing it. ms
workOnMobile	false	Whether work on mobile or not. Boolean
mobileWidth	768	Max width of mobile device pixels

Creators

• Javid Izadfar
  • Email: [email protected]
  • Twitter: twitter.com/JavidIzadfar
  • Github: github.com/Javid-Izadfar