水平滚动，相对于锚点检测滚动位置 [英] horizontal scroll, detecting scroll position relative to anchors

问题描述

好吧，我正在为摄影师建立一个水平滚动网站。我们有一些非常好的线框完成，我正在寻找创造一个整洁的效果，它突出显示在屏幕左侧的特定照片在任何时候，或更具体地将透明度设置为所有其他照片的40％。

所以我知道我可以添加锚点到每张照片，所以我可以使用它来点击下一个选项，但如果用户手动使用滚动条怎么办？任何方式，我检测相对于每张照片的位置。不要忘了让这个更加尴尬，即使每张照片是相同的高度，他们可以有不同的宽度。

我想，如果有办法获得每个锚标签的位置，那么我可以检测到当前的位置，并使用一些数学来确定哪一个正在关注

所以有人可以告诉我这是可能的吗？当然，任何其他想法都可以使用。

解决方案

我用一个脚本来点了一下，并提出了一个脚本，物品的不透明度被排除在外，从左边是多远。所以这个项目越接近它就越明显。

你可以在这里看到演示文稿：
http://jsfiddle.net/XAa3Y/57/

希望它有帮助。 >

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.

这篇关于水平滚动，相对于锚点检测滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！