@futuravision/futura.js
v2.2.1
Published
A small JavaScript library for common tasks such as Carousel, Exception, Animation handler and more...
Downloads
61
Readme
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
- 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:
$ npm install @futuravision/futura.jsOnce the package is installed, you can import the library using import or require approach:
import {FvCarousel, AutoWriteText} from 'futura.js';CDN
Using unpkg CDN (ES5 UMD browser module):
<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>GitHub
Using GitHub
$ git clone https://github.com/BlakvGhost/FuturaJS.gitAdd the script tag in your <head></head>
<script src="futurajs/dist/futurajs.min.js" charset="utf-8"></script>Examples
Choose the moduls you want to use:
Fixed Header
Used for making header fixed when scrolling with animation
new fJs.Sticky({
elt: 'header-selector',
});Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>
</head>
<body>
<header id="staticHeader">
<ul>
<li>BlakvGhost</li>
<li>BlakvGhost 1</li>
<li>BlakvGhost 2</li>
</ul>
</header>
</body>
<script type="text/javascript">
new fJs.Sticky({
elt: '#staticHeader',
});
</script>
</html>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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>
</head>
<body>
<div class="revealElement">
<h3>First - A small JavaScript library for common tasks such as Carousel, Exception, Animation handler and more...</h3>
</div>
<div class="revealElement">
<h3>Second - A small JavaScript library for common tasks such as Carousel, Exception, Animation handler and more...</h3>
</div>
<div class="revealElement">
<h3>Third - A small JavaScript library for common tasks such as Carousel, Exception, Animation handler and more...</h3>
</div>
</body>
<script type="text/javascript">
new fJs.Intersection({
elt: '.revealElement',
class: "animate__animated animate__fadeInDown opacity-100",
root: null,
ratio: 0.2,
rootMargin: '0px',
threshold: 0.7,
});
</script>
</html>AutoWriteText
Used for writing text when it visible on the user screen
new fJs.AutoWriteText({
separator: 'separator',
timeout: 'the time out in milisecond'
});
</script>Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>
</head>
<body>
<h1 data-fv-anim='autowrite' data-fv-data="Write Here Your Text"></h1>
</body>
<script type="text/javascript">
new fJs.AutoWriteText({
separator: '|',
timeout: 300
});
</script>
</html>NumberAutoCount
Used for counting number in time interval when it visible on the user screen
new fJs.NumberAutoCount({
timeout: 300
});Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>
</head>
<body>
<h1 data-fv-anim='countdown' data-fv-data='1000'></h1>
</body>
<script type="text/javascript">
new fJs.NumberAutoCount({
timeout: 300
});
</script>
</html>FvCarousel
Used for creating a simply carousel
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
<!DOCTYPE html>
<html lang="fr">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>
</head>
<body>
<div class="fv-carousel-main position-relative w-100" style="height: 500px;">
<div class="fv-dots position-absolute top-50" style="right: 2%"></div>
<div class="fv-control">
<a style="z-index: 5" href="javascript:void(0)" class="btn btn-dark position-absolute start-0 top-50 fv-carousel-control-prev"><i class="mdi mdi-arrow-left-thin"></i></a>
<a style="z-index: 5" href="javascript:void(0)" class="btn btn-dark position-absolute end-0 top-50 fv-carousel-control-next"><i class="mdi mdi-arrow-right-thin"></i></a>
</div>
<div class="fv-carousel">
<div class="fv-carousel-item">
<div class="position-relative w-100 h-100">
<div class="position-absolute h-100 w-100 top-0 start-0">
<img src="/static/img/test-3.jpg" alt="" class="w-100 h-100">
</div>
<div class="position-absolute top-50 start-0 w-100">
<div class="w-50 m-auto p-2" style="z-index: 5;">
<button class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<div class="fv-carousel-item">
<div class="position-relative w-100 h-100">
<div class="position-absolute h-100 w-100 top-0 start-0">
<img src="screenshot.png" alt="" class="w-100 h-100">
</div>
<div class="position-absolute top-50 start-0 w-100">
<div class="w-50 m-auto p-2" style="z-index: 5;">
<button class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<div class="fv-carousel-item">
<div class="position-relative w-100 h-100">
<div class="position-absolute h-100 w-100 top-0 start-0">
<img src="screenshot.png" alt="" class="w-100 h-100">
</div>
<div class="position-absolute top-50 start-0 w-100">
<div class="w-50 m-auto p-2" style="z-index: 5;">
<button class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<div class="fv-carousel-item">
<div class="position-relative w-100 h-100">
<div class="position-absolute h-100 w-100 top-0 start-0">
<img src="screenshot.png" alt="" class="w-100 h-100">
</div>
<div class="position-absolute top-50 start-0 w-100">
<div class="w-50 m-auto p-2" style="z-index: 5;">
<button class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<div class="fv-carousel-item">
<div class="position-relative w-100 h-100">
<div class="position-absolute h-100 w-100 top-0 start-0">
<img src="screenshot.png" alt="" class="w-100 h-100">
</div>
<div class="position-absolute top-50 start-0 w-100">
<div class="w-50 m-auto p-2" style="z-index: 5;">
<button class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
new FvCarousel('.fv-carousel',{
items: 2,
margin: '2px',
prev: '.fv-carousel-control-prev',
next: '.fv-carousel-control-next',
autoplay: true,
autoplaySpeed: '5s',
autoplayHoverPause: true,
timeout: 6000,
allowDrag: false,
keyDirection: true,
direction: 'horizontal',
dots: {
el: '.fv-dots',
direction: 'vertical'
}
});
</script>
</html>Preloader
Make your page Preloader, which loads when the site is loading file and not ready
<!-- ADD THIS CUSTOM TAG JUST AFTER INSIDE BODY TAG -->
<fv-preloader></fv-preloader>
Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>
</head>
<body>
<fv-preloader></fv-preloader>
</body>
</html>Tech Stack
Client: HTML5, CSS3, ES6
Authors
License
Support
For support, email me on [email protected] or join our Slack channel.