Play/Rewind Video On Scroll – ScrollyVideo.js

Category: Javascript , Recommended | June 14, 2024
Author:dkaoster
Views Total:11 views
Official Page:Go to website
Last Update:June 14, 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,
    // ready callback
    onReady = () => {},

Changelog:

v0.0.23 (06/14/2024)

  • feat: expose onChange to react wrapper

v0.0.22 (06/13/2024)

  • fix initial jump

v0.0.21 (06/03/2024)

  • Improve: programmatic scrolling experience

v0.0.20 (05/04/2024)

  • Added ready callback

v0.0.19 (03/31/2024)

  • Feat(setScrollPercent): add scroll behavior smooth
  • feat: add data-scrolly-container attribute to vue and svelte as well

v0.0.18 (03/28/2024)

  • Update dependencies

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