@dmakaridze/svd.js NPM

svd.js

Usage

You will need to include:

The JavaScript file svd.js (or its minified version svd.min.js)
The css file svd.css

Install using bower or npm

You can install svd.js with yarn or npm if you prefer:

Terminal:

// With yarn
yarn add @dmakaridze/svd.js

// With npm
npm install @dmakaridze/svd.js

Including files:

<!--suppress ALL -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/@dmakaridze/svd.js/dist/css/svd.css">

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/gsap/src/minified/TweenMax.min.js"></script>
<script src="node_modules/svg.js/dist/svg.min.js"></script>

<script type="text/javascript" src="node_modules/@dmakaridze/svd.js/dist/js/svd.js"></script>

Required HTML structure

For interactive video story you should create a wrapper (<div id="svd"> in this case). The wrapper can not be the body element.

<div id="svd"></div>

Initialization

Initialization with Vanilla Javascript

All you need to do is call svd.js before the closing </body> tag.

svd_init({
    // options here
    story: 'story.json',
    id: 'svd',
    width: '100%',
    height: '100%',
    margin: 0,
    padding: 0,
    verticalAlign: 'center',
    start: 0,
    modalFrameId: null,
    modalTitleId: null
});