Create an empty DIV and give it an ID (e.g. "DIV_ID"). Create a
Film Noise instance, indicating just DIV ID:
var noise = new FilmNoise("DIV_ID");
Done! This code creates
Film Noise using default settings. To have control over settings you should specify preset:
var noise = new FilmNoise("DIV_ID", preset);
preset can be either preset name or custom preset in special format.
Using preset name means that you want to apply one of built-in presets. Using, say, the "60s" preset would look like this:
var noise = new FilmNoise("DIV_ID", "60s");
You can see the full list of built-in presets on the
main page under menu "Presets".
If you don’t want to use any of built-in presets, you should create custom preset.
The best way to do this is to generate preset with our
Noise Editor.
Another approach is to take any preset we've prepared and modify it manually.
Documentation contains step-by-step instructions for all these things.
The main purpose of the
Film Noise is to be an overlay for a certain background.
Of course, with minimal knowledge of HTML/CSS, you can manually place
Film Noise over any web elements and it will work.
But
Film Noise has also built-in tools to set image, video or slideshow as a background.
Let's think we've already created
Film Noise instance using one of the above code examples.
Below is an example of setting a background image:
noise.setImage("images/sphinx.jpg");
Here's how to set a background video:
noise.setVideo("videos/blooms.mp4");
You can see the result in the header of this web page.
To set background slideshow, use this template:
noise.setSlideshow(folder, [slide_1, slide_2, ... , slide_N]);
Here
folder is a path to the image folder and
[slide_1, slide_2, ... , slide_N] is a slide list.
Each slide is a property set that can be either written manually or generated with our
Slide Editor.
Documentation contains a detailed description of slide settings and
Slide Editor.
There you will also learn how to use
Slideshow as a standalone plugin (i. e. without creating
Film Noise instance).
