All Projects → akbansa → particlejs-images-demo

akbansa / particlejs-images-demo

Licence: other
Implementation of Particles.js using custom icon images

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to particlejs-images-demo

Portfolio-Saurav-Mukherjee
Portfolio website build using HTML5, CSS3, JavaScript and jQuery.
Stars: ✭ 48 (+60%)
Mutual labels:  particlejs
Portfolio-Website
Portfolio Website build using HTML5, CSS3, JavaScript and jQuery
Stars: ✭ 109 (+263.33%)
Mutual labels:  particlejs

particles.js

Giphy

A modification of particles.js to use custom icon images as particles.

Usage

Include the particles-img.js file in your project, and add the following code.

index.html

<div id="particles-js"></div>

<script src="particles.js"></script>

Specify image sources in img_src and configure particles.json to tweak settings. app.js

/*Image source array*/
let img_src = ['assets/images/001-interface.png', 'assets/images/002-share.png', 'assets/images/003-key.png','assets/images/004-front.png','assets/images/005-reception.png','assets/images/006-bed.png','assets/images/007-hotel.png','assets/images/008-room.png','assets/images/009-like.png'];


/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].