https://github.com/appleple/scrollscale

https://github.com/appleple/scrollscale

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/appleple/scrollscale
• Owner: appleple
• License: mit
• Created: 2020-06-24T07:43:46.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-01T06:59:13.000Z (about 6 years ago)
• Last Synced: 2025-02-26T19:39:17.674Z (over 1 year ago)
• Language: JavaScript
• Size: 39.5 MB
• Stars: 1
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ScrollScale

[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/appleple/SmartPhoto/master/LICENSE)

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.

```html

```

Wrap video and messages you want to enlarge with ScrollScale class.

```html



  



```


js

```js

document.addEventListener('DOMContentLoaded',function(){

    new ScrollScale("id name");

});

```

You can create some contants layer on the video.

```html



  

  


    
This text appear when video is enlarge. 

  



```


### Basic Standalone Usage

```html



  

  


	


	  
You can create some contants layer on the video.

	

	


	  
contants class

	  This is sample. This is sample. This is sample. This is sample.

	  Button

	

  



window.addEventListener('DOMContentLoaded', function(){

	new ScrollScale("ScrollScale1");

});

```

### Option

	

		variable

		description

		default

	

	

		size

		small/middle/large size video

		middle

	

	

		animation

		animation of contants

		true

	

Set Options

```js

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.