Убрать дерганья/рывки при скролле (хром + опера)

Задание закрыто
Стоимость:Договорная
Срок выполнения:10 дней
Варианты оплаты:По договоренности
Дата публикации:2023-03-19 13:56
Был(а) на сайте:2024-02-14 14:56

Убрать дерганья/рывки при скролле (хром + опера)

 
Задача

Есть блок. При скролле он смещается через translate3d.
В хроме и опере смещение идет рывками/мерцания/дерганья. Надо это починить. Любое решение на css/js/jquery.
Безуспешно тестировалось (не предлагать):
transform: translate3d(0,0,0) - исходная позиция
transition: transform 600ms linear
backface-visibility: hidden
-webkit-backface-visibility: hidden
perspective: 1000
-webkit-perspective:1000
transform-style: preserve-3d
-webkit-transform-style: preserve-3d
scroll-behavior: smooth
will-change: transform
-webkit-will-change: transform
С железом тоже все хорошо.
Оплата по готовности и проверке на сбер/юмани.
В начале отклика укажите 3d и сразу ваш тг.

Оставлять заявки могут только авторизованные пользователи.
Зуфаров Азизхон
Зуфаров Азизхон bionorica2015

Пока Вы раздумываете другие уже заказали услуги программиста!

Cпециализация: Веб разработка
  • 7 900 руб2 дня
3d
Мой телеграм: @AzizxonZufarov

Здравствуйте!
Я 4 года занимаюсь программированием.

Могу исправить дерганья/рывки при скролле.

Примеры кейсов:
agrocat.ru/
mpstats.io/
bmb56.ru/
classworkzoom.com/
dv.smart-assist.ru/
fireskins.cc
ugtravel.com/

Могу поговорить с Вами в аудио/видео встрече.
Пишите, буду рад ответить на все интересующие Вас вопросы.

С уважением,
Зуфаров Азизхон
Artyom Davidyan
Artyom Davidyan bfganimeshnik
  • 1 000 руб1 день
Мой тг - https://t.me/bfg_animeshnik

Проблема, вероятно, связана с наличием в браузерах Chrome и Opera "движка прокрутки" (scrolling engine), который может вызывать некоторую задержку при обработке событий прокрутки, что может приводить к рывкам и мерцанию при использовании CSS-анимации. Чтобы решить эту проблему, можно попробовать использовать следующие подходы:

1. Используйте CSS-анимацию вместо перехода (transition). Вместо transition: transform 600ms linear, попробуйте использовать анимацию (animation) с более низкой продолжительностью, например:

CSS 
@keyframes slide-in {

  from {

    transform: translate3d(-100%, 0, 0);

  }

  to {

    transform: translate3d(0, 0, 0);

  }

}



.element {

  animation: slide-in 0.3s ease;

}


2. Используйте requestAnimationFrame (RAF) вместо CSS-анимации. RAF позволяет браузеру определить лучший момент для рендеринга анимации, что может снизить задержки и мерцание. Пример:

JavaScript 
let element = document.querySelector('.element');

let offset = 0;



function scrollHandler() {

  offset = window.scrollY;

  requestAnimationFrame(updatePosition);

}



function updatePosition() {

  element.style.transform = `translate3d(0, ${offset}px, 0)`;

}



window.addEventListener('scroll', scrollHandler);


3. Используйте библиотеку, которая оптимизирует анимацию для сглаживания скроллинга. Например, библиотека SmoothScroll.js позволяет сглаживать прокрутку страницы и анимацию при прокрутке. Пример:

JavaScript 
import SmoothScroll from 'smooth-scroll';



let element = document.querySelector('.element');



let smoothScroll = new SmoothScroll();

smoothScroll.animateScroll(element, null, {

  speed: 500,

  easing: 'easeOutCubic',

  offset: 0,

});


Надеюсь, это поможет исправить проблему с рывками и мерцанием в Chrome и Opera.

Оставлять заявки могут только авторизованные пользователи.

Другие открытые задания:

Вертикальная планировка участка, Карта земляных масс5 000 р.

Бюджет: 5 000 р. Необходимо выполнить чертеж вертикальная планировка участка, карту земленых масс. результат в двг и пдф.

  • 07.06.24
  • Ответов: 4
  • Просмотров: 47
  • Заключение договора

Написать ВТОРУЮ ГЛАВУ по образцу800 р.

Бюджет: 800 р. Нужно написать вторую главу курсовой работы как в предложенном макете на тему "Развитие духовно-нравственной сферы дошкольника"

Размещение объявлений на авито5 000 р.

Бюджет: 5 000 р. От вас просто размещение на вашем аккаунте. Занимаюсь перепродажей электроники и других вещей. Провисеть должны до продажи. Можно несколько объявлений и несколько а…

поиск заданий