Fancy Scroll and Canvas-based Image Sequence Animation

Canvas Scroll Clip is a small, independent JavaScript library for the animation of scrolling image sequences in the canvas. There are no third-party dependencies.

How to make use of it:

1. Install and import the Canvas Scroll Clip.

# Yarn
$ yarn add canvas-scroll-clip

# NPM
$ npm i canvas-scroll-clip --save
import CanvasScrollClip from “canvas-scroll-clip”;

2. Initialize the CanvasScrollClip on the goal container component, and specify the path to the primary picture.

new CanvasScrollClip(document.querySelector('.example'), {
    framePath: "https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/0001.jpg",
    frameCount: 140,
    scrollArea: 2000
})

3. Event handlers.

CanvasScrollClip.events.on('viewport.scroll', function(scrollTop){
  console.log(scrollTop);
});

CanvasScrollClip.events.on('viewport.resize', function(){
  // on resize
});

CanvasScrollClip.events.on('images.loaded', function() {
  // on image loaded
});

Check Here – Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

Options

The options object is required and takes these parameters:

framePath (required)

Type: String URL of the first image of a sequence.

Important note: Sequence should start with leading 0, minimum 2 digits, and at the end of the name. for example: https://<URL>/frame_0001.jpg.

frameCount (required)

Type: Number A number of in total in a sequence.

scrollArea (recommended)

Type: Number
Default: 2x the IMAGE height

Scrollable area height that is used to play the image sequence.

identifier

Type: String Used for container and child element css classes.

Events

viewport.scroll

Callback params: scrollTop
Type: Number

The event is triggered with a scroll event. Returns scrollTop position.

Image Sequence Animation On Scroll, Canvas Scroll Clip Plugin/Github, canvas image sequence

Read More –

Accessible Off-canvas Grid Gallery with jQuery Plugin
Simple Infinite Carousel In Vanilla JavaScript | Slider-JS


See Demo And Download

Official Website(m5kr1pka): Click Here

This superior jQuery/javascript plugin is developed by m5kr1pka. For extra Advanced Usage, please go to the official website.

Share