A lightweight, modern, minimal-dependency library for creating endless "film player animation.
Compared to gallery.js, film.js:
- works with all elements, as gallery.js works with images only
- only supports horizon mode
If you just need infinite scrolling of images, you should try gallery.js.
Check out the demo here: https://f15gdsy.github.io/film.js/
If you are using npm:
npm install film.js --save
If you are using yarn:
yarn add film.js
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!
- { 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".
Starts the animation.
Stops the animation.
Re-initialize the film, can be used on resize.
window.addEventListener('resize', () => {
film.refresh()
})