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.