Play/Rewind Video On Scroll – ScrollyVideo.js

Category: Javascript , Recommended | January 29, 2024
Author:dkaoster
Views Total:214 views
Official Page:Go to website
Last Update:January 29, 2024
License:MIT

Preview:

Play/Rewind Video On Scroll – ScrollyVideo.js

Description:

ScrollyVideo.js is a JavaScript component to play and rewind your videos based on scroll events or any other external control.

Works seamlessly with React, Svelte, Vue, and even plain JavaScript.

How to use it (JavaScript):

1. Download and import the scrolly-video.js.

<script src="/dist/scrolly-video.js"></script>

2. Create a container to hold your video.

<div id="scrolly-video"></div>

3. Initialize the ScrollyVideo.js and specify the path to the video.

new ScrollyVideo({
    scrollyVideoContainer: "scrolly-video",
    src: "/path/to/1.mp4"
});

4. More configurations.

new ScrollyVideo({
    // Whether the video should "cover" inside the container
    cover: true, 
    // Whether the video should "stick" to the top of the container
    sticky: true, 
    // Whether the container should expand to 100vh and 100vw
    full: true, 
    // Whether this object should automatically respond to scroll
    trackScroll: true, 
    // How fast the video transitions between points
    transitionSpeed: 8, 
    // When to stop the video animation, in seconds
    frameThreshold: 0.1, 
    // Whether to try using the webcodecs approach
    useWebCodecs: true, 
    // Whether to print debug stats to the console
    debug: false, 
    
});

Changelog:

v0.0.17 (01/29/2024)

  • Update dependencies

v0.0.16 (08/10/2023)

  • Update dependencies

v0.0.15 (04/04/2023)

  • Fix Safari Low Power Mode

v0.0.14 (03/02/2023)

  • Destroy ‘scroll’ event listener

v0.0.13 (02/12/2023)

  • React ESM Export

v0.0.12 (02/11/2023)

  • Fix Safari 14

v0.0.11 (02/08/2023)

  • Bugfixes

You Might Be Interested In:


Leave a Reply