Cumulative Layout shift

C-My
Offline Topic Author
New Member
Posts: 5
Thanks: 0

Replied by C-My on topic Cumulative Layout shift

Posted 2 weeks 1 day 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.

C-My
Offline Topic Author
New Member
Posts: 5
Thanks: 0

Replied by C-My on topic Cumulative Layout shift

Posted 2 weeks 1 day 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.609 seconds