The animated items are initially translate up and out of view and then rotated on the X-axis when the item is scrolled into the viewport.
Half way through the animation they slide down with some added perspective to give the illusion of 3D.
The rotation is then returned to 0° at the end of the animation cycle.
Animations can be created using a number of stages inserted in sequence using keyframes.
This animation uses three steps defined at the beginning, middle and end.
Note that as the value for perspective is reduced the items will break out of their container - lower values increase the effect.
A significant percentage of website visitors will suffer from varying degrees of motion sensitivity which is triggered by excessive movement so any animations should be gentle - no whooshing in or wiggling!
Mobile
As a matter of course animations should be turned off for mobile phone users.
1 The float row has an animation not often seen on many websites and provides a change from the usual tightly packed rows which cramp the layout.
The items have an image with a heading, text and an optional wide CTA (call to action) style link.
The animations can all happen at once or be staggered by checking a box to adjust the delay times.
Lazy Loading
Since the item is in view on page load the image lazy loading function is turned off.
2 Adding a clipped text section to the bottom of the cards adds a distinctive appearance to the row which can have 2, 3 or 4 cards
When there are three cards the last one is centered in row two below the breakpoint.
As the clip angle is increased the text can be adjusted upwards by applying a negative top margin to the article element.
Links
When the link option is selected the whole card becomes the the active area and the link icon appears at the top right with a rotate on hover option when viewed on computers.
2 Images for a responsive website must be correctly sized and optimised before importing into EverWeb.
When the image is content width or wider ia smaller image file must be loaded for mobile devices. If the image is not in the viewport on page load it should be lazy loaded.
If an image is configured as a link it must show a link icon for the benefit of visitors using touch devices.
