JavaScript Background Effects

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

1.FLOW FIELD N.2

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
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

1
2
3
Html
Css/SCSS
Javascript

Author

1
Simon Goellner

Demo

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


3.METABALLS - WEBGL

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
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

1
2
3
Html
Css/SCSS
Javascript

Author

1
Chris Smith

Demo

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


5.TRIPLE “A” WALLPAPERS

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
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

1
2
3
Html
Css/SCSS
Javascript

Author

1
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

1
2
3
Html
Css/SCSS
Javascript

Author

1
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

1
2
3
Html
Css/SCSS
Javascript

Author

1
Hakim El Hattab

Demo

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


9.CRYSTAL PARALLAX

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
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

1
2
3
Html
Css/SCSS
Javascript

Author

1
Chris Neale

Demo

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