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
for positioning instead of
, and by optimizing how and when updates and recalculations happen (especially with the application of
). 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);
