svd.js
Usage
You will need to include:
- The JavaScript file
svd.js
(or its minified versionsvd.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
});