{"id":340,"date":"2014-11-27T19:53:38","date_gmt":"2014-11-27T14:53:38","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=340"},"modified":"2018-01-20T05:53:28","modified_gmt":"2018-01-20T00:53:28","slug":"using-particles-js-build-impressive-hero-unit","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/using-particles-js-build-impressive-hero-unit\/","title":{"rendered":"How I Am Using Particles.js to Build an Impressive Hero Unit"},"content":{"rendered":"

Hey folks! It’s been a while since I wrote a piece here. I’ve been very busy with a premium WordPress Framework which I am building from the ground up for about last ten months (which will probably never see the light of the day). While building it, I had to build an impressive hero block or unit whatever you call it nowadays.<\/p>\n

Hero Units#<\/a><\/h2>\n

So, if you don’t already know what is a hero unit\u00a0then here is a simple definition:<\/p>\n

Normally the top most block of a website containing a heading with some description and one or two call to action buttons is what we call a hero unit. I believe this term was coined by people behind the Bootstrap project, but I may be wrong.<\/p><\/blockquote>\n

So, I’m about to complete the framework I was working over for so long and nowadays most my time is being spent at the front-end. I was designing a few if not many hero units for a premium WordPress theme when it hit me that I should create something creative with infinite user interaction. Yes! A hero unit which actually makes you stop doing everything and take a look at it while you interact and get engaged.<\/p>\n<\/section>\n

\n

\"Particles.js<\/a><\/p>\n<\/div>\n

\n

Particles.js<\/a> saved the day. A lightweight JavaScript library for creating particles. All you need to build a particles.js based hero unit is<\/p>\n

    \n
  • A div<\/code>\u00a0element.<\/li>\n
  • Few lines of CSS code.<\/li>\n
  • And obviously the particles.js<\/code> library.<\/li>\n<\/ul>\n

    I went ahead and built a demo of what I am working on, at CodePen. Hope so you guys will like it<\/p>\n<\/section>\n

    \n
    \n

    See the Pen ParticlesJS based Hero Unit<\/a><\/p>\n

     <\/p>\n

    See the Pen ParticlesJS based Hero Unit<\/a> by Ahmad Awais (@ahmadawais<\/a>) on CodePen<\/a>.<\/p>\n