Прокрутка изображения на картинке для веб-страницы

Question

Я создаю сайт для своего приложения и хотел бы достичь чего-то вроде этого: http://letspip.com. Изображение, расположенное на экране, с содержимым, изменяющимся внутри, как прокрутка страницы. Поймал гуглинг и не знал, как это достигается. Можно ли это сделать в HTML5? Просто хочу знать название техники или что-то, чтобы я мог начать. Любые указатели были бы действительно оценены! спасибо

Answer 1

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

Answer 2

Просто взгляните на их исходный код.

HTML:

<div class="device"> <!-- The phone --> 
<div class="mask"> <!-- The inner phone --> 
<div class="service-bar"></div> <!-- Phone's navbar --> 
<div class="screen skrollable skrollable-between" data-175p="transform:translate3d(0,0%,0)" data-150p="transform:translate3d(0,-100%,0)" data-75p="transform:translate3d(0,-100%,0)" data-50p="transform:translate3d(0,-200%,0)" data-0="transform:translate3d(0,-200%,0)" style="transform: translate3d(0px, -100%, 0px);"> <!-- The part that changes --> 
<section class="panel"></section><!-- Image 1 --> 
<section class="panel"></section><!-- Image 2 --> 
<section class="panel"></section><!-- Image 3 --> 
</div> 
</div> 
</div> 

CSS из первого раздела:

.device .panel:nth-child(1) { 
    background-image: url("http://o.aolcdn.com/os/aol/aol-alpha/pip-website/img/slide1.png"); 
} 
.device .panel { 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
} 

Таким образом, они имеют DIV с телефоном в нем, который закреплен в центре экрана. При прокрутке элемент стиля экрана с возможностью прокрутки изменяется от transform: translate3d(0px, -200%, 0px); (первое изображение) до transform: translate3d(0px, -100%, 0px); (второй img), а затем до transform: translate3d(0px, 0%, 0px); (третий img). Это изменяется каждый раз, когда достигается новая часть страницы.

См плагин Skrollr для получения дополнительной информации по этому вопросу или попытаться добиться его своим яваскрипта навыков :)