2

这是我第一个与视差效果相关的项目。我试图实现视差库，但它们在 mac safari 上无法正常工作，滚动不流畅。所以我尝试实现我在谷歌上找到的自定义代码，它比库工作得更好，但滚动仍然不流畅。mac safari 上的主要滚动效果。

注意：- 网站是用 PHP 制作的，页面滚动时带有视差和动画 (wow.js) 的单页网站。网站上的内容很大，都是用“section”标签实现的图片。所以页面上有近 10 个不同的“部分”标签，包含大约 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)
    );
}

任何人，请帮助！

4

0 回答 0