JavaScript Documentation

Documentation for the JavaScript version, API and overall JavaScript implementation.

Getting Started

Shader Slider, a powerful, responsive, and extremely customizable, versatile slider with image(.jpg, jpeg, .png, .webp) and video (.mp4) suppoer, seamlessly running on all major browsers and mobile devices, including iPhone, iPad, iOS, Android, MAC, and Windows, elevating your website's audio experience to a whole new level.

It is built using EcmaScript6 using the latest JavaScript and CSS standards. The 3D sphere and particles use Three.js and WebGL shaders running exclusively on the device's GPU.

Please note that it will not work locally, it has to run on an HTTP or HTTPS protocol.

Installation

Choose one of the preset HTML files from the build folder and open it in a text editor as a refference.

In the download files inside the build folder you will find the src folder that contains the JavaScript code and content folder that contains the CSS file and other important files like the images mask, the content folder has to be uploaded on the server where The slider is used.

Use the start.html file as refference.

Include the slider CSS file and JavaScript in the header:

<head>

<!-- ... -->
<link rel="stylesheet" href="./content/global.css">
<script type="text/javascript" src="./src/FWDSS.js"></script>
<!-- ... -->	

</head>

The next step is to add the initialize code in the page header or footer after the inclusion of the slider JavaScript and CSS files.

<script type="text/javascript">
	if(document.readyState == 'complete'){
		fwdSetupSliders();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			fwdSetupSliders();
		});
	}

	function fwdSetupSliders(){
		new FWDSS({
            // Main settings.  
            instance: 'fwdss0',
            displayType: 'responsive',
            parentId: 'myDiv',
            sliderDataId: 'sliderData',
            textDataId: 'text',
            initializeWhenVisible:'yes',
            maxWidth: 1200,
            maxHeight: 750,
            autoScale: 'yes',
            stopScrollingForPx: 0,
            addRGBDistortion: 'yes',
            paralax: 'no',
            showMouseScrollIcon: 'yes',
            rotateImages: 'yes',
            randomizeImages:'no',
            gridSize: 24,
            gridMouseRadiusFactor: 0.2,
            gridMouseStrengthFactor: 1,
            gridMouseRelaxation: 0.9,
            imageZTransitionDuration: 3,
            imageZCount: 3,
            imageZOffset: 400,
            backgroundColor: '#000000',
            showGUI: 'yes'
        });
	}
</script>

The last step adding the slider is to create a div with an unique ID that will act as the parent/holder for the slider and set the parentId option to point to the div id ex: parentId: 'myDiv', this div can be added anywhere in your page.

<!--Slider holder. --> 
<div id="myDiv"></div>

To add multiple sliders just redo the steps explained above and make sure to change the instance to fwdss1, fwdss2, fwdss3, etc... depending on how manysliders are added, also change the parentId to a different ID and if you want add a different slider gallery by also change the sliderDataId to point to a different slider gallery.

Please read the settings section to understand the slider configuration options.

A slider gallery is created by adding in the page inside the body a div with an unique ID and setting the display style to none, this will be used only as the slider gallery data markup, This unique ID has to be added as the value of the sliderDataId option in the slider settings like this sliderDataId: 'sliderData'.

<!-- Slider data -->
<div id="sliderData" style="display: none;">
      
	<div data-src="media/images/44.jpg" data-width="1920" data-height="900" data-transition-type="slide1">
	</div>

	<div data-src="media/videos/11.mp4" data-width="1920" data-height="1080" data-transition-type="sinusoidal">
	</div>

	<div data-src="media/images/22.jpg" data-width="1920" data-height="900" data-transition-type="slide2">
	</div>

	<div data-src="media/videos/22.mp4" data-width="1920" data-height="1080" data-transition-type="whater">
	</div>
			
	<div data-src="media/images/33.jpg" data-width="1920" data-height="900" data-transition-type="tv">
	</div>

	<div data-src="media/images/11.jpg" data-width="1920" data-height="900" data-transition-type="pixelation">
	</div> 

</div>

Adding slider gallery items is done by adding inside the slider gallery div one or more div's with data paremeters expplained below.

Playlist item parameters

  • data-src - required source image (.jpg, .jpeg, .png, .webp) or video (.mp4).
  • data-width - source width in px.
  • data-height - source height in px.
  • data-transition-type - the transtion type between the slider items, slide1, slide2, sinusoidal, tv, whater, pixelation.

Gallery caption

The caption is optional and is added inside the div element as showed below, make sure to add this id as the value of the textDataId: 'text' in the slider parameters.

The styling for the caption/text is done in the global.css file.

<!-- Slider text. -->
<div id="text" style="display: none;">
	<h3> <a href="https://webdesign-flash.ro" target="_blank">SHIFT YOUR PERSPECTIVE</a></h3>
</div>

Settings

Shader Slider has many options that allows to customize it's features. They are added directly in the slider constructor as it can be seen in the installation section.

Example

<script type="text/javascript">
	if(document.readyState == 'complete'){
		fwdSetupSliders();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			fwdSetupSliders();
		});
	}

	function fwdSetupSliders(){
		new FWDSS({ 

			// Main settings.  
            instance: 'fwdss0',
            displayType: 'responsive',
            parentId: 'myDiv',
            sliderDataId: 'sliderData',
			etc...
			
		})
	}
</script>

instance

Type: (String) - default: unset

The slider instance name, this is used to call the API. In the examples files the instance name is set to fwdss0, if you are using multiplesliders instances just change the instance to fwdss1, fwdss2, fwdss3, etc...

displayType

Type: (String) - default: responsive

Player display type.

  • responsive - displays the slider in responsive type based on the maxWidth and maxHeight settings.
  • afterparent - displays the slider based on the parent width and height.

parentId

Type: (String) - default: unset

The slider holder/div ID, please make sure that this has an unique ID, it can be added anywhere in your page.

sliderDataId

Type: (String) - default: unset

The slider gallery data div ID, please read the slider gallery section for more info.

textDataId

Type: (String) - default: unset

The slider gallery captiontext div ID, please read the slider gallery section for more info, add any HTML here and format it in the global.css file.

initializeWhenVisible

Type: (String) - default: yes

This can be yes or no, lazy scrolling / loading, the posibility to initialize SS on scroll when the product is visible in the page, this way for example if the product is in a section of a page that is not visible it will not be initialized, instead SS will be initalized only when the user is scrolling to that section in which SS is added.

maxWidth

Type: (Number) - default: 1920

The slider maximum width in px.

maxHeight

Type: (Number) - default: 800

The slider maximum height in px.

autoScale

Type: (String) - default: yes

This can be yes or no and applies if the displayType is reponsive. If set to yes thisslider height will always be proportional to The slider width, if set to no the height will be fixed based on the maxHeight property.

stopScrollingForPx

Type: (Number) - default: 0

This can be a number starting from zero. It represents the number of pixels to add vertically to keep the slider sticky while scrolling. Please note that this option will only work correctly if the slider height matches the browser viewport height

addRGBDistortion

Type: (String) - default: yes

This can be yes or no, ads RGB (red, green and blue) mouse distortion.

paralax

Type: (String) - default: yes

This can be yes or no, ads paralax effect.

showMouseScrollIcon

Type: (String) - default: no

This can be yes or no, show or not the mouse scroll icon.

rotateImages

Type: (String) - default: no

This can be yes or no, ads slight rotation to the image and mask images if used.

randomizeImages

Type: (String) - default: no

This can be yes or no, randomize the order of images/videos.

gridSize

Type: (Number) - default: 24

The slider mouse distortion gird size.

gridMouseRadiusFactor

Type: (Number) - default: 0.2

A number from 0 to 1, the slider mouse distortion radius factor.

gridMouseStrengthFactor

Type: (Number) - default: 1

A number from 0 to 2, the slider mouse distortion strength factor.

gridMouseRelaxation

Type: (Number) - default: 0.9

A number from 0 to 1. This value determines how quickly the grid squares return to their original positions. The higher the number, the slower the squares will move back into place.

imageZTransitionDuration

Type: (Number) - default: 5

A number starting form 1. The maskas transition duration in seconds.

imageZCount

Type: (Number) - default: 3

A number starting form 0. The number of maskas added over the original image/video.

imageZOffset

Type: (Number) - default: 400

A number starting from 0. This sets the mask's Z offset in 3D units. Adjust this number until you achieve the desired visual effect.

backgroundColor

Type: (String) - default: #000000

This main background color, if you want to use a transparent color please make sure to se the useUnrealBloomPass to no.

showGUI

Type: (String) - default: no

This can be yes or no, show or not the live settings.

Methods

Methods are functions that can be called via the API to execute certain actions.

JavaScript methods look like fwdss0.methodName( /* arguments */ ), please note that fwdss0 is the slider instance name, if you are using multiplesliders don't forget to set the instance unique for each instance like this fwdss1, fwdss2, fwdss3, etc... depending on how manysliders are added.

getCurrentId

.getCurrentId()

Get the slider current ID starting from 0.

destroy

.destroy():Void

Destory the slider instance and remove it from DOM.

Events

Shader Slider has many events, they are added via the addEventListener method add accessed via the instance name.

The events must be registered when the API is ready.

// API.
let fwdssAPI = setInterval(() =>{
if(window['fwdss0']){
	console.log('SS API ready')
	clearInterval(fwdssAPI);

	// Register the LIKE event.
	fwdss0.addEventListener(FWDSS.TRANSITION_START, onTransitionStart);
}
}, 100);


// Listen for the LIKE event.
function onTransitionStart(e){
	console.log(e, fwdss0.getCurrentId());
}

FWDSS.TRANSITION_START

FWDSS.TRANSITION_START

Dispatched when the slider transition starts.

FWDSS.TRANSITION_COMPLETE

FWDSS.TRANSITION_COMPLETE

Dispatched when the slider transition is complete.

FWDSS.TEXTURES_LOADED

FWDSS.TEXTURES_LOADED

Dispatched when all textures are loaded.

FWDSS.ERROR

FWDSS.ERROR

Dispatched when an error occurs, such as being unable to load an image.

Notes

I've been working on this slider for almost an year, it was a challange to bring the 3D world and WebGL in a real project, I will continue to improve it and add new features.

For me this is more than a job, it is my passion, I love to create innovative tools that my clients can benefit from. @Tibi - FWD.

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

© Copyright FWDesign