寻找jQuery视差插件

发布于 2024-12-24 01:35:28 字数 1539 浏览 0 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

唔猫 2024-12-31 01:35:28

如果谷歌是对的,我很确定它就在这里 http://www.ianlunn.co.uk/插件/jquery-parallax/

Pretty sure its here if google is right http://www.ianlunn.co.uk/plugins/jquery-parallax/

失而复得 2024-12-31 01:35:28

我一直在寻找。我创建了一个挂钩 window.scroll 事件并将 div 移动到适当位置的事件。

https://github.com/eiu165/Parallax/tree/master/src

工作示例

我对原始示例进行了扩展,使其更易于使用。我的工作是水平。请随意使用它。

使用
var hotSpots = [0, 2000, 4000, 6000, 8000]; 定义页面的位置

,然后对移动的 div 进行分类并为其指定 x 速度 和 < em>y 速度
并将元素放入移动 div 中的 x 位置y 位置 以及您希望其显示的框架(页面)。

<div class="parallax"  data-speed-x="0"  data-speed-y="0.8" >
    <div   data-frame-y="220" data-frame-x="200" data-frame="1"  ><img src="./img/moon.png"  /></div>
    <div   data-frame-y="350" data-frame-x="420" data-frame="4" ><img src="./img/sun.png"  /></div>

</div>

<div class="parallax"  data-speed-x="-0.4"  data-speed-y="0.0" >
    <div   data-frame-y="800" data-frame-x="420" data-frame="3" ><img src="./img/tree.png"  /></div>
    <div   data-frame-y="750" data-frame-x="320" data-frame="4" ><img src="./img/tree.png"  /></div> 
</div>

它基于我在该网站上发现的内容。
http://f6design.com/projects/parallax-scrolling/

I have been looking. I created one that hooks into the window.scroll event and moves the divs to the appropriate spot.

https://github.com/eiu165/Parallax/tree/master/src

working sample

I have expanded on the original to make it easier to use. mine works horizontally. feel free to use it.

use
var hotSpots = [0, 2000, 4000, 6000, 8000]; to define the locations of your pages

then class your moving div and give it an x speed and a y speed
and put elements inside the moving div at an x position and y position and what frame(page) you want it to show.

<div class="parallax"  data-speed-x="0"  data-speed-y="0.8" >
    <div   data-frame-y="220" data-frame-x="200" data-frame="1"  ><img src="./img/moon.png"  /></div>
    <div   data-frame-y="350" data-frame-x="420" data-frame="4" ><img src="./img/sun.png"  /></div>

</div>

<div class="parallax"  data-speed-x="-0.4"  data-speed-y="0.0" >
    <div   data-frame-y="800" data-frame-x="420" data-frame="3" ><img src="./img/tree.png"  /></div>
    <div   data-frame-y="750" data-frame-x="320" data-frame="4" ><img src="./img/tree.png"  /></div> 
</div>

it is based off of what I found was based off of this site.
http://f6design.com/projects/parallax-scrolling/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文