Geek Answers Handbook

Horizontal scroll, scroll position relative to anchors

Ok, I'm building a horizontal scroll website for the photographer. We have some really good frames, and I'm looking to create a neat effect when it selects a specific photo that is to the left of the screen, or, more specifically, sets the transparency to 40% on all other photos.

So, I know that I can add anchors to each photo, so I can use this to have the next click, but what if the user manually uses the scroll bar, is there a way to detect the position relative to each Photo. It is much more important to make this even more inconvenient, although each photograph has the same height that they may have different widths.

I think if there was a way to get the position of each anchor tag, then I could determine the current position against it and use some mathematical calculations to figure out which one is in focus.

So can someone tell me if this is possible, and if so, how? Any other ideas to make it work are of course welcome.

Wireframe of idea

+5
source share
6 answers

I played around a bit with the script for this and came up with a script where the opacity of the elements is depleted, from how far they are from their left side. therefore, the closer the element, the more noticeable it becomes.

Here you can see the demo: http://jsfiddle.net/XAa3Y/57/

Hope this helps.

+6

( , ) waypoints . , .

+3

.

a -

 oDiv.scrollLeft

b - - (, , .

oImg.style.width

, - .

JavaScript, :)

+2

- : http://jsfiddle.net/coltrane/Mj6ce/

jQuery - , - , jQuery, .

:

+1

, . jQuery scrollLeft(), position(), width(), scroll()

.

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'
            })
        }
    });
})

http://jsfiddle.net/Vy33z/4/

+1

jQuery scroll.

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

, - - :

,

0

More articles:


All Articles