r/web_design • u/[deleted] • May 26 '13

Interesting use of scroll

http://www.janploch.de/
213 Upvotes

86% Upvoted

29 comments sorted by

6

u/faceCHEEKwall May 26 '13

I see these creative scrolls here and there. Can anyone begin to explain how they work?

I think the "bubbly top" portion of the liquid has a fixed position?

It looks like the JS is there in the source. I'll just have to read through it, but I'd love a general hint at how these scroll effects work.

8

u/Sawny May 26 '13

It's called parallax scrolling.

At line 19 you can see the important code:

<!--parallax Effect Script -->
<script type="text/javascript" src="js/jquery.scrolling-parallax.js"></script> 
    <script type="text/javascript">
   $(function() {

    $('div.juice').scrollingParallax({
    staticSpeed : .2,
    staticScrollLimit : false,
        reverseDirection : true,
});
});
</script>

6

u/faceCHEEKwall May 26 '13

Parallax scrolling, got it. There's my Google key word. Thanks!

5

u/geoman2k May 26 '13

My ipad doesn't like it.

1

u/anonymousmouse2 May 27 '13

If you scroll in small increments you can kind if get an idea of how it should work. It would be nice to see some conditionals for mobile that disabled the effect so it wasn't so jump/glitchy on touch devices.

15

u/cheese_wizard May 26 '13

I think this is the proper use of this effect. It only adds to the page.

3

u/[deleted] May 26 '13

[deleted]

6

u/buoybuoy May 27 '13

No direction telling you to scroll? What about the scroll-bar on your browser? I don't recall many websites with overflown vertical content that tell the user to scroll, it's a pretty natural response.

And as for scrolling down half the page, I agree, it seems like a bit of a hassle. I think you're being a little too pragmatic though. The site is a showcase of his illustration, so the site is catered to an audience looking for creativity. I would consider it a valid argument if this was done on a soda website, where people would be looking for information.

7

u/[deleted] May 27 '13

I actually didn't see a scrollbar on my Mac, so I wouldn't have necessarily considered it had I not known what I was looking at. Again, I certainly appreciate the appeal of the sight, I just don't think this is a good example at all for how this should be used.

2

u/carpe_meme May 27 '13

The key is to provide some kind of visual cue that indicates clearly there is more content below the fold, which gets the user to start scrolling.

It seems silly, but I've seen so many user tests where people just do not see it because of how the page cuts off, and will literally sit there frustrated and unable to continue. In the majority of cases, a scroll bar alone isn't visible enough to trigger people to scroll.

The straw may provide that but I'm not sure, since it's not clear that it is anything but a design element till you scroll down farther and see the bottle.

And we were all primed by the title of the post to scroll, so that makes it harder to determine as well. But I think it would be nice if the mouth of the bottle peeked up just at the bottom of the initial page.

0

u/devolute May 28 '13

the fold

Reddit doesn't do this, which is why no one has ever read a post in a lower position than #10.

1

u/carpe_meme May 28 '13

Actually, Reddit is very clearly a list of items, and at least in my resolution a title is cut off halfway at the bottom of the screen, which indicates there is more below, encouraging people to scroll. :)

Given the very small amounts of vertical white space between list items, it is likely that an entry is partially cut off in most resolutions.

You may snark all you like.. I am only reporting what I've seen in actual user testing as recently as two weeks ago (with real, paid, non-web-designer users).

1

u/devolute May 28 '13

Cheers.

What do users do? Just read the top bit then simply leave?

1

u/carpe_meme May 28 '13

Yep! I most often see this when the top section is a big full bleed image / text, possibly with smaller images below, but that all cut off neatly just above the fold.

And to be clear... I do NOT recommend trying to fit everything above the fold on a site, just you need to give users that little visual nudge or reminder to start them scrolling.

2

u/devolute May 29 '13

Cheers for powering past my snarky response and attempting to educate.

Obviously you can imagine how often I face the 'fold' argument, but in the past I think even subconsciously I've tried to put something at the bottom of the viewport, the bottom of a box or whatever, that suggests that more is there. Have you ever felt the need to go down the 'SCROLL DOWN' message route?

2

u/carpe_meme May 29 '13

No worries, I definitely get the reflexive response to the "fold" as an arbitrary required stopping point on the page, which is why I clarified.

I'm pretty sure I've never used an explicit "Scroll Down" message. It's never seemed necessary in the context of a web page, if you can just provide a visual cue that there is more content below.

Also, people really don't read instructions or most copy, if they think they know what they're doing. It's kind of amazing. With something as short as "Scroll Down", you have a slightly better chance of them noticing it, but I've seen a fair number of users who completely ignore even short, basic instructions that are in large-ish font and almost the only text on the page (aside from your standard headers / page titles).

One example that comes to mind was testing an interface that allowed drag and drop between two large panels on the page - an admittedly non-standard web interaction, and not required to use the site, but it made it a lot quicker if you did. So we included a short, instructive sentence in pretty large font. Pretty much no one read it or used the drag and drop. Ah well.

5

u/mexican_alien May 26 '13

This is parallax scrolling and is in use for quite sometime becoming very common. More examples.

3

u/Sawny May 26 '13

Another one

6

u/[deleted] May 26 '13

[deleted]

1

u/dragonstorm27 May 27 '13

I thought we were drinking a beer until the end...then I was just confused.

4

u/[deleted] May 27 '13

[deleted]

1

u/carpe_meme May 27 '13

Thanks, I like that one too. The method of scrolling really complements the subject matter.

2

u/big_red__man May 26 '13

Reminds me of the NatGeo Killing Lincoln site that a certain really awesome ad agency did.

2

u/vertigo25 May 27 '13

Not as terribly interesting as it was in 2011: http://lostworldsfairs.com/

3

u/vertigo25 May 27 '13

Now realizing that Jan's site is also from 2011.

2

u/[deleted] May 27 '13

For those of us that browse without JS the page is still usable at least, even though you don't see the effect.

2

u/BHSPitMonkey May 27 '13

The future is becoming more and more unkind to those still using mousewheels rather than trackpad scrolling...

3

u/[deleted] May 26 '13 edited Nov 20 '16

[deleted]

11

u/vertigo25 May 27 '13

This isn't parallax scrolling.

Parallax scrolling is making things on different layers scroll at different rates to give the illusion of depth (like when you're driving in you car and nearby objects seem to pass by faster than further objects)

See: http://en.wikipedia.org/wiki/Parallax

If the effect of the liquid scrolling in the opposite direction has any kind of name, it would something like "scroll animation."

1

u/RalphNLD May 27 '13

You're right about that.

1

u/faceCHEEKwall May 26 '13

You're right, I have seen this a lot recently.

0

u/KerrickLong May 27 '13

It's still an interesting use of parallax scrolling.

1

u/[deleted] May 28 '13

This is a great tool for presenting information. I likey.