Отображение картинки по маске. Как реализован такой эффект?

Question

[Andrey Dontsov]

Всем привет
Подскажите пожалуйста логику реализации такого эффекта:
Демонстрация gif
doitinbound.com/wp-content/uploads/2015/02/interco...
И на самом сайте:
https://www.intercom.io/customer-support

Картинка меняется как бы по маске, т.е. картинка с письмами в примере выступает в роли маски, скрывает нижний слой и закрывает его новым.
Можно ли такое сделать не в шапке сайта а, например, в середине? Как это вообще сделано?
Спасибо

Comments

[Дмитрий Кравченко]

Веб инспектор в любом браузере снимет такие вопросы раз и навсегда

Answer 1

[Денис Инешин]

Обычный креативный параллакс эффект. Никаких там масок нет, просто имитация. Ищите плагин здесь: www.unheap.com/?s=parallax

Comments

[Andrey Dontsov]

Спасибо! Все как бы получилось!)) А есть способ сгладить эффекты параллакс при прокрутке колесом мыши? Сделать движение более плавным. У меня w7, в хроме на одно движение колеса мыши страничка скроллится, не знаю, примерно на 50-60px, в разных браузерах по разному. Может есть какое-то решение, чтобы скролл был плавным?

[Andrey Dontsov]

Точнее 100px , хром скролит на 100px на каждый шаг колеса мыши

[Денис Инешин]

AndreyBLG: Воспользуйтесь jquery.mouswheel, он умеет нормализовать.

Answer 2

[Andrey Dontsov]

Все проще, для реализации такого эффекта достаточно к изображениям применить background-attachment: fixed
Не знал этого, когда задавал вопрос, может кому-то пригодится