UIkit 3.12 – Sticky Parallax and Lazy Loading Images

  • Sascha
  • UIkit

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.

Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.

Parallax Component

To give you more control over the duration of the parallax animation, we added new start and 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 vh, % and px. The % unit relates to the element's height. Both options allow basic mathematics operands, + and -. 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.

Sticky Component

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 top, bottom and 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.

Sticky Parallax

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.

Simply WOW, right? All these effects are built without custom JavaScript, just pure UIkit.

Utilities

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.

Image

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 width and 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 srcset, media and type parameters to fully emulate all the features of the <picture> element.

<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.

IE11 Support

Since Microsoft will retire Internet Explorer 11 in June 2022, we have decided to drop IE 11 support for UIkit as well. This allows us to leverage the latest web technologies meaning all the ECMAScript 2015 features like Promises, Classes, Arrow Functions and more. And of course this results in smaller CSS and JavaScript file size.

Migration to UIkit 3.12

There are some small breaking changes for the Image and Parallax components, so please take a look at the migration guide. For further release discussions or to report issues, visit our Discord chat.

What's Next

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.

Related

Comments (20)

YOOtheme Pro is the most powerful Joomla and WordPress theme and page builder. It offers developers and designers everything they need to create business, ecommerce, blog, and personal websites visually.

By providing your email, you agree to our Privacy Policy.

Copyright © YOOtheme. All rights reserved.