Floating pictures are portions that appear to hover and flow above the internet web page, rising depth and herbal motion without any client interaction. You’ve spotted them on corporate web sites, SaaS landing pages, and portfolio headers—pictures that gradually bob and sway as regardless that suspended in space. The affect transforms static layouts into something that feels alive.
Divi has offered built-in animation controls for years, on the other hand Divi 5 makes this workflow cleaner on account of its rebuilt Visual Builder, advanced function regulate, and flexible design controls. Mixed with a single CSS belongings, Divi’s built-in Animation alternatives can produce blank, secure floating motion directly throughout the builder. No plugins. No JavaScript. Merely Divi’s native apparatus and one line of Custom designed CSS.
This tutorial walks throughout the whole assemble: layout, card styling, animation, staggered timing, and a frosted-glass text treatment that ties the composition together. By the use of the highest, you’ll have a reusable segment that looks polished and works well all through devices.
What We’re Building
Our function is a three-column segment with image enjoying playing cards on a dismal background. Every card has a elegant glass-like treatment—a semi-transparent background, a thin border, and a generous border radius. Inside each card, an image drifts vertically in a slow, secure loop. The essential factor component: each image moves on a novel timeline, combating the rigid, synchronized bobbing that can make animations look mechanical.
To finish the composition, we’ll add oversized heading text above and below the enjoying playing cards using a frosted-glass CSS method that lets the pictures show throughout the letterforms as they flow.
Building The Phase
Get began with a brand spanking new Commonplace Phase. Throughout the Phase, add a Row using a three-column building.
Whilst you started from a larger grid preset, keep very best the three columns you need for the image enjoying playing cards.
Open the Phase settings and set a dismal background color. The dark treatment makes the floating enjoying playing cards pop and gives the segment a modern, dimensional in point of fact really feel. A deep military color (#0f172a) works well, though any dark tone can suit this layout.
Give the Phase generous top and bottom padding (10rem) to isolate it visually from surrounding content material subject matter. This extra space helps the floating motion breathe so the pictures don’t appear cramped towards the segment edges.
Together with The Image Modules
Drop an Image module into each column. Upload or select the pictures you need to use. The images should share a continuing side ratio—it’s absolute best to crop and measurement them forward of uploading them for your internet web page. A vertical or sq. ratio (roughly 4:5 or 1:1) works best for this card layout because it gives the floating motion room to breathe vertically.
For each Image module, in Design > Border, set a border radius to across the corners (17px works well). Lengthen Attributes makes it easy to make use of this all through all image modules.
Right kind-click the Image from the Layers Panel or throughout the Visual Builder to select Extend Attributes
Styling The Enjoying playing cards
The card affect lives on each Column, now not the Image module. Open the Column settings and configure the following:
Underneath Design > Spacing, add similar padding on either side so the image floats throughout the card with some breathing room.
Underneath Design > Background, set a semi-transparent background color. White at very low opacity (3–5%) creates the glass-panel affect towards the dark segment background.
Underneath Design > Border, add a thin border (1px) using white at low opacity (8–10%). This subtle edge helps define the card boundary. Set the border radius to a cost higher than the Image module’s radius to create the inset-frame look, where the image sits inside of of a larger rounded container.
Whilst you finish one column, practice those design settings to the other columns using Extend Attributes or Extend Sorts. The end result’s 3 glass-like enjoying playing cards sitting side by means of side on a dismal field. Even forward of animation, the layout should already look clean and intentional.
Together with The Float Affect
Follow The Base Animation
Select the principle Image module and open its settings. Navigate to Design > Animation and configure the following:
- Animation Style: Slide
- Animation Trail: Bottom
- Animation Period: Spherical 4000ms
- Animation Intensity: Low, spherical 3–5%
- Animation Starting Opacity: 100%
- Animation Repeat: Loop
The ones settings create the elemental vertical motion. A longer length keeps the affect calm and intentional, while a low intensity prevents the image from traveling too a long way throughout the card.
Create A Simple Loop
Now switch to the Difficult tab. Open the Custom designed CSS risk staff and add the following to the Number one Section field:
animation-direction: trade;
That single line makes the animation play forward and then backward on each loop, creating a smoother back-and-forth flow instead of a noticeable reset to start with of every cycle.
Extend the ones Image Design Attributes to the other pictures so that you’ll fine-tune each one in the next step.
Staggering The Motion
Applying identical animation settings to all 3 pictures creates synchronized movement, which normally turns out too uniform. The restore is to supply each image a novel combination of length and prolong.
On the 2d Image module, increase the Animation Period by means of 500–1000ms relative to the principle and set an Animation Extend of 1000–2000ms. On the 1/3 Image module, use a novel Period and Extend so all 3 modules stay offset from one each different.
For reference, proper right here’s one combination that works well:
- Image 1: Period 4000ms, Extend 0ms, Intensity 3%
- Image 2: Period 5500ms, Extend 1500ms, Intensity 2%
- Image 3: Period 3500ms, Extend 800ms, Intensity 3%
You’ll have the ability to regulate the ones values to taste, on the other hand keep enough variation between the modules to avoid a mirrored rhythm.
Going Further With Text
Add Overlapping Headings
The floating pictures artwork upper after they’re anchored by means of text.
Add two Rows—one above and one below the image row—using a single-column building.
In each of those rows, add a Heading Module. Style the principle heading with a color of White (#ffffff) at 10% opacity, a text measurement of 15rem, and a font weight of Extraordinarily Bold.
Create A Frosted-Glass Text Affect
Transfer to the Difficult tab and open the CSS risk staff. In Module Parts > Number one Section, paste in this custom designed CSS:
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -webkit-mask: linear-gradient(#000 0 0) text; mask: linear-gradient(#000 0 0) text; color: rgba(255, 255, 255, 0.1);
This creates a frosted-glass knockout affect—the text turns right into a translucent window that blurs regardless of sits behind it, at the side of the floating pictures as they flow throughout the letterforms.
Extend the design attributes of the principle Heading Module to all Heading Modules throughout the mom or father Phase so the identical settings practice to the heading below.
Position Headings Spherical The Enjoying playing cards
On the top row, in Design > Spacing, set the bottom margin to -8rem. On the bottom row, set the absolute best margin to -8rem.
Then set the bottom Heading Module’s alignment to Left.
In the end, set the absolute best Row’s z-index to 1. This brings the row and its Heading Module above the pictures it overlaps.
Potency Notes
This affect is reasonably lightweight on account of Divi’s animation settings rely on CSS animation, and movement-based effects are normally surroundings pleasant in fashionable browsers. However, potency is determined by the collection of animated portions, image sizes, tool capability, and to any extent further visual effects layered on top.
The floating motion proper right here should perform well normally, on the other hand it’s nevertheless good to stick image report sizes optimized, check out the segment on cellular, and avoid overusing secure animations in every single place the identical internet web page. The blur-based text affect will also be additional no longer simple on some devices and browsers than the image movement itself, so check out that carefully for many who plan to use it prominently.
Get began Building Site With Divi 5 In recent years!
Floating pictures are an excellent example of the way in which Divi 5’s design controls, Animation alternatives, and Custom designed CSS fields can artwork together without third-party dependencies. The built-in Slide animation plus animation-direction: trade; handles the drifting motion, while Custom designed CSS supplies the frosted-glass text treatment. The whole thing stays throughout the builder, which makes the affect easy to reuse and refine.
The post How To Construct A Floating Symbol Animation In Divi 5 appeared first on Chic Topics Weblog.
0 Comments