Question

这是我的第一个与视差效果有关的项目。我曾尝试实现视差库，但它们在Mac Safari上无法正常工作，滚动不流畅。所以我试图实现我在google上发现的自定义代码，它比库更好地工作，但是滚动仍然不流畅。 Mac Safari上的主要滚动效果。

注意：-网站是用PHP制作的，单页网站上具有视差和页面滚动上的动画（wow.js）。网站上有大量内容，所有内容都通过“ section”标签实现。因此，页面上几乎有10个不同的“部分”标签，其中包含大约。每个“部分”标签10张图片。页面大小超过45 MB（其中2个视频播放的大小为22 MB）。

尝试过的解决方案：-在所有图像均为PNG格式之前，我将其转换为JPG格式并进行了压缩。所有图像均具有更高的分辨率，其中有些甚至为2500 * 1800。不同“部分”上有四个不同的视差图像，一个“部分”上有一个视差图像。

我正在使用的当前视差脚本：-

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)
    );
}

任何人，请帮助！

使用视差和动画时页面滚动不流畅

0 个答案: