Параллакс Джиттер на Площади Squarespace - PullRequest
Новая
       43

Параллакс Джиттер на Площади Squarespace

1 голос
/ 09 мая 2019

Я знаю, что это не типичная проблема кодирования StackOverflow, но я хотел получить некоторое представление о том, как исправить дрожание, пробелы над и под моим изображением и мерцание в моих параллаксных секциях при прокрутке на сайте Squarespace I 'Я создаю для клиента.У меня есть параллакс (страница индекса) на 100vh и все мои изображения и секции на полную ширину, используя flexbox.

В настоящее время я использую шаблон Moshka (Brine), и я немного прочитал, что этоУ определенного семейства шаблонов есть проблемы с параллаксом, но я надеюсь, что, возможно, у кого-то есть идея, я могу попытаться исправить эти проблемы с помощью пользовательских инъекций кода.

Я могу использовать базовые CSS и HTML, чтобы сделатьчто-то выглядит так, как я хочу, но я довольно неопытен и не знаю, с чего начать что-то вроде исправления параллакса сайта Squarespace и надеюсь, что кто-то может указать мне правильное направление (или сказать мне, что это безнадежно, чтотоже хорошо).

Я пытался удалить свой пользовательский код, изменить высоту секций параллакса и изменить ширину моего браузера, чтобы исправить это, но, похоже, ничто не помогает остановить дрожание и мерцание,Если я уберу часть своего кода из flexbox, пробелы выше и ниже изображения параллакса будут немного лучше, но проблемы все равно сохранятся.

Заранее спасибо за любую помощь!И извините, если это не то место, где можно спросить.

Я не знаю, нужно ли указывать свой код или нет, но я могу пересмотреть этот пост, чтобы включить некоторые, если люди считают, что это необходимо,Я включил пример мерцания, которое я получаю в разделах параллакса моего сайта (1px черная линия через изображение) ниже.Я не могу поймать пробелы, которые у меня появляются, поскольку они появляются во время прокрутки и исчезают, когда я останавливаюсь.

A screenshot of parallax flickering

Еще раз спасибо!

1 Ответ

1 голос
/ 13 мая 2019

Обходной путь для этого пробела, который «разрывается» между разделами страницы индекса параллакса Squarespace, заключается в создании элемента «позади» изображения в каждом разделе, а затем заполнении этого элемента цветом (или градиентом), аналогичным то, что видно в области перехода между двумя секциями.

Это работает лучше в ситуациях, когда каждый раздел с фоновым изображением чередуется с разделом с плоским цветом фона.

Тем не менее, он все еще может адекватно работать в вашей ситуации, когда изображения сталкиваются друг с другом (и где цвет в верхней / нижней части изображения относительно одинаков по ширине изображения).

Следующий CSS-код, вставленный с помощью редактора CSS Squarespace, сделает «разрыв» почти незаметным между разделами на предоставленном вами примере сайта . 

.Index-page--has-image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
}
#welcome:before {
    background-color: #232125;
}
#last:before {
    background-color: #CAB8B1;
}

Конечно, «разрыв» все еще происходит, но мы заполняем то, что было белым промежутком (очень ощутимым), цветом, который приближает цвета изображения (так, чтобы оно было менее легко восприниматься).

Обратите внимание, что цвета (232125, CAB8B1) и идентификаторы (welcome, last) относятся к указанному вами примеру сайта. Они должны быть изменены для каждого сайта. Цвета были выбраны путем выборки цвета из соответствующей части каждого изображения, а идентификаторы разделов индексной страницы назначаются Squarespace на основе «URL-адреса» в настройках страницы для каждой страницы.

Теперь давайте посмотрим немного повнимательнее.

В то время как вышеупомянутый CSS делает разрыв между разделами незаметным, разрыв остается между первым разделом и панелью навигации (белый), а также между последним разделом и нижним колонтитулом (темно-синий).

Итак, мы должны немного усложнить добавление градиента фона к псевдоэлементу. Чтобы сделать это, вы должны использовать что-то вроде этого вместо вышеуказанного CSS: 

.Index-page--has-image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
}
#welcome:before {
    background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,#232125 50%,#232125 100%);
}
#last:before {
    background: linear-gradient(to bottom,  #CAB8B1 0%,#CAB8B1 50%,#081359 50%,#081359 100%);
}

Стоит отметить, что это не столько проблема с Squarespace, сколько природа событий прокрутки Javascript и рендеринга страниц. Сумма смещения основана на том, сколько страниц было прокручено (прошедшее время), поэтому, конечно, эта сумма не может быть рассчитана (и затем обработана) до после прокрутки. Так что по сути смещение всегда «догоняет». Идея, лежащая в основе реализации Squarespace, заключается в том, что пользователь будет работать на устройстве и браузере, которые работают достаточно хорошо, чтобы задержка не воспринималась. Очевидно, что это не всегда так!

...