Как реализовать данный трюк при скролле?

Question

[Игорь Морев]

Привет всем.

Подскажите, пожалуйста, как реализовать следующий трюк в процессе скролла страницы ? Пример здесь www.bizbrain.org/coffee . Когда мы доскролливаем до второй секции, то она крепится (точнее блок с классом animationFrame). Но самое интересное что остальной контент под этим блоком перестаёт скролиться в этот момент. Как этого можно добиться? Смотрел как написан скрипт на этом сайте, но так и не смог разобраться.

Answer 1

[Aleksandr]

html5.by/blog/scroll-effects

Comments

[Игорь Морев]

Спасибо, большое!

[Aleksandr]

Игорь Морев: Вот еще scrollmagic.io

[Игорь Морев]

Про этот знаю.

Answer 2

[Александр Аксентьев]

view-source:www.bizbrain.org/coffee
www.bizbrain.org/coffee/inc/js/script.min.js

Answer 3

[Кевин Митник]

Не смотрел код именно на этом сайте, но я бы реализовал следующим образом:
При наведении мыши на нужный мне класс отключал бы скролл для body, потом выполнял бы нужные мне действия по скроллу и когда они бы завершились, то задал бы какой-нибудь временной переменной значение "true", чтобы оно сверялось в событии прокрутки колесика. FALSE ? Значит скрол в body отключен. TRUE ? Скролл в body включен. Как-то так.

Comments

[Игорь Морев]

Если отключить скролл на body, то не получится брать значения из скролла.

Answer 4

[HamSter]

Скролл эффект > и вот
+ плагины с параллаксом можно посмотреть

Answer 5

[Пантелеймон Штанько]

ку, все зависит от уровня владения DOM, варианта как минимум два: хуяк-хуяк и в продакшин, либо написать свой компонент-класс для работы с подобными графическими решениями: входными параметрами для котрого будет положение блоков-зон при доскроливания до которых будет запускаться дочерний фукцнионал-анимация/callback-функции, в зависимости от количества нужных действий.
То есть у нас есть
1. timeline/scrollHeight(scrollWidth) по необходимости.
2. доскролили до конфигурационной точки (скажем первые 500 пикселей), запустили callback или callback_stack как душа пожелает
3. в зависимости от поведения юзера и результа callback решаем что делать дальше, в текущем примере скролим страницу далее.

П.С. подразумевается, что event.stopEventPropagation и event.returnValue=false должны быть освоены :)

ПС. ну это если есть желание постигать дзень и писать все самому, либо юзать готовые жучеродные решения, а потом в будущем "suffer" :)))

Comments

[Игорь Морев]

Работа не позволяет тратить слишком много времени на решение этой задачи. Я и так потратил достаточно, пока пытался данный трюк реализовать. Но вы правы, некоторые вещи нужно уметь делать без плагинов)

[Пантелеймон Штанько]

Пичалька, когда работа не дает возомжности развиваться :(