html - Canvas in header/animation -

i'd use in header: http://forumstyle.us/forumus/transparent-version/

i mean canvas in header hover effect, have no idea is, how build it, script, or css?

thanks!

tldr:

it's using jquery plugin, based on jquery javascript library, manipulates canvas element particle effect.

longer cooler, how figure out on own next time tutorial!

let's talk how deconstruct things on web! (i'm using chrome web browser in walkthrough, other browsers fine same thing, have similar tools built in.)

1. find dom element in question
2. find it's class/id/element name, used in code somewhere 'grab it' , it
3. use name found, in case class header--slider
4. search using chrome's devtools (see https://developers.google.com/web/tools/chrome-devtools/)

5. see var $headersliderel = $('.header--slider'); comes in search. double click on line of code, , we'll see javascript file pop in chrome devtools, , know interaction element has canvas tag in it, begins. more digging...

6. search jparticle object. have feeling kind of javascript library they're pulling in

7. yes! it's kind of jquery plugin referenced on page. they're in format [jquerypluginname].jquery.js. they've pulled library canvas animating them.
8. so know filename. cool thing when in 'sources' panel of chrome devtools can hit ctrl+o on windows or command+o on mac, , gives listing of source files on page, can type name of filename, , autocomplete. start typing filename found, , select or hit enter open file in chrome devtools.

9. we've found it, it's 1 line, , looks gobbly-gook! means file more minified, , uglified. these techniques save filesize, , make javascript files load faster in browser. can click curly braces in lower left-hand corner if want see not on 1 line. however, still minified (sadpanda).

you several things @ point, click in gutter of file, on 1 of line numbers, setting breakpoint, , refresh page , start see how javascript works in wild, stepping through it. can hover on variables, , tell current value. educational.

another option search on google jquery plugin, , @ it's source. looks may have grabbed codepen, looks similar @ least:

https://codepen.io/waddington/pen/nivxh

this using canvas api: https://developer.mozilla.org/en-us/docs/web/api/canvas_api

there other ways animate things on web though. see presentation here (hit right arrow advance): https://program247365.github.io/web-animations/#/