Apple-like website section-by-section scrolling behavior

Question

I'm trying to figure out how to make the main visible content area expand to the height of the browser-- it's responsive in a sense. If you extend the browser, more of the content shows. If you scroll down, it scrolls to the next div and repeats the behavior.

I have no idea what this behavior is called or referred to as, so I'm not sure I can give an accurate title.

My guess is that this is done with Javascript, but I'm not well-versed in the language by any means. Can someone help me out here?

Examples: http://theartofraw.g-star.com & http://www.apple.com/iphone-5s/

score 1 · Answer 1 · edited Sep 24 '13 at 21:39

1

I've done this with Jquery. Basically you get the height of the window and then set the height of each slide to that value.

var origheight = $(".slide").height();
var height = $(window).height();

if (height > origheight) {
    $(".slide").height(height);
}

http://jsfiddle.net/uYXvF/

edited Sep 24 '13 at 21:39

bogatyrjov

5,077
9
29
60

answered Sep 24 '13 at 21:21

Pete

108
3

Great response, it works. What about the easing in from one section to the next, so the scrolling isn't so rough? – James Sterling Sep 24 '13 at 21:54
@JamesSterling that would be what i wrote in my answer? – Moritz Mahringer Sep 24 '13 at 22:09

score 1 · Answer 2 · edited May 23 '17 at 12:05

They have sections, that are CSS "height: 100%";

Then they detect scrolling and, do a CSS3 Transform with CSS3 Transition:

Transform: Y: 0%
Scrolling Detected
Transform: Y: 100%

So they are basically preventing actual scrolling and instead move the whole content by 100%.

Edit (2): In this post they show how to disable scrolling: How to disable scrolling temporarily?

function wheel(e) {
  preventDefault(e);
  document.getElementById("mainContainer").style.webkitTransition = "-webkit-transform 1s";
  document.getElementById("mainContainer").style.webkitTransform = "translateY(-100%)";
}

This is a simplified version from what i use on my own page.

score 1 · Answer 3 · answered Nov 01 '13 at 10:27

1

If you want to accomplish the same as in the example sites you posted, then you could make use of a jQuery plugin called fullPage.js.

answered Nov 01 '13 at 10:27

Alvaro

37,936
23
138
304

Apple-like website section-by-section scrolling behavior

3 Answers3