Прокрутка в стиле параллакса одного не-фонового изображения

Question

Это может быть трудно объяснить без визуального, но здесь: представьте себе «нормальную» веб-страницу - ничего необычного. Теперь представьте, что основное изображение сидит чуть ниже заголовка. Изображение этого изображения показывает только половину его высоты в контейнере. Теперь представьте, что вы прокручиваете страницу - по мере того, как вы это делаете, основное изображение прокручивается в стиле параллакса, перемещаясь внутри контейнера, раскрывая его вторую половину.

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

Answer 1

Не понимаю, почему вы не хотите, фоновые изображения, но и во всех случаях, вы можете использовать Parallax.js, который использует атрибут data-image-src указать изображение.

Посмотрите в этой демонстрации:

HTML:

<div class="demo" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div> 

JQuery:

$('.demo').parallax({imageSrc: '/path/to/image.jpg'}); 

Как видно: http://pixelcog.com/parallax.js/

Answer 2

Для этого вы можете использовать фоновое изображение и другой div чуть выше, чтобы показать содержимое. вы можете использовать загрузочный эффект параллакса, как внешний вид для примера here