How To Construct A Floating Symbol Animation In Divi 5

Floating photographs are parts that seem to hover and go with the flow above the web page, growing intensity and natural movement with none consumer interplay. You’ve noticed them on company websites, SaaS touchdown pages, and portfolio headers—photographs that delicately bob and sway as though suspended in area. The impact transforms static layouts into one thing that feels alive.

Divi has presented integrated animation controls for years, however Divi 5 makes this workflow cleaner because of its rebuilt Visible Builder, progressed characteristic control, and versatile design controls. Blended with a unmarried CSS assets, Divi’s integrated Animation choices can produce clean, steady floating movement at once within the builder. No plugins. No JavaScript. Simply Divi’s local equipment and one line of Customized CSS.

This instructional walks during the complete construct: format, card styling, animation, staggered timing, and a frosted-glass textual content remedy that ties the composition in combination. By way of the top, you’ll have a reusable phase that appears polished and works smartly throughout units.

What We’re Development

Our goal is a three-column phase with symbol playing cards on a depressing background. Each and every card has a refined glass-like remedy—a semi-transparent background, a skinny border, and a beneficiant border radius. Within every card, a picture drifts vertically in a sluggish, steady loop. The important thing element: every symbol strikes on a unique timeline, fighting the inflexible, synchronized bobbing that may make animations glance mechanical.

To complete the composition, we’ll upload outsized heading textual content above and under the playing cards the use of a frosted-glass CSS methodology that shall we the photographs display during the letterforms as they glide.

Development The Segment

Get started with a brand new Common Segment. Within the Segment, upload a Row the use of a three-column construction.

When you began from a bigger grid preset, stay best the 3 columns you want for the picture playing cards.

Open the Segment settings and set a depressing background colour. The darkish remedy makes the floating playing cards pop and provides the phase a contemporary, dimensional really feel. A deep army colour (#0f172a) works smartly, regardless that any darkish tone can swimsuit this format.

Give the Segment beneficiant most sensible and backside padding (10rem) to isolate it visually from surrounding content material. This additional area is helping the floating movement breathe so the photographs don’t seem cramped in opposition to the phase edges.

Including The Symbol Modules

Drop an Symbol module into every column. Add or make a choice the photographs you wish to have to make use of. The pictures will have to proportion a constant facet ratio—it’s highest to crop and dimension them ahead of importing them in your web page. A vertical or sq. ratio (kind of 4:5 or 1:1) works very best for this card format as it offers the floating movement room to respire vertically.

For every Symbol module, in Design > Border, set a border radius to around the corners (17px works smartly). Lengthen Attributes makes it simple to use this throughout all symbol modules.

Styling The Playing cards

The cardboard impact lives on every Column, no longer the Symbol module. Open the Column settings and configure the next:

Beneath Design > Spacing, upload equivalent padding on both sides so the picture floats within the card with some respiring room.

Beneath Design > Background, set a semi-transparent background colour. White at very low opacity (3–5%) creates the glass-panel impact in opposition to the darkish phase background.

Beneath Design > Border, upload a skinny border (1px) the use of white at low opacity (8–10%). This refined edge is helping outline the cardboard boundary. Set the border radius to a price better than the Symbol module’s radius to create the inset-frame glance, the place the picture sits inside of a bigger rounded container.

When you end one column, observe the ones design settings to the opposite columns the use of Lengthen Attributes or Lengthen Kinds. The result’s 3 glass-like playing cards sitting facet by way of facet on a depressing box. Even ahead of animation, the format will have to already glance blank and intentional.

Including The Waft Impact

Observe The Base Animation

Choose the primary Symbol module and open its settings. Navigate to Design > Animation and configure the next:

• Animation Taste: Slide
• Animation Path: Backside
• Animation Length: Round 4000ms
• Animation Depth: Low, round 3–5%
• Animation Beginning Opacity: 100%
• Animation Repeat: Loop

Those settings create the fundamental vertical movement. An extended period helps to keep the impact calm and intentional, whilst a low depth prevents the picture from touring too some distance within the card.

Create A Easy Loop

Now transfer to the Complicated tab. Open the Customized CSS possibility workforce and upload the next to the Primary Part box:

animation-direction: exchange;

That unmarried line makes the animation play ahead after which backward on every loop, making a smoother back-and-forth go with the flow as an alternative of a noticeable reset initially of each cycle.

Lengthen those Symbol Design Attributes to the opposite photographs so you’ll fine-tune every one in the next move.

Staggering The Movement

Making use of similar animation settings to all 3 photographs creates synchronized motion, which generally seems too uniform. The repair is to offer every symbol a unique aggregate of period and extend.

At the 2nd Symbol module, building up the Animation Length by way of 500–1000ms relative to the primary and set an Animation Prolong of 1000–2000ms. At the 1/3 Symbol module, use a unique Length and Prolong so all 3 modules keep offset from one every other.

For reference, right here’s one aggregate that works smartly:

• Symbol 1: Length 4000ms, Prolong 0ms, Depth 3%
• Symbol 2: Length 5500ms, Prolong 1500ms, Depth 2%
• Symbol 3: Length 3500ms, Prolong 800ms, Depth 3%

You’ll be able to alter those values to style, however stay sufficient variation between the modules to keep away from a reflected rhythm.

Going Additional With Textual content

Upload Overlapping Headings

The floating photographs paintings higher when they’re anchored by way of textual content.

Upload two Rows—one above and one under the picture row—the use of a single-column construction.

In every of the ones rows, upload a Heading Module. Taste the primary heading with a colour of White (#ffffff) at 10% opacity, a textual content dimension of 15rem, and a font weight of Extremely Daring.

Create A Frosted-Glass Textual content Impact

Move to the Complicated tab and open the CSS possibility workforce. In Module Components > Primary Part, paste on this customized CSS:

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
-webkit-mask: linear-gradient(#000 0 0) textual content;
masks: linear-gradient(#000 0 0) textual content;
colour: rgba(255, 255, 255, 0.1);

This creates a frosted-glass knockout impact—the textual content turns into a translucent window that blurs no matter sits in the back of it, together with the floating photographs as they go with the flow during the letterforms.

Lengthen the design attributes of the primary Heading Module to all Heading Modules within the mother or father Segment so the similar settings observe to the heading under.

Place Headings Round The Playing cards

At the most sensible row, in Design > Spacing, set the ground margin to -8rem. At the backside row, set the highest margin to -8rem.

Then set the ground Heading Module’s alignment to Left.

In spite of everything, set the highest Row’s z-index to 1. This brings the row and its Heading Module above the photographs it overlaps.

Efficiency Notes

This impact is fairly light-weight as a result of Divi’s animation settings depend on CSS animation, and movement-based results are in most cases environment friendly in trendy browsers. Nonetheless, efficiency is dependent upon the choice of animated parts, symbol sizes, instrument capacity, and any further visible results layered on most sensible.

The floating movement right here will have to carry out smartly typically, however it’s nonetheless sensible to stay symbol document sizes optimized, take a look at the phase on cell, and keep away from overusing steady animations all over the similar web page. The blur-based textual content impact can be extra not easy on some units and browsers than the picture motion itself, so take a look at that sparsely for those who plan to make use of it prominently.

Get started Development Website online With Divi 5 Lately!

Floating photographs are a perfect instance of the way Divi 5’s design controls, Animation choices, and Customized CSS fields can paintings in combination with out third-party dependencies. The integrated Slide animation plus animation-direction: exchange; handles the drifting movement, whilst Customized CSS provides the frosted-glass textual content remedy. The whole lot remains within the builder, which makes the impact simple to reuse and refine.

The submit How To Construct A Floating Symbol Animation In Divi 5 gave the impression first on Chic Topics Weblog.

WordPress Web Design

[ continue ]