Package Exports

ani-video

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ani-video) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

AniVideo.Js

Javascript Plugin

AniVideo.js is a simple, light-weighted and easy to use JavaScript library to combine animations (gifs) and a video together to create beautiful websites.

Get Started

All you will need to include:

The JavaScript file ani-video.js
The css file ani-video.css

Including files:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/ani-video@1.0.1/dist/ani-video.css" />

<!-- Javascript Files -->
<script type="text/javascript" src="https://unpkg.com/ani-video@1.0.1/dist/ani-video.js"></script>

Using NPM

Optionally, you can install AniVideo.js with npm

npm install ani-video

Usage

HTML Structure

Start your HTML document with the compulsory HTML DOCTYPE declaration, must start with a <! DOCTYPE> declaration. Than add a html tag and set it's 'id'.

<div id="ani-video-wrapper"></div>

Initialization

To activate the plugin all you have to set some options based on your requirements

//// create new Plugin instance
    var aniVideoInstance = new AniVideo({
        // Settings
        selector: "#ani-video-wrapper",
        src: './images/ced.fund_video.mp4',
        startingGif: './images/animation_2.gif',
        endingGif: './images/animation_3.gif',

        // Video
        loop: false,
        muted: true,

        // Appearance
        title: 'We Are Developing A Blockchain Network To Finance Your Student Loan Debt',
        buttonText:'Click play to learn',
        showOverlayAtEnd: true,
        showProgress: true,
        
    })