JavaScript Background Effects

free change background color or image, animated, with canvas_ and etc.

1.FLOW FIELD N.2

Made with

Html
Css/SCSS
Javascript

Author

Fabio Ottaviani

Demo

See the Pen Flow field n.2 by Fabio Ottaviani (@supah)
on CodePen.

2.OBLIGATORY FALLING SNOW

Try playing with the parameters on the gui to the right. The falling snow is just one effect of a countless number of possibilities.

Made with

Html
Css/SCSS
Javascript

Author

Simon Goellner

Demo

See the Pen Obligatory Falling Snow … but with Sparticles.js by Simon Goellner (@simeydotme)
on CodePen.

3.METABALLS – WEBGL

Made with

Html
Css/SCSS
Javascript

Author

Alfons Nilsson

Demo

See the Pen Metaballs – WebGL by Alfons Nilsson (@TC5550)
on CodePen.

4.FILL BACKGROUNDS WITH ANIMATION

Iterate through every element on a page, colouring them in.

Made with

Html
Css/SCSS
Javascript

Author

Chris Smith

Demo

See the Pen Fill Backgrounds with Animation by Chris Smith (@chris22smith)
on CodePen.

5.TRIPLE “A” WALLPAPERS

Made with

Html
Css/SCSS
Javascript

Author

Scott Weaver

Demo

See the Pen Triple “A” Wallpapers (BW&A Challenge, click for new pattern) by Scott Weaver (@sweaver2112)
on CodePen.

6.FIREFLIES

Made with

Html
Css/SCSS
Javascript

Author

Michal

Demo

See the Pen Fireflies by Michal (@Mertl)
on CodePen.

7.BACKGROUND TEXTURE ACROSS SEVERAL DIVS

Display a single background texture across several differently coloured divs.

Made with

Html
Css/SCSS
Javascript

Author

Michael Burridge

Demo

See the Pen Background texture across several divs by Michael Burridge (@mburridge)
on CodePen.

8.RYMD

Move your mouse, or swipe on a touch device, to navigate through the stars.

Made with

Html
Css/SCSS
Javascript

Author

Hakim El Hattab

Demo

See the Pen rymd by Hakim El Hattab (@hakimel)
on CodePen.

9.CRYSTAL PARALLAX

Made with

Html
Css/SCSS
Javascript

Author

Tibix

Demo

See the Pen 💎 Crystal Parallax 💎 by Tibix (@Tibixx)
on CodePen.

10.ANIMATED CSS MASK-IMAGE GRADIENT

Animated CSS mask-image gradient with JavaScript.

Made with

Html
Css/SCSS
Javascript

Author

Chris Neale

Demo

See the Pen Animated CSS mask-image gradient by Chris Neale (@onion2k)
on CodePen.