JavaScript Documentation

Documentation for the standalone HTML and JavaScript version, including setup, settings, methods, and events.

Getting Started

Distorted Media Slider is a responsive WebGL slider for images and MP4 videos. It runs in the browser using JavaScript, Three.js, GLSL shaders, and HTML captions.

The standalone package is configured directly in an HTML page. There is no PHP requirement for the JavaScript version.

Please note that the slider must run from an HTTP or HTTPS server. Opening the files directly from disk is not supported.

For best performance, keep your media optimized. Large textures and videos increase GPU cost and can reduce smoothness, especially on mobile devices.

Installation

The quickest reference is any preset HTML file from the demo folder, or the root index.html file included with the package.

Include the slider stylesheet, then load the slider as an ES module and initialize it with your settings.

<script>
	if(document.readyState == 'complete'){
		setupDMS();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			setupDMS();
		});
	}

	function setupDMS(){

		new FWDDMS({
			
			// Main settings.  
			instance: 'fwddms0',
			parentId: 'myDiv',
			displayType: 'responsive',
			sliderDataId: 'sliderData',
			initializeWhenVisible: false,
			maxWidth: 1920,
			maxHeight: 900,
			autoScaleStartWidth: 1200,
			useIntro: true,
			paralax: true,
			autoScale: true,
			infinite: true,
			gui: true,
			showPreloader: true,
			preloaderColor: '#ffffff',
			backgroundColor: '#141414',
			dragFriction: 0.84,
			dragSpeed: 1,
			showMaskGradient: false,
			useCaption: true,

			// Hand helper
			showHandCursorHelper: true,
			infoHelpHTML: 'Holdanddrag',
			handCursorHelperSpriteColor: '#ffffff',
			handCursorHelperTextColor: '#ffffff',
			infoHelpRadius: 50,
			handShowDelay: 1.5,
			hideAfterCount: 4,

			// Post processing.
			antialias: true,
			waveFrequency: 0.1,
			waveAmplitude: 0.02,
			rgbShiftStrength: 0,
			useNoise: false,
			noiseSize: 0.55,
			noiseFadeSize: 0.2,
			noiseBlurStrength: 0.1,
			noiseFadeColor: '#000000',
			flowmapRGBShift: true,
			flowmapRGBShiftAmount: 0.05,
			flowmapRGBShiftStrength: 1,
			flowmapStrength: 1.2,
			flowmapRadius: 0.1,
			flowmapSensitivity: 3,
			flowmapForce: 14.0,
			flowmapFalloff: 1.8

		});

	}
</script>

Add a holder element anywhere in the page body and point parentId to that element.

<div id="myDiv" style="width:100vw; height:100vh;"></div>

If you need multiple sliders on the same page, use unique values for instance, parentId, and sliderDataId for each one.

Setup slider

The slider data is regular HTML markup placed in a hidden container. The sliderDataId setting must point to that container.

<div id="sliderData" style="display: none;">

	<div>
		<div data-src="media/images/1.jpg" data-width="1920" data-height="1280" data-helper-sprite-color="#ffffff" data-helper-text-color="#ffffff" data-noise-pass-color="#000000"></div>
		<div data-caption="">
			<p class="caption-title" data-color="#ffffff"><span>Momentum</span><span>Cycling</span></p>
			<p class="caption-desc" data-color="#cccccc" data-underline-color="#ffffff"><a href="https://fwdapps.net/" target="_blank">View Case</a></p>
		</div>
	</div>

	<div>
		<div data-src="media/videos/1.mp4" data-width="1920" data-height="1080" data-helper-sprite-color="#ffffff" data-helper-text-color="#ffffff" data-noise-pass-color="#000000"></div>
		<div data-caption="">
			<p class="caption-title" data-color="#000000"><span>Winter</span><span>mystique</span></p>
			<p class="caption-desc" data-color="#ffffff" data-underline-color="#ffffff"><a href="https://fwdapps.net/" target="_blank">View Case</a></p>
		</div>
	</div>

	<!-- Add as many items as needed. -->

</div>

Each slider item uses an outer wrapper and a nested media element that includes at least the source path, width, and height.

Slider item parameters

  • data-src - required media path. Supported formats include images and MP4 video.
  • data-width - required natural media width in pixels.
  • data-height - required natural media height in pixels.
  • data-helper-sprite-color - optional per-item helper sprite color override.
  • data-helper-text-color - optional per-item helper text color override.
  • data-noise-pass-color - optional per-item noise fade color override.

Slider item caption

Captions are optional. They are regular HTML and can contain your own classes, links, and styling.

<div>
	<div data-src="media/images/1.jpg" data-width="1920" data-height="1280"></div>
	<div data-caption="">
		<p class="caption-title" data-color="#ffffff"><span>Momentum</span><span>Cycling</span></p>
		<p class="caption-desc" data-color="#cccccc" data-underline-color="#ffffff"><a href="https://fwdapps.net/" target="_blank">View Case</a></p>
	</div>
</div>

Modify code

The source package is built with Vite. Use the source files if you want to customize the slider internals and rebuild the distributable JavaScript.

Settings

All settings are passed directly to the FWDDMS constructor. The JavaScript version now uses real booleans and numbers, so use values like true, false, and numeric literals instead of the old yes and no strings.

Example

new FWDDMS({
	instance: 'fwddms0',
	parentId: 'myDiv',
	displayType: 'afterparent',
	sliderDataId: 'sliderData',
	initializeWhenVisible: false,
	paralax: true,
	maxWidth: 1920,
	maxHeight: 900,
	autoScaleStartWidth: 1200,
	useIntro: true,
	autoScale: true,
	infinite: true,
	gui: true,
	showPreloader: true,
	preloaderColor: '#ffffff',
	backgroundColor: '#ff1414',
	dragFriction: 0.84,
	dragSpeed: 1,
	showMaskGradient: false,
	useCaption: true,
	showHandCursorHelper: true,
	infoHelpHTML: 'Holdanddrag',
	handCursorHelperSpriteColor: '#ffffff',
	handCursorHelperTextColor: '#ffffff',
	infoHelpRadius: 50,
	handShowDelay: 1.5,
	hideAfterCount: 2,
	antialias: true,
	waveFrequency: 0.1,
	waveAmplitude: 0.02,
	rgbShiftStrength: 0,
	useNoise: false,
	noiseSize: 0.55,
	noiseFadeSize: 0.2,
	noiseBlurStrength: 0.1,
	noiseFadeColor: '#000000',
	flowmapRGBShift: true,
	flowmapRGBShiftAmount: 0.05,
	flowmapRGBShiftStrength: 1,
	flowmapStrength: 1.2,
	flowmapRadius: 0.1,
	flowmapSensitivity: 3,
	flowmapForce: 14.0,
	flowmapFalloff: 1.8,
});

instance

Type: (String) - default: required

The global instance name used for API access, for example fwddms0.

parentId

Type: (String) - default: required

The holder element ID where the slider will be rendered.

displayType

Type: (String) - default: responsive

Accepted values are responsive and afterparent. Use afterparent when the slider should follow the size of its parent container.

sliderDataId

Type: (String) - default: required

The ID of the hidden markup container that stores the slider items.

initializeWhenVisible

Type: (Boolean) - default: false

Delays data setup until the slider enters the viewport.

paralax

Type: (Boolean) - default: false

Enables the vertical parallax effect while the slider is visible.

maxWidth

Type: (Number) - default: 1000

The maximum slider width in pixels.

maxHeight

Type: (Number) - default: 700

The maximum slider height in pixels.

autoScaleStartWidth

Type: (Number) - default: 1400

The breakpoint width where responsive height scaling reaches the full maxHeight value.

useIntro

Type: (Boolean) - default: true

Enables the intro reveal animation when the slider starts.

autoScale

Type: (Boolean) - default: true

When enabled in responsive mode, the slider height scales down smoothly as the available width becomes smaller.

infinite

Type: (Boolean) - default: false

Loops the slider continuously instead of stopping at the first and last item.

gui

Type: (Boolean) - default: true

Shows the live dat.GUI settings panel used for testing and tuning.

showPreloader

Type: (Boolean) - default: true

Shows the preloader while media and textures are loading.

preloaderColor

Type: (String) - default: #FFFFFF

The preloader accent color.

backgroundColor

Type: (String) - default: #1a1a1a

The slider background color. Transparent values are also supported.

dragFriction

Type: (Number) - default: 0.88

Controls how quickly drag momentum decays after the pointer is released. Lower values settle faster.

dragSpeed

Type: (Number) - default: 1

Controls how far the slider moves in response to drag input and release momentum.

showMaskGradient

Type: (Boolean) - default: true

Shows the top and bottom gradient mask overlays.

useCaption

Type: (Boolean) - default: true

Enables HTML captions read from the slider item markup.

showHandCursorHelper

Type: (Boolean) - default: true

Shows the hand helper overlay that teaches the drag interaction.

infoHelpHTML

Type: (String) - default: HOLD AND DRAG

The text displayed in the helper overlay.

handCursorHelperSpriteColor

Type: (String) - default: #ffffff

The helper hand sprite tint color. Individual items can override it in markup.

handCursorHelperTextColor

Type: (String) - default: #ffffff

The helper text color. Individual items can override it in markup.

infoHelpRadius

Type: (Number) - default: 72

The helper text orbit radius around the hand sprite.

handShowDelay

Type: (Number) - default: 1

The delay, in seconds, before the helper is shown.

hideAfterCount

Type: (Number) - default: 4

Hides the helper permanently after the user completes this many drag gestures.

antialias

Type: (Boolean) - default: true

Enables FXAA-based smoothing for the final post-processing output.

waveFrequency

Type: (Number) - default: 0.1

The frequency of the wave distortion.

waveAmplitude

Type: (Number) - default: 0.5

The strength of the wave distortion.

rgbShiftStrength

Type: (Number) - default: 0

The base RGB shift amount applied during post processing.

useNoise

Type: (Boolean) - default: true

Enables the noise pass.

noiseSize

Type: (Number) - default: 0

The size of the noise breakup pattern.

noiseFadeSize

Type: (Number) - default: 0

The width of the fade area used by the noise pass.

noiseBlurStrength

Type: (Number) - default: 0.2

The blur intensity inside the noise pass.

noiseFadeColor

Type: (String) - default: #000000

The fade color used by the noise pass. Individual items can override it with data-noise-pass-color.

flowmapRGBShift

Type: (Boolean) - default: false

Enables extra RGB separation driven by the flowmap interaction.

flowmapRGBShiftAmount

Type: (Number) - default: 0.008

The size of the flowmap RGB separation offset.

flowmapRGBShiftStrength

Type: (Number) - default: 1

The multiplier applied to the flowmap RGB shift effect.

flowmapStrength

Type: (Number) - default: 1

The main strength of the flowmap distortion.

flowmapRadius

Type: (Number) - default: 0.12

The radius of each flowmap stamp.

flowmapSensitivity

Type: (Number) - default: 1

Controls how responsive the flowmap is to pointer movement.

flowmapForce

Type: (Number) - default: 2.5

The force applied to the flowmap stamps.

flowmapFalloff

Type: (Number) - default: 1.8

The falloff curve of each flowmap stamp.

Methods

Methods are called on the slider instance, for example fwddms0.destroy().

destroy

.destroy()

Destroys the slider instance and removes its listeners and rendering resources.

Events

Events are registered through addEventListener on the instance after the API becomes available.

let fwddmsAPI = setInterval(() => {
	if (window['fwddms0']) {
		clearInterval(fwddmsAPI);

		fwddms0.addEventListener(FWDDMS.ITEM_UPDATE, onItemUpdate);
		fwddms0.addEventListener(FWDDMS.ERROR, onError);
	}
}, 100);

function onItemUpdate(event) {
	console.log(event);
}

function onError(event) {
	console.log(event);
}

FWDDMS.ITEM_UPDATE

FWDDMS.ITEM_UPDATE

Dispatched while the active slider item state is changing.

FWDDMS.ERROR

FWDDMS.ERROR

Dispatched when the slider encounters a runtime or data error.

FWDDMS.MINIMIZE

FWDDMS.MINIMIZE

Dispatched when the current item leaves the maximized state.

FWDDMS.MAXIMIZE

FWDDMS.MAXIMIZE

Dispatched when an item becomes the active maximized item.

Notes

Distorted Media Slider is designed as a creative WebGL presentation component. It combines shader-based motion, media textures, and HTML overlays, so visual results depend heavily on the quality of the media and the tuning of the settings above.

For support and customizations please write to me directly at this email.

© Copyright FWDesign