horizontal scroll, detecting scroll position relative to anchors

Question

Ok, I\'m building a horizontal scroll website for a photographer. We have some really nice wireframes done and I\'m looking to create a neat effect where it highlights the

Answer 1

Try using jQuery's scroll event support.

http://api.jquery.com/scroll/

And have that check to see what image is on the screen - something similar to this:

Check if element is visible after scrolling

Answer 2

I fiddled a bit around with a script for this, and came up with a script where the items opacity is dertermined, from how far from the left side they are. so the closer the item is the more visible it becomes.

You can see the demo here: http://jsfiddle.net/XAa3Y/57/

Hope it helps.

Answer 3

You could modify (or better, improve) waypoints with horizontal scrolling support. It doesn't seem too hard as much as I could see.

Answer 4

How about something like this: http://jsfiddle.net/coltrane/Mj6ce/

In that example, I've used jQuery -- just because it helps a lot with cross-browser compatibility -- but you could easily re-build it without jQuery if that's what you need.

The basic idea is this:

1. The scroller div provides the scrolling (via overflow-x: auto;), and it has a single immediate child div that holds all the other content items.
2. The jQuery function offset() is used to compare the left edge of the scroller to the left edge of the content div (using document coordinates). This tells us how much the scroller is scrolled.
3. We can then loop through all the items in order, and examine each item's position within the content div (using jQuery's position() function). Comparing an item's position to the current scroll value (from step 2) allows us to determine whether to highlight the item or not.
4. Finally, we use the scroll event, to trigger an update every time the scroll changes. Our update function simply applies steps 2 & 3 described above. I used jQuery's .scroll() function to bind the scroll event.

Answer 5

The task involves detecting Image position, scroller position, and knowing your images width. With jQuery you'll need to use scrollLeft(), position(), width(), and the scroll() event

Here's how you do it.

var $div = $('div'),
    divleft = $div.position().left;
$('div').scroll(function() {
    $('img').each(function() {
        img = $(this);
        imgleft = img.position().left;
        if (imgleft > divleft && imgleft + img.width() < divleft + $div.width()) {
            $(this).css({
                opacity: '1'
            })
        } else {
            $(this).css({
                opacity: '0.2'
            })
        }
    });
})

Check example at http://jsfiddle.net/Vy33z/4/

Answer 6

you'll have to synthesize two figures.

a - you can find the position of the scroll using

 oDiv.scrollLeft

b - once pictures are loaded - you can sum the sizes of the pictures (or if you set it mannually - you don't even have to wait for them to load.

oImg.style.width

Assuming you give the same spacing between the pictures - the math becomes obvious.

It's a little JavaScript, that's all :)