Cumulative Layout shift

Replied by C-My on topic Cumulative Layout shift

Posted 1 month 6 days ago #71678
Well, all I did was make your demo taller and it causes a CLS. 

I'm working through customparallaxCK.js to solve it. While I'm there I'm also making changes to properly allow responsive layouts. different offsets and different speed settings for user defined media breaks. I'm also going to allow assigning different images to layers based on the viewport. 

This will mean below the main layer selector there will be an "add viewport" button that allows for different settings. 

I'm also making the module fully compatible with J5 without using the compatibility plugin.

Lastly, I'm allowing for horizontal scroll of layers 

I'll let you have my version when done. 
by C-My

Please Log in or Create an account to join the conversation.

Replied by C-My on topic Cumulative Layout shift

Posted 1 month 6 days ago #71679
OK, this is a first draft after a couple of hours messing. This new customparallaxck.js eliminates the CLS even when the module is set much taller by switching to using
Code:
transform
for positioning instead of
Code:
top
, and by optimizing how and when updates and recalculations happen (especially with the application of
Code:
MutationObserver
). I have eliminated the CLS so far.

The offsety and speedfactor will need updating in any existing module as they're now calculated in a different way. 

I will continue with working to improve it as mentioned.
Code:
(function($) {     var Customparallaxck = function(container, options) {         // Default settings         var defaults = {             outerHeight: true,             modHeight: '100vh', // Default minimum height             responsiveFont: false,             resizeFactorText: 1         };         // Merge user-provided options with defaults         var opts = $.extend(defaults, options);         var $wrap = $(container);         var $window = $(window);         // Helper function to get height based on options         function getHeight(jqo) {             return opts.outerHeight ? jqo.outerHeight(true) : jqo.height();         }         // Main function to update parallax position         function update() {             var pos = $window.scrollTop();             var top = $wrap.offset().top;             $wrap.find('.customparallaxck').each(function() {                 var $layer = $(this);                 var speedFactor = parseFloat($layer.attr('data-speedfactor'));                 var offsety = parseInt($layer.attr('data-offsety'), 10);                 var bgy = ((top - pos) * speedFactor) + offsety;                 $layer.css('transform', `translate3d(0, ${bgy}px, 0)`);             });         }         // Resize handling         function resize() {             if (opts.modHeight.indexOf('%') !== -1) {                 $wrap.css('min-height', ($wrap.width() * parseFloat(opts.modHeight) / 100) + 'px');             }             if (opts.responsiveFont) {                 $wrap.css('font-size', ($wrap.width() / 1000 * parseFloat(opts.resizeFactorText)) + 'em');             }             update();         }         // MutationObserver to watch attribute changes         function observeParallaxChanges() {             var observer = new MutationObserver(function(mutations) {                 mutations.forEach(function(mutation) {                     if (mutation.type === 'attributes' && (mutation.attributeName === 'data-speedfactor' || mutation.attributeName === 'data-offsety')) {                         update(); // Reapply transformations when data attributes change                     }                 });             });             var config = { attributes: true, childList: false, characterData: false };             $('.customparallaxck').each(function() {                 observer.observe(this, config); // Attach observer to each parallax layer             });         }         // Initialize observers and event handlers         $window.on('scroll', update).resize(resize);         resize(); // Initial setup to configure styles based on current viewport         update(); // Initial position adjustment         observeParallaxChanges(); // Start observing changes     };     window.Customparallaxck = Customparallaxck; })(jQuery);
by C-My

Please Log in or Create an account to join the conversation.

Time to create page: 0.706 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 605 guests and no members online