Skip to content
/ Futura.js Public

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

futuravision.github.io/futura.js/

License

MIT license
2 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

FuturaVision/Futura.js

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
dist
dist
 
 
lib
lib
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
fjs.init.js
fjs.init.js
 
 
futurajs.png
futurajs.png
 
 
package.json
package.json
 
 

Repository files navigation

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

npm version Build status install size npm bundle size npm downloads

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

Chrome Firefox Safari Opera Edge IE
Latest âś” Latest âś” Latest âś” Latest âś” Latest âś” 11 âś”

Installation

Package manager

Using npm:

$ npm install @futuravision/futura.js

Once 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/FuturaVision/FuturaJS.git

Add 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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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

MIT License GPLv3 License AGPL License

Support

For support, email me on kabirou2001@gmail.com or join our Slack channel.

About

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

futuravision.github.io/Futura.js/

Topics

javascript animation carousel typescript-library librairy autowriter reveal-on-scroll

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases 1

v.2.2.1 beta Latest
Jan 28, 2023

Contributors 2

  •  
  •  

Languages