ScrollScale
JavaScript program makes video enlarge and show the catchphrases when it's in the center of the window.
Requirements
- ES6
- CSS3
Usage
JavaScript program makes video enlarge when it's in the center of the window.
<script src="js/ScrollScale.js"></script>
<link rel="stylesheet" href="css/ScrollScale.css">Wrap video and messages you want to enlarge with ScrollScale class.
<div class="ScrollScale">
<video src=""/>
</div>js
document.addEventListener('DOMContentLoaded',function(){
new ScrollScale("id name");
});You can create some contants layer on the video.
<div class="ScrollScale">
<video src=""/>
<div class="contants">
<p>This text appear when video is enlarge. </p>
</div>
</div>Basic Standalone Usage
<div class="ScrollScale" id="ScrollScale1">
<video src="video/sample.mp4" muted="muted" loop></video>
<div class="contants">
<div>
<h3>You can create some contants layer on the video.</h3>
</div>
<div>
<h3>contants class</h3>
<span>This is sample. This is sample. This is sample. This is sample.</span>
<a href="#">Button</a>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', function(){
new ScrollScale("ScrollScale1");
});
</script>Option
| variable | description | default |
|---|---|---|
| size | small/middle/large size video | middle |
| animation | animation of contants | true |
Set Options
window.addEventListener('DOMContentLoaded', function(){
new ScrollScale("ScrollScale1", {
size: "large",
animation: false,
});
});Caution
If you want to publish the site equiped this program for smartphone, you shoud write "poster" in video tag.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent