Затемнение блока div при прокрутке [РЕШЕНО]

[krystalmoon]

Добрый день!

Ищю скрипт который затемняет блок при скроллинге когда он вне фокуса пример : https://www.apple.com/iphone-xr/ (3 блок по счету при прокрутке вниз он затемняется)

Знаю что сделать можно посредством js но не могу найти не одного гайда

Прошу помогите или предложите свои варианты исполнения

[spoon]

Попробуйте использовать трансформации при скроле, там куча функций, думаю может подойти.

[krystalmoon]

Можно поконкретнее ? я слегка в недоумении , это css3 анимация ?

[spoon]

Про какой блок речь? Не увидел затемнения, куда смотреть? Там одна сплошная трансформация.

[krystalmoon]

Хорошо : Есть блок, под ним ешё один блок с градиентом, при скроллинге нижний блок с градиентом плавно скрывает верхний блок и наоборот открывает

Вот код блока с градиентом :

<div class="manifesto-shadow" data-anim-tween="{ &quot;start&quot;: &quot;100rh - 90vh&quot;, &quot;end&quot;: &quot;100rh - 45vh&quot;, &quot;relativeTo&quot;: &quot;.section-display .manifesto-wrapper&quot;, &quot;y&quot;: [500, 0], &quot;opacity&quot;: [0.5, 0.999], &quot;ease&quot;: 0.7, &quot;easeFunction&quot;: &quot;easeOutSin&quot; }" style="opacity: 0.5; transform: translate(0px, 500px);"></div>

а вот за счет этого я так понимаю получается анимация transform: translate(0px, 500px);

[spoon]

Там меняется прозрачность при скролле вверх

[krystalmoon]

Мне сначала показалось что вы написали мне мягких французских булок и выпить чаю, но потом прогрузилось вложение и я его увидел

Больше спасибо !

[spoon]

Можно силами билдера попробовать сделать плавную прозрачность через css переходы.

[krystalmoon]

Не совсем понимаю за счет чего происходит скрытие в исходнике который вы скинули, тут же нету не кодов не анимации не событий

Отправлено спустя 3 минуты 9 секунд:
А все понял это js

Отправлено спустя 14 минут 47 секунд:
А подскажите как сделать так чтобы не прозрачность была

А допустим есть блок а под ним блок с градиентом и при скроллинге блок с градиентом переезжал на верхний блок (получится эффект плавного затемнение и так же в обратном направлении)

Отправлено спустя 58 минут 40 секунд:
Все сделал как хотел Большое спасибо @spoon за подсказки , анимацию сделал посредством события scrollehide scrollreveal

[spoon]

krystalmoon, главное начать копать, а дальше дело техники