Particles tutorial.
for those of you who have visited the ‘particles’ code/demo by vincent garreau and tried to install it on your theme without success...
i’ve noticed that most people seem to miss out the extra .js references, or don’t include the html... just picking up the code from the demo site WILL NOT WORK! so this tutorial has all of the code you need.
here is a FULL tutorial explaining how to install it onto your tumblr theme.
you WILL need an understanding of basic coding and css/html for this one. it’s not as straight forward as copy/pasting directly from the demo site/github or the codepen demo.
firstly - from the demo page, i suggest you follow the link to his demo site and download the full file pack from there - YOU WILL NEED THIS. i also recommend visiting the ‘github’ page as there are complete instructions on there.
please note -
1. you will not only need the adjusted particle code from the demo site, but you will have to load additional things into your theme.
2. because this code is contained in a ‘header’ block it’s only suitable to be applied to either ‘sections’ of your theme or within a ‘contained’ one page ( no scroll ) area.
3. if you copy the code directly from this tutorial - it won’t work as tumblr will not transpose all of the single and double quotation marks properly. you can either retype them by hand, or paste into something like notepad and replace all of the quotation marks before pasting into your theme
installing the full javascript;
in the metadata area of your theme ( above <style type="text/css"> ) you need to have FOUR javascript references.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/particles.js"</script>
<script src="/particles.min.js"</script>
<script src="/app.js"></script>
these are the javascript sections from the filepack download. where it says ‘/particles.js’ etc. you will need to use the theme asset uploader to add in the files and replace with the new url to the code.
before the </body> tag at the bottom of your code, you will need to add in an additional TWO sections of script. this is where you edit the colour of the dots/lines/speed etc. THIS is the part you can pick up from the demo site with the particular styles you want.
<script> var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);</script>
<script> particlesJS("particles-js", { "particles": { "number": { "value": 120, "density": { "enable": true, "value_area": 600 } }, "color": { "value": "#cecece" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#cecece" }, "polygon": { "nb_sides": 5 }, }, "opacity": { "value": 0.8, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.3, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#cecece", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true });</script>
installing the css & html
you will need to install and adjust the following css;
#particles-js { position: relative; width: 100%; height: 400px; background-color: #fff; background-image: url("YOUR BACKGROUND URL"); background-repeat: no-repeat; background-position: top left; background-attachment:fixed; }
please note - the particles demo works on a ‘header’ class so you need to include this in your html -
<header> <div id="particles-js"></div> </header>
in addition -
you will need to define the css for your ‘header’ class. this is something you will need to do depending on where you want your particles to appear, whether in a header or a sidebar or for a container theme background. e.g.
header { position:absolute; width:100%; margin:0px auto 0px auto; height:400px; }
please note - this is the part where you need some coding knowledge - my ‘header’ css has the same dimensions as my ‘particles’ css. if you want this to be your sidebar, then code your sidebar with a css class of ‘header’ ( change the naming convention or YOUR css, not the name of ‘header’ ). if you want a fullscreen background ( again, only works on a SINGLE contained screen with no scroll, i.e. contained themes ) - you can use 100% for width and 100% for height, but you will have to decide where to end the ‘div’ for the header depending on what you are using it for...
as a caution, this will slow down your page loading vastly. so using it in one section is probably preferred and visitors to your page will thank you for it...
...if this helped, a like or reblog is always appreciated!
thank you <3