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 at Langbase.com β The Composable AI Developer platform Β· Ship AI agent pipes Β· Ex VP DevRel Eng. 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 5x 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, 24 yrs Blogging, 108K 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 π @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