film.js

film.js

A lightweight, modern, minimal-dependency library for creating endless "film player animation.

Check out the demo here: https://f15gdsy.github.io/film.js/

How

1. Installation

If you are using npm:

npm install vue-insert-compo --save

If you are using yarn:

yarn add vue-insert-compo

2. Use

First, you need to setup the following DOM structure:

<div class="film">
  <div class="film__frame"></div>
  <div class="film__frame"></div>
  // ...
  <div class="film__frame"></div>
</div>

Then create a new film object

const film = new Film('.film')
// or
const film = new Film(filmEl)

That's it!

API

Constructor

params

• { String | HTMLElement } el - The film DOM element.
  • { Number } frameWidth - Set the frame width. If not set, framesPerView will be used. If set, will override framesPerView.
  • { Number } framesPerView - Set how many frames should be in viewport.
  • { Number } speed - Set the speed of the frame movmenet. Default 20.
  • { String } direction - Direction of the frame movement. Can be either "left" or "right". Default "left".

.start()

Starts the animation.

.stop()

Stops the animation.

.refresh()

Re-initialize the film, can be used on resize.

window.addEventListener('resize', () => {
  film.refresh()
})