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>

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.

appleple / ScrollScale