Ahmad Awais

NAVIGATE


SHARE


How I Am Using Particles.js to Build an Impressive Hero Unit

Ahmad AwaisAhmad Awais

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.

Hero Units#

So, if you don’t already know what is a hero unitΒ then here is a simple definition:

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.

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.

Particles.js based hero unit

Particles.js saved the day. A lightweight JavaScript library for creating particles. All you need to build a particles.js based hero unit is

I went ahead and built a demo of what I am working on, at CodePen. Hope so you guys will like it

See the Pen ParticlesJS based Hero Unit

 

See the Pen ParticlesJS based Hero Unit by Ahmad Awais (@ahmadawais) on CodePen.

Peace! ✌️

Founder & CEO at Langbase.com Β· Ex VP DevRel Rapid Β· Google Developers Advisory Board (gDAB) founding member. πŸ§‘β€πŸ’» AI/ML/DevTools Angel Investor ❯ AI/ML Advisory Board member San Francisco, DevNetwork

🎩 Award-winning Open Source Engineer & Dev Advocate 🦊 Google Developers Expert Web DevRel πŸš€ NASA Mars Ingenuity Helicopter mission code contributor πŸ† 8th GitHub Stars Award recipient with 3x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).

🌳 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. πŸ“Ÿ Teaching thousands of developers Node.js CLI Automation (100 videos Β· 22 Projects) & VSCode.pro course. Over 142 Million views, 22 yrs Blogging, 56K developers learning, 200+ FOSS.

✌️ Author of various open-source dev-tools and software libraries utilized by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker with 100+ international talks.

✨ As quoted by: Satya Nadella Β· CEO of Microsoft β€” Awais is an awesome example for developers.
πŸ™Œ Leading developers and publishing technical content for over a decade πŸ’œ Loves his wife (Maedah) ❯ Read more about Ahmad Awais.

πŸ‘‹β€¦ Awais is mostly active on Twitter @MrAhmadAwais

πŸ“¨

Developers Takeaway

Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!

✨ 172,438 Developers Already Subscribed
Comments 9
  • Val
    Posted on

    Val Val

    Reply Author

    Is there a way you can quickly explain or provide me with a resource of how to implement this js library into WordPress?

    Thanks!


    • AhmadAwais
      Posted on

      AhmadAwais AhmadAwais

      Reply Author

      All you have to do is enqueue the js file in WordPress and use it.


      • George
        Posted on

        George George

        Reply Author

        Is there any tutorial to showcase how to? Especially for rookies like us? :D thanks


        • Ahmad Awais
          Posted on

          Ahmad Awais Ahmad Awais

          Reply Author

          This is a tutorial :) Just shift the tabs inside that Codepen editor to read HTML/CSS/JS.


  • Aroosa
    Posted on

    Aroosa Aroosa

    Reply Author

    This is extremely awesome .


  • Tommy
    Posted on

    Tommy Tommy

    Reply Author

    Hi,

    Doesn’t seem to work anymore. Tried changing the source to http://www.jsdelivr.com/#!particles.js but still didn’t see anything other than the header text.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      It needs an update. Looks like CodePen.io updated something at their end. Will look into it. Thanks for reporting!


  • No3x
    Posted on

    No3x No3x

    Reply Author

    I recently wrote a comment but just found the solution for the problem. (Updated github issue) You can delete both comments please. Thank you very much.


  • mattias
    Posted on

    mattias mattias

    Reply Author

    Hi my particles only show when clicked. how can i fix this?
    thanks