Можно ли сделать такую фишку без JS?

Question

[saveTibet]

Вот пример того, что я хочу сделать: при прокрутке одно изображение как бы накладывается на другое. Живой пример можно увидеть на сайте


Можно ли сделать такое без JS, а если нет, то подкиньте идею, пожалуйста, как это реализовать.

P.S. Хочу уточнить, что речь идет лишь о изображении лица девушки

Comments

[Mikhail Osher]

Моих навыков верстки недостаточно для решения данной задачи, однако держу пари, что сеньоры верстки смогут такое сделать без JS.

Answer 1

[Андрей]

вообще легко background-attachment: fixed
https://jsfiddle.net/s8o5hun8/1/

Comments

[saveTibet]

Просто и изящно. Спасибо за наводку. И без лишних слов про параллакс и скрипты ))

[saveTibet]

Вдогоночку еще вопрос: на той же странице, ниже, есть блок с еще одной барышней. Там, когда ей по лицу возишь мышью, тот же самый эффект получается. Там уже, как я понимаю, без JS не обойтись?

[Андрей]

var blockGlobal = $(".sec-5-right-bl");
var blockInclude = $(".sec-5-img-surgeon");
var blockMouse = $(".sec-5-mouse");
function test() {
blockGlobal.mousemove(function(e) {
var offset = $(this).offset();
var relativeY = (e.pageY - offset.top);
if(relativeY > 180) {
blockInclude.css("height", relativeY);
blockMouse.css("top", (relativeY-27));
}
else {
blockInclude.css("height", 180);
blockMouse.css("top", 153);
}
});
}
$(window).resize(test);
test();

скрипт в самом низу drkuznecov.ru/wp-content/themes/eartempty/js/script.js

[saveTibet]

А можно ли как-то оптимизировать этот скрипт, написать его по-другому? Я дела/ тестовое задание и не хотелось бы брать тот же код, что в примере.

[Андрей]

alekseyruzov: там все гораздо элегантней можно https://jsfiddle.net/wmerj7x5/ вот

[saveTibet]

Андрей: спасибо большое, попробую ваш код. А пока что вылезла такая проблема с сабжем: я сделал верстку по вашему примеру с фиксированным бэкграундом. На десктопе все прекрасно, но на iOS, оказывается, есть проблемы с отображением такого фона — он прокручивается. Есть идеи, как победить? Параллельно ищу решение в гуглах.

[saveTibet]

Андрей: Повторил ваш код на Codepen, почему-то не работает. Есть идеи? codepen.io/alekseyruzov/pen/GqGwqo

[Андрей]

alekseyruzov: jquery подключили?

[saveTibet]

упс. нет конечно )). Спасибо!

Answer 2

[65536]

редкий случай достойного применения параллакса.

скриптами проще

Comments

[Андрей]

вы че тут реально все прикалываетесь? ))

Answer 3

[Милок Мурлыка]

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

Answer 4

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

Это обычный параллакс, просто сделанный креативно. Гуглите плагины.

Comments

[saveTibet]

По-моему, это как раз не параллакс. В параллаксе несколько слоев движутся относительно друг друга, создавая иллюзию 3D