Sliding Up/Down home page window CSS like website http://nautil.us/

February 2, 2014 6:41 PM

I love the sliding up homepage at http://nautil.us/. I'm trying to find a template or CSS/that library scripts that can help me achieve the same effect easily ?
posted by flexiverse to Computers & Internet (11 answers total)

I don't know how they came up with theirs, but I isolated the CSS having to do with that scroll and put it here: http://jsfiddle.net/xHX8Y/. The effect doesn't require JavaScript except something that changes #issue-curtain-page-wrap from position:fixed to position:static when it's time to start scrolling and also changes the min-height on body (not sure why.)

I didn't manage to find the JS that's doing that; maybe someone else will.
posted by michaelh at 6:57 PM on February 2, 2014 [1 favorite]

I think this one-page scroll (code available on GitHub) will do what you want.
posted by asterix at 7:57 PM on February 2, 2014 [1 favorite]

You can try Sequence.js - it may help you.
posted by punkrockrat at 8:07 PM on February 2, 2014

Best answer: fullPage.js (source code) is another library that can help achieve a similar effect: see, for example, the Apple demo page.
posted by AnimalKing at 9:22 PM on February 2, 2014

More generally, the technique you're looking for is called parallax scrolling. Using that as a search term will get you many examples, some tutorials, and even an (admittedly not very helpful) Wikipedia article. Note that the second tutorial links to a couple more libraries that can help you: parallax.js and Stellar.js.
posted by AnimalKing at 9:33 PM on February 2, 2014

Response by poster: Please look, again. It most definitely is not parallax scrolling. It's a blind that goes up down over website. Works great on ipad, need to figure this out.
posted by flexiverse at 7:24 PM on February 8, 2014

It *is* parallax: see this StackOverflow thread for a brief discussion and a couple of different ways of accomplishing it.
posted by asterix at 9:38 PM on February 8, 2014

Response by poster: It absolutely and utterly is NOT parallax scrolling. It is a blind that goes OVER and up and down by one page ABOVE the static website. Look at it again and play with it properly.
posted by flexiverse at 11:01 AM on February 9, 2014

Can you explain the difference between the effect you see and the one in this jsfiddle (which I pulled from that StackOverflow thread)? Looks like the same thing to me; the main difference I see between nautil.us and, say, this one is that in the nautil.us site the background is fixed rather than scrolling. But the underlying technique is the same.
posted by asterix at 11:49 AM on February 9, 2014

Response by poster: Fao: asterix, I can't see how the examples you present are anything like the behaviour on nautil.us. 1j the js fiddle link you give is just a long normal scrolling page!!?? 2) the culturalsolutions.co.uk, is also just a long scrolling page, but it has background layers that scroll at a different rates, in parallel, hence this is Just one long parallax
Scrolling page.
Not one thing to notice, I'm viewing on an ipad, there are **definitely differences** in behaviour if you viewing it on anything else. The effect is better on ipad and really smooth, and the header menu does not stay at the top.
Either way quite clearly on nautil.us you start to scroll down, the "blind" page lifts up revealing a static non moving website behind. If you keep scrolling up/down within one page height, the behaviour is of a blind. You can make go up and down ABOVE the static site behind. If you scroll past a page, the blind when lifted to reveal the static site behind, the the blind is gone, the side scrolls like any other site. If you go near the top, the blind rolls over the site again!! Forget normal scrolling site behind. It's the rolling up down behaviour of the blind I love. Note try this on ipad ie mobile safari it's completey different to desktop browser.
posted by flexiverse at 1:42 PM on February 11, 2014

Response by poster: I have found a script that does exactly what I asked. But it does not work on ipad / tablets. Anyone know any way to fix this ? https://github.com/Victa/curtain.js
posted by flexiverse at 5:12 PM on February 20, 2014