如何实现多方向滚动跟随效果？ [英] How to implement a multi-directional scroll-follow effect?

问题描述

我有一个尺寸比它的容器（父）大的div数组。我将溢出设置为隐藏在容器上，然后在地图上调用JQuery Overscroll，以使其具有iPhone的感觉 http： //www.azoffdesign.com/overscroll 。

I have an array of divs which are dimensionally larger than its container (parent). I have overflow set to hidden on the container and call the JQuery Overscroll on the map to give it the feel of an iPhone http://www.azoffdesign.com/overscroll.

我遇到了一个问题，解决了如何实现用户滚动数组和时间的跟踪箭头中心div（家庭）进入溢出视线之外。当用户将主屏幕滚动到溢出区域时，我想要一个箭头出现在容器的内侧边缘，并沿着边缘绕过边缘，无论它走到哪里。对我来说，使用箭头图像是有意义的，然后旋转它，使它指向正确的方向，因为家被移动。

I am having an issue tackling how to implement a tracking arrow for when the user scrolls the array and the center div (home) goes into overflow out-of-sight. When the user scrolls "home" out of view into the overflow region, I would like an arrow to appear at the inside edge of the container and follow it around the edge wherever it goes out of view. It makes sense to me to use an image for the arrow, then rotate it so it points in the correct direction as "home" gets moved around.

这是我的小提琴与基础工作> http://jsfiddle.net/virtuapete/QVQ5r/1/

Here is my fiddle with the base work > http://jsfiddle.net/virtuapete/QVQ5r/1/

所以有三个元素可以使它正常工作......随着它在溢出中移动时图像跟随家，图像相对于其中的旋转家是（所以箭头总是指向家，然后只要隐藏箭头，一旦家中变得可见的容器内。

So there are 3 elements to this to make it work properly... the image following "home' as it moves around in overflow, rotation of the image with respect to where home is (so the arrow always points to "home" and then simply hiding the arrow once home becomes visible within the container.

我很确定我已经看到了这种效果在开始解决这个问题之前，我开始寻找滚动跟随技术，因为这将是这个概念的一个近似的一维示例，就像一个多方向的滚动几乎一样，我已经达到了让自己完全困惑的点现在，我的技术水平还不够强iff代码片段我已经找到了所需的结果！

I am pretty sure I have seen this effect before and to begin tackling the issue I started looking up scroll follow techniques since that would be a close 1-dimensional example of this concept. Kind of like a multi-directional scroll follow almost. I have reached the point where I have completely confused myself now and I am def not strong enough in my skills to meld diff code snippets I have found into the desired result yet!

我找到了一个jsfiddle（ http://jsfiddle.net/hj57k ），这些东西可以沿着我想要的东西行，没有div跟在对象之后（在那个例子中是光标），一旦它离开了容器边界。任何帮助都将是惊人的，因为我只是停留在如何开始......让div跟随双方的对象将是一个很好的开始，我可以从那里拿走它......

I found a jsfiddle ( http://jsfiddle.net/hj57k ) of something that could be along the lines of what I want, without the div following the object (in that example the cursor) once it has left the container boundaries. Any help would be amazing as i am just stuck on how to get going... getting the div to follow the object around the sides would be a great start and I could probably take it from there...

推荐答案

请看： http：/ /jsfiddle.net/green/F8gd4/ 或 http://jsfiddle.net/green/GpG3U/ 。

这篇关于如何实现多方向滚动跟随效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！