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 specific photo that is on the left of the screen at all times or more specifically set the transparency to 40% on all other photos.
So I know I can add anchors to each photo so I can use that to have a click to next option but what if the user uses the scroll bar manually, is there any way for me to detect the position relative to the each photo. Bare in mind to make this even more awkward even though each photo is the same hight they can have different widths.
I’m thinking if there was a way to get the position of each anchor tag then I could detect the current position against it and use some maths 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 welcome of course.
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.