Ahmad 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.
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 saved the day. A lightweight JavaScript library for creating particles. All you need to build a particles.js based hero unit is
div element.particles.js library.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 of ⌘ Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory · Creator of Command.new.
"Awais is an awesome example for developers" — Satya Nadella, CEO of Microsoft.
NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel.
Ex VP Eng (DevTools & DevRel) Rapid · Google Developers Advisory Board (gDAB) founding member · AI/ML/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) ❯ AI/ML Advisory Board San Francisco, DevNetwork.
Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli.
❯ Read more about Ahmad Awais or come say hi on 𝕏 @MrAhmadAwais.
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!
Is there a way you can quickly explain or provide me with a resource of how to implement this js library into WordPress?
Thanks!
All you have to do is enqueue the js file in WordPress and use it.
Is there any tutorial to showcase how to? Especially for rookies like us? :D thanks
This is a tutorial :) Just shift the tabs inside that Codepen editor to read HTML/CSS/JS.
This is extremely awesome .
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.
It needs an update. Looks like CodePen.io updated something at their end. Will look into it. Thanks for reporting!
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.
Hi my particles only show when clicked. how can i fix this?
thanks
Mentions