Created
August 31, 2018 18:29
-
-
Save Edwardtonnn/5fa8b3d2f845a699ea2cd73cc3293ed6 to your computer and use it in GitHub Desktop.
Loading Particles.js on WP website
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//Particles JS | |
add_action('wp_enqueue_scripts', 'load_particles', 5); | |
function load_particles(){ | |
// Particles JS | |
wp_enqueue_script( | |
'particles', | |
get_stylesheet_directory_uri() . '/js/particles.js', | |
array('jquery'), | |
false, | |
'all' | |
); | |
// Particles JS | |
wp_enqueue_script( | |
'particles-init', | |
get_stylesheet_directory_uri() . '/js/particles-init.js', | |
array('jquery'), | |
false, | |
'all' | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Wordpress Home page --> | |
<div class="container"> | |
<canvas id="particles-js"> | |
</canvas> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($) { | |
$(document).ready( | |
function() { | |
$("#particles-js").load("particles-js", { | |
"particles": { | |
"number": { | |
"value": 160, | |
"density": { | |
"enable": true, | |
"value_area": 800 | |
} | |
}, | |
"color": { | |
"value": "#ffffff" | |
}, | |
"shape": { | |
"type": "circle", | |
"stroke": { | |
"width": 0, | |
"color": "#000000" | |
}, | |
"polygon": { | |
"nb_sides": 5 | |
}, | |
"image": { | |
"src": "img/github.svg", | |
"width": 100, | |
"height": 100 | |
} | |
}, | |
"opacity": { | |
"value": 1, | |
"random": true, | |
"anim": { | |
"enable": true, | |
"speed": 1, | |
"opacity_min": 0, | |
"sync": false | |
} | |
}, | |
"size": { | |
"value": 3, | |
"random": true, | |
"anim": { | |
"enable": false, | |
"speed": 4, | |
"size_min": 0.3, | |
"sync": false | |
} | |
}, | |
"line_linked": { | |
"enable": false, | |
"distance": 150, | |
"color": "#ffffff", | |
"opacity": 0.4, | |
"width": 1 | |
}, | |
"move": { | |
"enable": true, | |
"speed": 1, | |
"direction": "none", | |
"random": true, | |
"straight": false, | |
"out_mode": "out", | |
"bounce": false, | |
"attract": { | |
"enable": false, | |
"rotateX": 600, | |
"rotateY": 600 | |
} | |
} | |
}, | |
"interactivity": { | |
"detect_on": "window", | |
"events": { | |
"onhover": { | |
"enable": false, | |
"mode": "grab" | |
}, | |
"onclick": { | |
"enable": true, | |
"mode": "push" | |
}, | |
"resize": true | |
}, | |
"modes": { | |
"grab": { | |
"distance": 400, | |
"line_linked": { | |
"opacity": 1 | |
} | |
}, | |
"bubble": { | |
"distance": 250, | |
"size": 0, | |
"duration": 2, | |
"opacity": 0, | |
"speed": 3 | |
}, | |
"repulse": { | |
"distance": 400, | |
"duration": 0.4 | |
}, | |
"push": { | |
"particles_nb": 4 | |
}, | |
"remove": { | |
"particles_nb": 2 | |
} | |
} | |
}, | |
"retina_detect": true | |
}); | |
} | |
); | |
})( jQuery ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
canvas { | |
display: block; | |
} | |
#particles-js { | |
width: 100%; | |
height: 100vh; | |
background:lightblue; | |
position: fixed; | |
top: 0; | |
left: 0; | |
z-index: -50; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).ready( | |
function() { | |
particlesJS("particles-js", { | |
"particles": { | |
"number": { | |
"value": 160, | |
"density": { | |
"enable": true, | |
"value_area": 800 | |
} | |
}, | |
"color": { | |
"value": "#ffffff" | |
}, | |
"shape": { | |
"type": "circle", | |
"stroke": { | |
"width": 0, | |
"color": "#000000" | |
}, | |
"polygon": { | |
"nb_sides": 5 | |
}, | |
"image": { | |
"src": "img/github.svg", | |
"width": 100, | |
"height": 100 | |
} | |
}, | |
"opacity": { | |
"value": 1, | |
"random": true, | |
"anim": { | |
"enable": true, | |
"speed": 1, | |
"opacity_min": 0, | |
"sync": false | |
} | |
}, | |
"size": { | |
"value": 3, | |
"random": true, | |
"anim": { | |
"enable": false, | |
"speed": 4, | |
"size_min": 0.3, | |
"sync": false | |
} | |
}, | |
"line_linked": { | |
"enable": false, | |
"distance": 150, | |
"color": "#ffffff", | |
"opacity": 0.4, | |
"width": 1 | |
}, | |
"move": { | |
"enable": true, | |
"speed": 1, | |
"direction": "none", | |
"random": true, | |
"straight": false, | |
"out_mode": "out", | |
"bounce": false, | |
"attract": { | |
"enable": false, | |
"rotateX": 600, | |
"rotateY": 600 | |
} | |
} | |
}, | |
"interactivity": { | |
"detect_on": "window", | |
"events": { | |
"onhover": { | |
"enable": false, | |
"mode": "grab" | |
}, | |
"onclick": { | |
"enable": true, | |
"mode": "push" | |
}, | |
"resize": true | |
}, | |
"modes": { | |
"grab": { | |
"distance": 400, | |
"line_linked": { | |
"opacity": 1 | |
} | |
}, | |
"bubble": { | |
"distance": 250, | |
"size": 0, | |
"duration": 2, | |
"opacity": 0, | |
"speed": 3 | |
}, | |
"repulse": { | |
"distance": 400, | |
"duration": 0.4 | |
}, | |
"push": { | |
"particles_nb": 4 | |
}, | |
"remove": { | |
"particles_nb": 2 | |
} | |
} | |
}, | |
"retina_detect": true | |
}); | |
} | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment