2

This is my first project related with Parallax effects. I have tried to implement parallax libraries but they are not working properly on mac safari, scrolling is not smooth. So i tried to implement custom code which i found on google and its working better than libraries but still scrolling is not smooth. Major scroll effect on mac safari.

Note:- Website is made in PHP, single page website with parallax and animations (wow.js) on page scroll. There are large content on the website, all are images implemented into "section" tags. So there are almost 10 different "section" tags on the page, contains approx. 10 images per "section" tag. Page size is more than 45 MB (with 2 videos playing of 22 MB in size).

Tried solution:- Before that all the images was in PNG format, then i had converted them to JPG format and compressed them also. All images are in higher resolution, out of them some are even 2500*1800. Four different parallax images on different "sections", one parallax image on one "section".

Current Parallax script i am using:-

var scrolled = $(window).scrollTop()
$('.parallax').each(function(index) {
    var imageSrc = $(this).data('image-src')
    var imageHeight = $(this).data('height')
    $(this).css('background-image','url(' + imageSrc + ')')
    $(this).css('height', imageHeight)
    var initY = $(this).offset().top
    var height = $(this).height()
    var diff = scrolled - initY
    var ratio = Math.round((diff / height) * 100)
    $(this).css('background-position','center ' + parseInt(-(ratio * 1.5)) + 'px')
})

$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    $('.parallax').each(function(index, element) {
        var initY = $(this).offset().top;
        var height = $(this).height();
        var endY  = initY + $(this).height();
        var visible = isInViewport(this);
        if(visible) {
            var diff = scrolled - initY;
            var ratio = Math.round((diff / height) * 100);
            $(this).css('background-position','center ' + parseInt(-(ratio * 1.5)) + 'px');
        }
    });
});

function isInViewport(node) {
    var rect = node.getBoundingClientRect();
    return (
        (rect.height > 0 || rect.width > 0) &&
        rect.bottom >= 0 &&
        rect.right >= 0 &&
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

Anyone, please help!

M.Bains
  • 395
  • 1
  • 2
  • 14
  • Have you tried Jarallax? https://github.com/nk-o/jarallax – benJ Jun 11 '19 at 16:17
  • @benJ thanks for reply. Not yet, let me try this one. – M.Bains Jun 12 '19 at 05:08
  • this is also not smooth when using with "wow.js" animations on rest images. – M.Bains Jun 12 '19 at 08:06
  • Yes, I've also tried animating parallax images in this way, without much success. I've normally just settling on a `fadeIn` animation, which works fine. Safari has these scroll issues because Macs seem to generate many more scroll events than other platforms, which you would need to try and compensate for in your code – benJ Jun 12 '19 at 08:31
  • @benJ I have followed many links to normalize the mouse wheel, but nothing helped in me. Please check below links for reference:- https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js http://jsfiddle.net/uNeBr/ https://github.com/d4nyll/lethargy Can you please help! – M.Bains Jun 12 '19 at 10:11

0 Answers0