0

I've been trying to do something like this for quite a bit, and have tried a variety of methods from fake scroll bars and DOM-tricking code. Nothing seems to quite be as clean / functioning as I need it to be.

What I'm trying to do is have a horizontally scrolling div (with scrollbar), with a vertically scrolling div nested within it. Ideally the single horizontal scrollbar would scroll, and after a certain point--vertically scroll the "go-up" div next to it.

Here's an example diagram for those who need to visualize: diagram I think I have a solution that could work:

Basically I'm thinking that the horizontal "scene" could have overflow that equals the height of the "go-up" div. And after the horizontal width of the "scene" passes...you can, onScroll, shift the "go-up" container right using (ScrollLeft) and up using (ScrollTop).

Basically giving you the illusion of controlling it's vertical scroll with a horizontal scrollbar.

Check out the code here: http://jsfiddle.net/jPzqj/1/

I know how to pass a function at the end of the "scene"...currently I'm using:

$('#main').scroll(function(e)
    {
        if($(this).scrollLeft()>1430)
        {

        }
});

My only issue is I'm not quite sure how to approach the math that would allow me to shift the go-up container. How do I pass in the "scene" divs scroll value into the ScrollLeft and ScrollTop values of "go-up"...

Could anyone give me any advice on this at all?

Thanks.

richie
  • 457
  • 1
  • 6
  • 19
  • If I am a user of an interface like this, I will certainly freak out. "Let me scroll down to see what's more..." "WHAT IT SUDDENLY GO TO THE RIGHT?" – Alvin Wong Apr 16 '13 at 06:38
  • Instead, use a pure vertical layout, like what Twitter does, for example. – Alvin Wong Apr 16 '13 at 06:39
  • On a very interactive art heavy page (like the one I'm making), I've seen this used successfully: http://paranorman.com/scene/normans-friends – richie Apr 16 '13 at 06:42

1 Answers1

0

You are totally off the right path, no vertical scrollbars are involved.

That is a good site (not the one that you make in 30 minute obviously), and the javascript is obfuscated, but if you are interested, you could watch the source with Firebug to understand what's going on.

It works by mixing a javascript library, some cool CSS3 Transform3D effects, and a nicely studied HTML to give you the effect of the screen scrolling up (actually, only the images are moving - and not scrolling - while the screen is always in the same Y position).

The same effect is used to create the percetion of depth, by moving the houses in background slower than the ones in front.

This effect is called PARALLAX SCROLLING .

A good javascript library you could start looking at for Parallax effects is Stellar.js

You can take a look at some great sites made with Stellar.js, especially Nike and Saucony.

Hope this answer saved you some time,

good luck on your studies ;)

EDIT

this is what you want: Jquery Parallax Scrolling effect - Multi directional

open the fiddle from the bounty-awarded answer and keep the right arrow key down.

Community
  • 1
  • 1
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
  • This is not an answer. I know what a parallax is. I've used Stellar.js in the past. I'm not trying to find out how to parallax, I'm trying to find out if there is anyway to connect my horizontal scroll position to the .scrollTop and .scrollLeft properties of a vertical div. – richie Apr 16 '13 at 10:17
  • You know parallax, you know stellar, and you put a vertical scrollbar in your fiddle ? nothing is scrolled, it is just translated. – Andrea Ligios Apr 16 '13 at 10:30
  • The vertical scrollbar will ultimately be hidden. And the vertical container will contain vertically parallaxing elements, whereas the horizontal one will contain horizontally parallaxing elements. – richie Apr 16 '13 at 10:57
  • that is NOT how the site you linked is done. Check it the edited answer – Andrea Ligios Apr 16 '13 at 12:32