Прокрутка страницы не плавная при использовании параллакса и анимации - PullRequest
Новая
       32

Прокрутка страницы не плавная при использовании параллакса и анимации

2 голосов
/ 11 июня 2019

Это мой первый проект, связанный с эффектами параллакса. Я пытался реализовать библиотеки параллакса, но они не работают должным образом на Mac Safari, прокрутка не гладкая. Поэтому я попытался реализовать пользовательский код, который я нашел в Google, и он работает лучше, чем библиотеки, но прокрутка по-прежнему не гладкая. Основной эффект прокрутки на Mac Safari.

Примечание: - Сайт выполнен на PHP, одностраничный сайт с параллаксом и анимацией (wow.js) при прокрутке страницы. На сайте большой контент, все изображения в тегах "section". Таким образом, на странице есть почти 10 различных тегов «section», содержащих ок. 10 изображений в теге "section". Размер страницы более 45 МБ (при воспроизведении 2 видео размером 22 МБ).

Пробное решение: - До этого все изображения были в формате PNG, затем я преобразовал их в формат JPG и также сжал их. Все изображения имеют более высокое разрешение, некоторые из них даже 2500 * 1800. Четыре разных изображения параллакса на разных «сечениях», одно изображение параллакса на одном «сечении».

Текущий скрипт Parallax, который я использую: - 

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

Любой, пожалуйста, помогите!

...