程序员经验分享-hwhale

Jquery视差滚动效果-多方向

2024-03-16

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

我已经准备好了图稿，并找到了许多 jquery 库，它们允许我水平/垂直滚动 - 但我不确定如何在特定坐标处将两者组合在一起。 有人能指出我正确的方向吗？

编辑：我最初确实在研究了 Superscrolarama 并认为一切都已解决后签署了这篇文章 - 但在实现它时遇到了困难 - 我不认为它是我认为的救世主，我需要水平和垂直视差以及滚动到实现上述目标，它似乎不支持 - 所以我将非常感激任何其他提示！


我把一些东西放在一起对你来说就是jsfiddle。

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

该脚本首先初始化所有对象的起始位置。然后为箭头键和鼠标滚轮设置处理程序。之后是 parallaxScroll 函数中算法的核心部分。

它使用箭头或鼠标轮进行滚动。

有从[左、右、上、下]的过渡。

HTML 和 CSS 非常简单。

运行它的 JS/jQuery 是不言自明的。

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

css

Parallax

Jquery视差滚动效果-多方向 的相关文章

  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test

  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小

  • PHP 数组通过 JSON 转为 jquery 数组

    我有点困惑为什么以下不起作用 get php

  • 编辑第一个选项名称

    我有以下我无法访问的代码 我想要做的是将一些文本添加到现在为空的第一个选项中 诸如 选择地址 之类的文本

  • 如何正确取消引用然后删除 JavaScript 对象？

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio

  • Vaadin 12 将对象传递给 JavaScript 函数：无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red

  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使

  • 覆盖 jQuery 验证 MVC4 中的默认设置

    要覆盖查询验证插件 请在文件 http docs jquery com Plugins Validation validate toptions 推荐的方式是 selector validate invalidHandler functio

  • 用于选择特定 div 中具有特定类的锚元素的 jQuery 选择器是什么

    我有一些这样的代码 我想选择每个 a 带有类的标签status在 div 中foo div a class status a div 你可以这样做 foo find status a

  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象？

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style

  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用

  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht

  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是

  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green

  • 什么是 WKWebView 中的 WKErrorDomain 错误 4

    fatal error LPWebView encounters an error Error Domain WKErrorDomain Code 4 A JavaScript exception occurred UserInfo 0x7

  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下

  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo

  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

  • 禁用允许文本选择的？

    残疾人可以吗

随机推荐

  • jQuery 匹配多个类

    我第一次遇到这种不寻常的情况 我必须选择一个应用了 2 个以上类的 div 即以随机顺序 例如 假设我有一个 应用了以下 3 个类 内容文本 右对齐和粗体字体 我需要选择这个 div 但问题是类在不同页面上以不同顺序应用 div class

  • Python 按键错误和 for 循环中的重复代码

    我收到一条错误消息 回溯 最近一次调用最后一次 文件 Users user PycharmProjects SSW 540 P8 hajayi py 第 34 行 位于 字母计数 ch 1 关键错误 n 我还注意到打印语句正在重复 我认为这

  • 使用 ngrx 的应用程序的最佳结构是什么？

    结构1 reducers index ts Combine all reducers user reducer ts product reducer ts actions index ts Combine all actions user

  • 如何在Java中使用postgresql

    我安装了 postgresql 及其驱动程序 postgresql 9 3 1102 jdbc41 jar 我的目录看起来像 gt SQL gt myJDBC java gt postgresql 9 3 1102 jdbc41 jar 我

  • 如何在mysql中使用sql join

    表名 tbl schedule tr id P K mr id F K sch date doctor id 1 23 01 01 2012 32 2 23 05 01 2012 13 3 22 08 01 2012 14 表名 tbl u

  • Boost - 子进程仍然是僵尸进程

    我编写了简单的代码 以分离的方式运行子进程 boost process child childProcess sleep 10 boost process std in close boost process std out close c

  • 在 Github 上托管 ipython 笔记本

    我维护一个 Github 存储库 当前包含两个 ipython 笔记本文件 我的存储库在这里 https github com tschm MosekRegression https github com tschm MosekRegres

  • 不可重现的 R 包可用性检查

    在检查软件包向量是否需要安装时 我遇到了一个有趣的错误 要求并卸载 lme4 命名空间会在第二次执行时出现错误 但仅当按特定顺序检查其他一些包时才会出现错误 isInstalled lt function package is a pack

  • 有没有办法在Python中使用PhantomJS？

    我想用PhantomJS http phantomjs org in Python http www python org 我用谷歌搜索了这个问题但找不到正确的解决方案 I find os popen 可能是一个不错的选择 但我无法向它传递

  • 具有多个数据库服务器的 ServiceStack OrmLite

    我正在围绕服务堆栈框架构建一个应用程序 并且需要能够访问 Oracle 和 MS Sql Server 中的数据 使用 ORMLite 是否可以做到这一点 似乎我只能为应用程序设置一种方言 或者我错过了什么 是的 这是可能的 并且对此的支持

  • 在 Spring Boot 中全局启用 CORS

    我尝试像这样全局启用 CORS Configuration ComponentScan com example EnableWebMvc public class OriginFilter extends WebMvcConfigurerA

  • 无法在装饰器中捕获 pytest 的结果

    我的 pytest 测试装饰器在调用函数后立即退出装饰器 如果我使用 python 而不是 pytest 运行该文件 效果会很好 这是代码 def dec func def wrapper args kwargs print do some

  • JFreeChart 不会在线程上的每次迭代时显示图形？

    我使用线程在一个类中获取计数器值并写入JFreeChart在另一个线程中 执行时 它交替工作 但只显示最后的图形 它还将 y 轴标签值显示为 Float 但实际检索值是 int 我该如何解决这些问题 XYDataset Dataset Ti

  • 在 Rails 中，哪里是放置需要“随处”可用的方法的正确位置

    我已经将许多小实用方法 例如用于重新格式化或解析字符串等简单对象 放入了 ApplicationHelper 中 但是 模型中的类方法显然无法访问 ApplicationHelper 方法 有一个解决方法 那就是在我的项目中进行洒水 inc

  • 在 Java 中动态加载模块（类）的最佳方法

    我目前正在编写一个需要在不同类型的设备上运行的应用程序 我的方法是制作一个 模块化 应用程序 可以根据需要操作的设备动态加载不同的类 为了使应用程序易于扩展 我的目标是为附加模块 jar 或 class 文件 分配特定路径 而核心程序保持原

  • 如何获取和设置当前网页滚动位置？

    如何获取和设置当前网页滚动位置 我有一个很长的表单 需要根据用户操作 输入进行刷新 发生这种情况时 页面会重置到最顶部 这对用户来说很烦人 因为他们必须向下滚动回到原来的位置 如果我可以在页面重新加载之前捕获当前滚动位置 在隐藏输入中 那么

  • 如何列出包中的所有类和方法/函数 - 具有完整的文件夹/文件路径？

    为了更好地理解包的结构 假设我们有一些包 模块 比如说 somemodule 结构如下 somemodule file1 py fo x a function file2 py bar x a function dir1 file3 py

  • 在 Rails 应用程序中实现投票的最佳方式？

    目前在 Rails 站点上实现投票的最佳插件是什么 我知道的两个是 vote fu http github com peteonrails vote fu 行为可投票 http github com ryanto acts as votab

  • JPA CriteriaBuilder 案例查询

    任何人都可以提供如何使用编写案例查询的示例CriteriaBuilder 以下是使用的示例案例表达式CriteriaBuilder 这适用于 JPA 2 Hashtable caseTable new Hashtable 3 caseTab

  • Jquery视差滚动效果-多方向

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

热门标签