CODEWITHSUNDEEP
htmlcss
KexAri
KexAri

Reputation: 3977

Scrolling an image within an image for a webpage

I am building a website for my app and would like to achieve something like this: http://letspip.com. An image centered in the screen with the content changing inside as the page scrolls. Been googling around and not sure how this is achieved. Can it be done in HTML5? Just want to know the name of the technique or something so I can get started. Any pointers would be really appreciated! thanks

Upvotes: 2

Views: 168

Answers (2)

janatuerlich
janatuerlich

Reputation: 173

Just have a look at their source code.

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 from first section:

.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;
}

So they have a div with the phone in it which is fixed at the center of the screen. While scrolling, the style element of the screen skrollable div changes from transform: translate3d(0px, -200%, 0px); (first image) to transform: translate3d(0px, -100%, 0px); (second img) and then to transform: translate3d(0px, 0%, 0px); (third img). This changes each time a new part of the page is reached.

See the plugin Skrollr for further information on this or try to achieve it with your own javascript skills :)

Upvotes: 1

Manish Shukla
Manish Shukla

Reputation: 1365

As you can see this can be managed by fixed position and relative position. The image you are referring has been set as fixed. In given site skroller plugin is used to manage scrolling of different sections.

Upvotes: 0

Related Questions