Нужно сделать анимацию, в начале есть шар и по скролу он должен раскрыться в разные стороны и оттуда "выплывает текст"
Что то подобное есть на сайте -
https://ribant.co/
Тут если немного проскроилть вниз будет похожий блок
У меня есть видео, но если просто при каждом тике делать video.currentTime + 0.1 то получается дергано и слишком много раз нужно проскролить. GSAP не особо помог, вот код, который реализовал, но видео получается дерганным.
const handleWheel = (event) => {
event.preventDefault();
const direction = event.deltaY > 0 ? 0.1 : -0.1;
const newTime = video.value.currentTime + direction;
if (newTime >= 0 && newTime <= video.value.duration) {
gsap.to(video.value, {
currentTime: newTime,
duration: 0.5,
ease: 'power1.inOut'
});
}
};
и на картинках сделал сделал короткую анимацию при прокрутке -
onMounted(() => {
for (let i = 1; i <= 19; i++) {
let img = new Image()
img.src = `src/assets/img/main/consultation/voron/voron${i}.png`
images.value.push(img)
}
// Добавляем первое изображение в контейнер
const imageContainer = document.getElementById('image-container')
if (!imageContainer.querySelector('img')) {
imageContainer.appendChild(images.value[0])
}
})
const handleScroll = (event) => {
const direction = event.deltaY > 0 ? 1 : -1
const nextIndex = currentIndex.value + direction
// Проверка границ
if (nextIndex >= 0 && nextIndex < images.value.length) {
event.preventDefault()
currentIndex.value = nextIndex
const imageContainer = document.getElementById('image-container')
const imgElement = imageContainer.querySelector('img')
if (imgElement) {
imgElement.src = images.value[currentIndex.value].src
}
}
}
даже эти 19 картинок я считаю много, для полноценного видео на 4 секунды мне нужно около 90-120 картинок. Какие есть хорошие практики для этого? Если бы можно было видео отмотать назад, было бы очень просто, но нет такой функции
