Brickscore / Elements /
Bubbles
Bubbles
Bubbles
Documentation
Bubbles is a nestable element with 2 additional nestable blocks: Content and Bubbles Wrapper. There's also the possibility to enable a Bubble at the Cursor. All bubbles collide with each other, creating a stunning effect.
Content element must wrap all your content at the Block.
Bubbles Wrapper element contains the Bubble element. You can generate all the bubbles you want and customize them at pleasure.
Style
Width & Height
Determines the Bubbles root element dimensions. 100px and 100vh by default.
Background
Determines the Bubbles root element background. It also supports a gradient background design.
Bubbles blur
Determines the general blur applied to bubbles (including cursor). This is the only shared setting.
The rest of Bubble settings can be set at each Bubble.
Cursor Bubble
Enable Cursor Bubble
If true, a Bubble will be attached to user's cursor, colliding as well with the rest of the bubbles on mousemove.
NOTE*: Cursor Bubble is available at Chrome, Edge, Brave and Opera browsers. Firefox and Safari don't support the cursor animation so it isn't included at them.
Attachment
A value of 1 will attach the Bubble to the cursor without delay. The bigger this value is the bigger the delay.
Bubble Style
You can customize the following Cursor´s Bubble styles: dimensions (width and height), opacity, background and blending.
Bubble element settings
Top & Left
To set the distance regarding Bubbles root element.
Style
You can customize the following Bubble styles: dimensions (width and height), background and blending.
Type
Type will determine the path followed by the bubble at its position. There are 5 Bubble types: Vertical, Horizontal, Rotating--1, Rotating--2 and Rotating--3.
Speed
Determines how fast the Bubble should move through the Bubbles root element. The bigger the slower. 40 by default.
Documentation
Bubbles is a nestable element with 2 additional nestable blocks: Content and Bubbles Wrapper. There's also the possibility to enable a Bubble at the Cursor. All bubbles collide with each other, creating a stunning effect.
Content element must wrap all your content at the Block.
Bubbles Wrapper element contains the Bubble element. You can generate all the bubbles you want and customize them at pleasure.
Style
Width & Height
Determines the Bubbles root element dimensions. 100px and 100vh by default.
Background
Determines the Bubbles root element background. It also supports a gradient background design.
Bubbles blur
Determines the general blur applied to bubbles (including cursor). This is the only shared setting.
The rest of Bubble settings can be set at each Bubble.
Cursor Bubble
Enable Cursor Bubble
If true, a Bubble will be attached to user's cursor, colliding as well with the rest of the bubbles on mousemove.
NOTE*: Cursor Bubble is available at Chrome, Edge, Brave and Opera browsers. Firefox and Safari don't support the cursor animation so it isn't included at them.
Attachment
A value of 1 will attach the Bubble to the cursor without delay. The bigger this value is the bigger the delay.
Bubble Style
You can customize the following Cursor´s Bubble styles: dimensions (width and height), opacity, background and blending.
Bubble element settings
Top & Left
To set the distance regarding Bubbles root element.
Style
You can customize the following Bubble styles: dimensions (width and height), background and blending.
Type
Type will determine the path followed by the bubble at its position. There are 5 Bubble types: Vertical, Horizontal, Rotating--1, Rotating--2 and Rotating--3.
Speed
Determines how fast the Bubble should move through the Bubbles root element. The bigger the slower. 40 by default.
Introduction
Text elementsScroll Reading
Text
Underline Hover
Text
Highlight Hover
Text
Scroll Cascading
Text
Twist Reveal
Text
Letter Launcher
Text
Swap Hover
Text
3D Swap Hover
Text
Typed
Text
Circular Title
Text
Mask Hover
Text
MouseFill Title
Text
Fluid Gradient Title
Infinite Title
Text
Scroll Gradient
Text
Unfold Hover
Text
Counter
Text
Blade Reveal
Text
Inline Images
Text
Unfold Reveal
Text
Scribble Reveal
Text
SVG Reveal
Text
Decode Hover
Text
Decode Reveal
Text
Random Letters
Text
Exchange Title
Text
Blended Hover
Text
Anyside Button
Button
Mask Button
Button
Layer Button
Button
Arrow Button
Button
Crystal Button
Button
Split Button
Button
Ripple Button
Button
Prism Button
Button
Glowing Button
Button
Neumorphic Button
Button
Marquee Button
Button
Microbox Button
Button
Core Burger
Menu
OffCanvas Menu
Menu
Stripe megaMenu
Menu
Multi OffCanvas Menu
Menu
Expanding Menu
Menu
Wrap Menu
Menu
Drawer
Menu
Sticky Header
Menu
Overlay Menu
Menu
Morphing Nav
Menu
Cursor
Core
Smooth Scroll
Core
Custom Scrollbar
Core
Marquee
Core
Grainy
Core
Bubbles
Core
Dark Mode
Core
Tippy
Core
Click & Copy
Core
Flipbox
Core
Media
Core
Spinner
Core
Gradiently
Core
Glowing Card
Core
Observer
Core
Codepen
Core
Motion Divider
Core
Generatorism
Core
Glitchy
Core
Core Tabs
Core
Parallax
Core
Spotlight
Core
Back to Top
Core
Core Slider
Core
Particles
Core
Parallax Hover
Core
Video Sequence
Core
Sharer
Core
Before/After Image
Core
Lottie
Core
Image Reveal
Core
Expanders
Core
Image Hotspots
Core
Zoom Lens
Core
Need assistance?
No spam. Only Brickscore news and showcases
