# FuturaJS
A small JavaScript library for common tasks such as Carousel, Exception, Animation handler, Auto Write Text, Auto Count Number in interval, static header and more...
## Table of Contents
- [Features](#features)
- [Browser Support](#browser-support)
- [Installing](#installing)
- [Package manager](#package-manager)
- [CDN](#cdn)
- [GitHub](#github)
- [Usage/Examples](#examples)
- [Fixed Header](#fixed-header)
- [Intersection](#intersection)
- [Auto Write Text](#autowritetext)
- [Auto Count Number](#numberautocount)
- [FvCarousel](#fvcarousel)
- [Preloader](#preloader)
- [Authors](#authors)
- [License](#license)
## Features
- Make Carousel Easy to use
- Auto Write Text When it visible to the visitor screen
- Auto Count Number When it visible to the screen
- Make animation on elements when thery are visible to the visitor screen
- Make your header static when you are scrolling down and default when up
- Make your page Preloader, which loads when the site is loading file and not ready
## Browser Support
 |  |  |  |  |  |
--- | --- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |
## Installation
### Package manager
Using npm:
```bash
$ npm install @futuravision/futura.js
```
Once the package is installed, you can import the library using `import` or `require` approach:
```js
import {FvCarousel, AutoWriteText} from 'futura.js';
```
### CDN
Using unpkg CDN (ES5 UMD browser module):
```html
```
### GitHub
Using GitHub
```bash
$ git clone https://github.com/BlakvGhost/FuturaJS.git
```
Add the script tag in your \<\/head>
```html
```
## Examples
Choose the moduls you want to use:
### Fixed Header
Used for making header fixed when scrolling with animation
```javascript
new fJs.Sticky({
elt: 'header-selector',
});
```
Exemple
```html
BlakvGhost
BlakvGhost 1
BlakvGhost 2
```
#### Possible Properties
| params | Value |
| ----------------- | ------------------------------------------------------------------ |
| elt: | header selector|
| callback: | A callback function when the header is static |
| fallback :| "A fallback function when the header become as default" |
----------------------------------------------------------------
### Intersection
Used for making animation type when an element is visible on the user screen
```javascript
new fJs.Intersection({
elt: 'elements-selector',
class: "list of your custom animation",
root: null,
ratio: 0.2,
rootMargin: '0px',
threshold: 0.7,
});
```
#### Possible Properties
all the following properties are in object notation
| params | Value |
| ----------------- | ------------------------------------------------------------------ |
| elt: | elements class selector|
| class: | Custom Animation class when the element is visible in screen|
----------------------------------------------------------------
Exemple with animation.js library class
```html
First - A small JavaScript library for common tasks such as Carousel, Exception, Animation handler and more...
Second - A small JavaScript library for common tasks such as Carousel, Exception, Animation handler and more...
Third - A small JavaScript library for common tasks such as Carousel, Exception, Animation handler and more...
```
### AutoWriteText
Used for writing text when it visible on the user screen
```javascript
new fJs.AutoWriteText({
separator: 'separator',
timeout: 'the time out in milisecond'
});
```
Exemple
```html
```
### NumberAutoCount
Used for counting number in time interval when it visible on the user screen
```javascript
new fJs.NumberAutoCount({
timeout: 300
});
```
Exemple
```html
```
### FvCarousel
Used for creating a simply carousel
```javascript
new FvCarousel('.fv-carousel',{
items: "Number of element per screen",
margin: 'Margin between every element',
prev: 'prev-button-selector',
next: 'next-button-selector',
autoplay: "A boolean to indicat if autoplay enabled",
autoplaySpeed: 'A string for speed time',
autoplayHoverPause: "A boolean to indicat if autoplayHoverPause enabled",
timeout: "a number for the timeout in milisecond",
allowDrag: "A boolean to indicate if allowDrag enabled",
keyDirection: "A boolean to indicate if KeyDirection enabled",
direction: 'horizontal or vertical',
dots: {
el: 'dots-selector',
direction: 'dots direction'
}
});
```
Exemple with bootstrap class
```html
```
### Preloader
Make your page Preloader, which loads when the site is loading file and not ready
```html
```
Exemple
```html
```
## Tech Stack
**Client:** HTML5, CSS3, ES6
## Authors
- [@v1p3r75](https://github.com/v1p3r75)
- [@BlakvGhost](https://github.com/BlakvGhost)
## License
[](https://choosealicense.com/licenses/mit/)
[](https://opensource.org/licenses/)
[](http://www.gnu.org/licenses/agpl-3.0)
## Support
For support, email me on kabirou2001@gmail.com or join our Slack channel.
