23rd Apr '23
/
0 comments

tsParticles in Bricks

Updated on 5 Aug 2023

This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as background for a section in Bricks.

Step 1

Edit the Page set as your site's homepage (at Settings → Reading) with Bricks. This is a static Page that is typically titled "Home".

Copy and paste the sample Section using the JSON link given below.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:
Bricks
JavaScript
Pro

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 630 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Bricks Query Loop Cards with Hover Image

Bricks Query Loop Cards with Hover Image

How images uploaded to posts can appear when the featured images in a Bricks posts query loop are hovered.
Read more →
Categories: Bricks, Plugins, Pro
Tags: Hover Image
How to create filters with IsotopeJS in Bricks (Part 1)

How to create filters with IsotopeJS in Bricks (Part 1)

This tutorial series will explore the IsotopeJS library's features inside the Bricks ecosystem.
Read more →
Categories: Bricks, Free
Tags: Filters, Isotope
Pro
Responsive iframes in Bricks

Responsive iframes in Bricks

This Pro tutorial provides the steps to add responsive iFrames in Bricks. Step 1 Edit your Page/Template with Bricks. Add a Code element having this…
Read more →
Categories: Bricks, Pro
Tags: iframes
Setting Active Tab in Bricks’ Tabs (Nestable) Element

Setting Active Tab in Bricks’ Tabs (Nestable) Element

With Bricks' Nestable tab element, here's how we can set which tab is active by default.
Read more →
Categories: Bricks, Free
Tags: JavaScript, Tabs
How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

This tutorial will explain how to enable the AJAX filter with an infinite scroll query loop container, how to add a sorting function, how to…
Read more →
Categories: Bricks, Free
Tags: Filters, Isotope, Query Loop
How to change the text of an element based on breakpoints without creating duplicated content

How to change the text of an element based on breakpoints without creating duplicated content

In this tutorial, we'll learn how to dynamically change the text of a basic text element based on the viewport width in Bricks. Introduction Sometimes…
Read more →
Categories: Bricks, Free
Tags: JavaScript
Pro
Filtering Masonry-layout Posts by Categories in Bricks using Isotope

Filtering Masonry-layout Posts by Categories in Bricks using Isotope

Step by step on how to use Isotope in Bricks for filtering posts by categories.
Read more →
Categories: Bricks, Pro
Tags: Isotope, Masonry
Pro
Stripe’s Animated Gradient in Bricks

Stripe’s Animated Gradient in Bricks

This Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by…
Read more →
Categories: Bricks, Pro
Tags: Animations
Pro
Team Member Photos Stack with Hover Tooltips in Bricks

Team Member Photos Stack with Hover Tooltips in Bricks

Herman Baiatian shared in the Bricks Facebook group here that he worked on overlapping team member headshots showing info in hover tooltips. I recreated it…
Read more →
Categories: Bricks, Plugins, Pro
Tags: UI Pattern