UIkit 3.12 – Sticky Parallax and Lazy Loading Images
The first UIkit release in 2022 is huge. We have refined the Sticky and Parallax components so that now you can create stunning sticky parallax effects out of the box. Additionally, we completely refactored the Image component and improved it with new features. And we finally dropped the IE 11 support. Let's jump right in.
To give you more control over the duration of the parallax animation, we added new
end options to the Parallax component. By default, the animation starts when the top border of the element enters the viewport, and ends when its bottom border leaves the viewport.
The new options allow you to offset these start and end points. Values can be set in any dimension units, namely
% unit relates to the element's height. Both options allow basic mathematics operands,
-. In this example,
start: 100% + 50; end: 100% + 50, the animation will start 50px after 100% of the element's height enters the viewport, and it ends 50px before the element reaches the viewport's bottom border.
For even more control, animation stops can have a second value in percent for the position. This is very similar to the CSS linear gradient syntax. In this example,
x: 0, -30vw 40%, 30vw 60%, 0, the animation starts on its initial position, moves to the left till it's at 40% of its duration, then quickly moves to the right till it is at 60%, and finally moves back to its initial position.
Additionally, we also cleaned up the component and fixed some edge cases.
Next, the Sticky component can now handle oversized content much better. Till now, content larger than the viewport could not be sticky. Now oversized content will scroll down and stick to the bottom of the viewport. But if you change the scroll direction, the sticky content will immediately scroll up and stick to the top of the viewport.
Have you noticed? Elements can now also stick to the bottom of the viewport, for example a cookie banner. We added a new
position option with
auto values to define the sticky behavior. If you set the value to
auto, the element will stick to the top of the viewport, but if its content is larger than the viewport, it will stick to the bottom of the viewport.
Additionally, just like with the Parallax component, we also added support for basic math operands for the sticky
offset option. And again, there are even more fixes and smaller improvements for the Sticky component.
Now to the most interesting part. If you combine the Sticky and Parallax components, you can achieve some stunning sticky parallax effects directly in UIkit.
To grasp how the following effects work, let me first explain the basic concept behind sticky parallax effects. First of all we have a container which is multiple viewports high. This will define the duration of the parallax animation. Within this container we have a sticky container which has the height of one viewport. It, in turn, contains the actual content with the parallax animations. As a result, the content will not scroll out of the viewport, but instead it will have the parallax animation while you are scrolling.
Now let's see it in action. We have created a dedicated showcase in the UIkit tests for the Sticky Parallax.
In order to achieve the sticky parallax effects without any custom CSS, we have added some new utility classes to UIkit. There is a class to set a negative z-index, classes for object fit and position as well as new height viewport classes.
But that's not all, UIkit 3.12 also comes with a big update for the Image component. Since all modern browsers support lazy loading images, and Safari 15.4 is on its way to join them, we deprecated the
uk-img attribute for
<img> element. Instead, you should use the native
loading="lazy" attribute. This also means that we no longer add an empty placeholder image so that now image elements need
height attributes to prevent layout shifts. So what is the Image component for? It brings all the features from image elements like lazy loading and responsive images to background images. In this release, we added even more features.
In addition to lazy loading, background images can also have the
loading="eager" attribute to avoid lazy loading in the first visible viewport.
<div data-src="" uk-img="loading: eager">...</div>
We already support responsive images with the
srcset attribute for background images, and now we've added the
sources option with
type parameters to fully emulate all the features of the
<div sources="srcset: ____; media: ____" data-src="" uk-img>...</div> <div sources="srcset: ____; type: ____" data-src="" uk-img>...</div>
For example, this feature allows you to offer alternative image formats like WebP and AVIF for background images.
So the Image component got heavily refactored and also it no longer relies on session storage to check for cached images.
By the way, other components now also support the
loading="lazy" attribute. The SVG component will inject inline SVGs as they enter the viewport. And Slideshow and Slider components will automatically remove the
loading="lazy" attribute from adjacent slides, so they will be immediately displayed.
Migration to UIkit 3.12
UIkit 3.12 allows you to create stunning sticky parallax effects with ease, and it completely modernizes the Image component.
As you all know we are eagerly waiting to start working on UIkit 4, which is only one YOOtheme Pro release away. Fingers crossed 🤞
And now, go ahead and try out those animations yourself. As always, we are looking for your feedback, so let us know what you think about this release in the comments below.