Jquery视差滚动效果 - 多方向 [英] Jquery Parallax Scrolling effect - Multi directional

查看:180
本文介绍了Jquery视差滚动效果 - 多方向的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要为客户端构建一个多向JQuery视差页面 - 他们基本上希望它以类似的方式工作 - https://victoriabeckham.landrover.com/INT

I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT

我准备好了图片,发现了许多jquery库,滚动水平/垂直 - 但我不知道如何在一个特定的坐标组合在一起。
任何人都可以告诉我一个正确的方向?

I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate. Could anyone please point me in a the right direction?

编辑:我最初签署了这个职位,看看Superscrolarama,认为一切都解决了 - 我不认为它是相当救主我想是,我需要水平和垂直视差以及滚动实现上面,这似乎不支持 - 所以任何其他提示我会非常感谢!

I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!

推荐答案

我为你扔了一起是jsfiddle。

I threw something together is jsfiddle for you.

http://jsfiddle.net/9R4hZ/40/

脚本首先初始化所有对象的开始位置。然后处理程序设置为箭头键和鼠标滚轮。

The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.

它使用ARROWS或MOUSEWHEEL滚动。

It uses the ARROWS or MOUSEWHEEL for scrolling.

有[左,右,上,下]转换。

There are from [left, right, top, bottom] transitions.

HTML和CSS非常简单。

The HTML and CSS are really simple.

运行它的JS / jQuery是自解释的。

The JS/jQuery that runs it is self explanatory.

这是一个有趣的效果,似乎适合艺术类型的网站。

It's an interesting effect, that seems to be geared for artsy type sites.

这篇关于Jquery视差滚动效果 - 多方向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆