Type Alias VFXOpts

VFXOpts: {
    pixelRatio?: number;
    zIndex?: number;
    autoplay?: boolean;
    scrollPadding?: number | [number, number] | false;
    postEffect?: VFXPostEffect;
}

Options to initialize VFX class.

Type declaration

  • OptionalpixelRatio?: number

    The pixelRatio of the WebGL rendering context.

    VFX-JS renders the output with window.devicePixelRatio by default.
    This means the resolution of the WebGL canvas gets larger in high-DPI display devices (e.g. iPhone).

    However, you might find VFX-JS not being rendered smoothly, especially in low-end devices.
    In such case, you can pass lower values to pixelRatio so VFX-JS can render in lower resolutions.

    For example, if pixelRatio is 0.5, VFX-JS renders in the half resolution of the native resolution.

    ref. https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

  • OptionalzIndex?: number

    z-index for the WebGL canvas.
    This is useful if you want to place the canvas behind other DOM element, or vice versa.

  • Optionalautoplay?: boolean

    Whether VFX-JS should start playing animations automatically (Default: true).

    If false, you have to call VFX.play() manually to start animation,
    or render frames only when it's necessary by calling VFX.render().

  • OptionalscrollPadding?: number | [number, number] | false

    Option to control the dynamic scroll technique to reduce scroll jank (Default: 0.1).

    If a number is given, VFX-JS will use the number as the padding ratio.
    For example, if 0.2 is given, VFX-JS will add 20% of padding to the canvas.
    (= the canvas width & height will be 140% of the window width & height)

    If [number, number] is given, VFX-JS will use the numbers as the horizontal & vertical padding ratio.
    For example, if [0, 0.2] is given, VFX-JS will only add the vertical padding with 20% height.

    If you prefer not using the scroll jank technique, specify false.

  • OptionalpostEffect?: VFXPostEffect

    Post effect to be applied to the final output.
    You can specify a custom fragment shader to process the entire canvas output.