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,
})