Zoopraxiscope is no dependency, smooth interactive video scroll framework📽✨
https://zoopraxiscope.vercel.app/
Include the core in your HTML file:
<link rel="stylesheet" href="https://zoopraxiscope.vercel.app/css/main.css">
<script src="https://zoopraxiscope.vercel.app/js/main.css">html
<link rel="stylesheet" href="https://zoopraxiscope.vercel.app/lib/css/core.css">
<body>
<!-- wrap zoopraxiscope class div -->
<div class="zoopraxiscope">
<!-- wrap zoopraxiscope-section class section -->
<section class="zoopraxiscope-section" id="forward">
<h1>zoopraxiscope</h1>
<!-- if you want to add scene wrap zoopraxiscope-sticky -->
<div class="zoopraxiscope-sticky" id="iu">
<p>IU</p>
</div>
<div class="zoopraxiscope-sticky" id="story">
<p>myoldstory</p>
</div>
</section>
<section class="zoopraxiscope-section" id="backward">
<h1>epocsixarpooz</h1>
<div class="zoopraxiscope-sticky" id="ui">
<p>UI</p>
</div>
</section>
<section class="zoopraxiscope-section" id="middle">
<!-- if you want common behavior you just make tag without sticky class name -->
<div id="void_example">
<div class="text-box text-center">
<h1>epocsixarpooz</h1>
<p>
Egestas integer eget aliquet nibh praesent tristique magna sit.<br />
Dui accumsan sit amet nulla facilisi.<br />
Felis eget nunc lobortis mattis aliquam faucibus purus in.<br />
Et magnis dis parturient montes nascetur ridiculus mus mauris.<br />
Justo donec enim diam vulputate ut pharetra sit. Ornare massa eget
egestas purus viverra.
</p>
</div>
</div>
</section>
</div>
<body>
<script src="https://zoopraxiscope.vercel.app/lib/js/core.js">
<script src="example.js">javascript
// example.js
const film = new Film()
const section1 = new Section({
// projector type section
id: 'forward',
type: 'projector',
playLengthParam: 10,
playLength: 0,
videoImageCount: 300,
canvasWidth: 1920,
canvasHeight: 1080,
imageSequencesStartEnd: [0, 299],
imagePath: './video/videoplayback_',
firstImageSequence: 1000,
extension: 'jpg',
fadeIn: false,
scenes: [
{
element: document.getElementById('iu'),
animations: [
{
type: 'opacity',
inout: 'in',
value: [0, 1, { start: 0.2, end: 0.4 }],
},
{
type: 'opacity',
inout: 'out',
value: [1, 0, { start: 0.41, end: 0.62 }],
},
],
},
{
element: document.getElementById('story'),
animations: [
{
type: 'opacity',
inout: 'in',
value: [0, 1, { start: 0.63, end: 0.8 }],
},
{
type: 'opacity',
inout: 'out',
value: [1, 0, { start: 0.81, end: 0.91 }],
},
],
},
],
})
// add images
section1.setCanvasImages()
section1.draw()
// add section
film.addSection(section1)
film.setLayout(section1)
const voidSection = new Section({
// void type section
id: 'middle',
type: 'void',
playLength: 0,
scenes: [
{
element: document.getElementById('void_example'),
},
],
})
// add void section
film.addSection(voidSection)
film.init()