Breakdance4fun Logo

Category: Tutorials

How to add sparkles to your text

Where sparkles dance and web designs breakdance Sparkly Text is a lightweight web component allowing developers to integrate eye-catching animated sparkles, making any text element shine. Customize the count, size,…
Read more

Animated Shape Dividers on Scroll

With a few lines of code, magically done with GSAP , we can easily animate the shape dividers, which can make a pretty cool effect, especially for a hero section.…
Read more

How to create a dark mode toggle in Breakdance

The CSS prefers-color-scheme media query is utilized to identify a user's color scheme preference, allowing for automatic switching between light and dark modes. Additionally, user preferences can be retained using…
Read more

How to add a Glitch effect with PowerGlitch

With the PowerGlitch JS library, it's simple to incorporate a glitch effect into any breakdance element. The effect can be activated automatically, on hover or click. PowerGlitch A tiny library…
Read more

How to install Font-Awesome 6

Breakdance includes Font-Awesome v5 in his Icon Library. Which contains +1150 icons.Font-Awesome v6 has 340 new icons, so if you wish to install this new version, here is how to…
Read more

Adding a ‘Month’ Condition

This snippet will add a new Month condition, in the Date & Time section: add_action("breakdance_register_template_types_and_conditions", function () { \Breakdance\ConditionsAPI\register([ "supports" => ["element_display", "templating"], "slug" => "bd-month-condition", // MUST BE UNIQUE…
Read more

Polylang condition in Breakdance

The original idea is from Alexander Buzmakov, with his version for Oxygen.Here is now a version for Breakdance. This snippet will add a new condition, called Locale: And then you…
Read more