程序员经验分享-hwhale

将 CSS3 动画/变换与滚动事件链接起来

2024-04-04

我正在寻找一种将 CSS3 过渡链接到滚动事件的方法。我正在寻找类似的功能http://nizoapp.com/ http://nizoapp.com/，当您到达页面上的某个滚动点时，某些元素会移动。我知道你必须使用 jQuery 调用滚动事件（使用偏移和滚动），但我很好奇是否有办法使用 CSS3 来实现动画部分，或者是否需要在 jQuery 中完成。不管怎样，我希望得到一些帮助来帮助我快速开始工作。谢谢您的帮助。


一个好的起点可能是jQuery Waypoints 插件 http://imakewebthings.github.com/jquery-waypoints/。每当您滚动到某个元素时，它都可以轻松执行函数，并且还可以根据当前视图中的内容应用类。然后您可以使用它们来触发您想要的 CSS 动画。

UPDATE- 我刚刚遇到卷轴画 http://johnpolacek.github.com/scrollorama/jQuery 插件。作者确实声明它尚未经过彻底测试，但它的设计目的正是为了实现您所追求的目标，并且看起来绝对是一个很好的起点。

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

jQuery

Animation

css

scroll

将 CSS3 动画/变换与滚动事件链接起来 的相关文章

  • Ajax 没有将我重定向到下一页

    我正在尝试将单击的图像的 ID 传递到下一页 当我开发代码时 它没有将我重定向到下一页 当我单击 F12 并检查网络中的 POST 时 它显示变量已正确传递到下一页 如附图所示 但它没有将我重定向到下一页 所以现在我知道变量在下一页中正确传

  • 如何在文本区域中使用除“文本插入符号”之外的透明字体？

    我有一个简单的文本区域 我需要制作透明字母 同时允许文本插入符可见 当我应用以下规则时 我会得到隐形插入符 textarea background transparent opacity 0 当我键入不可见文本时 我需要看到文本插入符移动

  • jquery select 如果 option.value 等于某个值，则标记为选中

    我有一些关于 jquery 选择的问题 就我而言 如果option value等于某物 标记 aselected为了它 在线代码在这里 http jsfiddle net WnEfJ 再次重复代码 它引起了Uncaught TypeErro

  • 如何禁用“您是否只想查看安全传送的网页内容”警告？

    我的网站有完整的 https 及其使用外部 jquery 资源 即 http 在 IE 8 中 当我重定向网站时 它给了我 您只想查看安全传送的网页内容 警告 如何避免这种情况 有没有可用的脚本可以解决这个问题 提前致谢 似乎有两个可能的问

  • ExpandableListView 的动画

    是否可以为 ExpandableListView 应用展开或折叠动画 可以使用一个简单的 ListView 来完成 该 ListView 包含最初隐藏的视图和扩展动画的自定义类 基本思想是从View GONE然后逐渐将边距大小从负值调整为所

  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如

  • 取消html5浏览器中的单图请求

    我正在动态加载 大 图像以绘制到 html5 画布中 如下所示 var t new Image t onload t src http myurl 但每隔一段时间就会想取消图片请求完全地 我想出的唯一方法是设置src to i e t sr

  • jQuery 插件不能很好地与 Angularjs 配合使用

    我用过jQuery 滑块在我的项目中 我使用 Angular 加载图像 我目前的观点是这样的 div div class slides container a href img width 919 height 326 alt a div

  • 非 DOM 对象上的 jQuery 自定义事件

    我最近阅读了一些代码 其功能如下 bob name Bob Smith rank 7 bob bind nameChanged function bob trigger nameChanged 这似乎有效 但我在 jQuery 文档或源代码

  • 为什么需要重置浏览器？

    好吧 我知道这可能不是最好的标题why我们需要重置浏览器 因为浏览器有不同的默认设置 我的问题太长 无法放入标题中 如果每个人 90 的时间都需要使用重置样式表 为什么浏览器需要设置默认样式 无论如何我们都会删除它们 对吗 因为某些规则默认

  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend

  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在

  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显

  • 如果链接包含特定文本，jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3

  • 未捕获的错误：找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http

  • 如何在背景剪辑中包含文本装饰：文本；影响？

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip

  • IE 中的 jQuery .width(val) 错误 - 无效参数

    通过ajax加载内部div book table 后 我想调整正文的宽度以适应更大的内容 var new width parseInt book table css width 407 body width new width 在 FF 和

  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如

  • :jQuery / Sizzle 中的 nth-of-type()？

    让我惊讶的是Sizzle http sizzlejs com jQuery 使用的选择器引擎 带有一个内置的 nth child 选择器 但缺少 nth of type 选择器 为了说明之间的区别 nth child and nth of

  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di

随机推荐

  • 移动包含子模块的 git 工作副本

    Git 最近的一项变化改变了 git使用子模块时处理目录 而不是拥有一个 git每个子模块 现在所有内容都位于 根级别 git目录 与包括子模块的工作副本相对应的目录 然后 在每个子模块中 创建一个文件 该文件指向该子模块的新位置 git目

  • 如何在kivy项目中隐藏python代码文件和其他相关文件

    我最近在 Google Play 上发布了一个用 Python Kivy 编写的 Android 应用程序 通常 build py 脚本会将整个项目文件包装到一个文件夹中 即应用程序包文件夹 但是 如果我在安装 apk 后检查手机上这个包的

  • 为什么我们需要 crossCheckMatching 功能？

    我正在阅读很多使用特征提取 sift ecc 进行对象检测的文章 在计算两个图像上的描述符后 为了获得良好的匹配 他们使用了 crossCheckMatching 发现于样本 cpp descritpor extractor matcher

  • 如何在角度6中实现内容显示更多和显示更少

    我们有 6 个内容分区 我们还使用字符限制每个 div 我们使用 Bootstrap 4 Angular 6 版本 6 div 一些切换 div 内容打开 一些关闭 https i stack imgur com dS04r jpg这个案例

  • 如何在 AppKit 上的自定义 SwiftUI 表单中右对齐项目标签？

    我有以下可可形式 struct Canvas PreviewProvider static var previews some View VStack HStack alignment firstTextBaseline Text Endp

  • 如何访问React路由器中的历史堆栈？

    我正在尝试访问反应路由器的历史堆栈 这是我想做的 我使用react js 和react router 创建一个板 如果用户单击板上的列表之一 则会转到详细信息页面 假设用户点击列表中 id 为 3 的文章 react router 会转到

  • 如何让 CameraX 预览在拍照时冻结？

    我的自定义 CameraX 流程如下 打开相机预览 实时 点击按钮拍照 单击该按钮时有一个过程 将路径转换为位图 旋转图像 自动裁剪图像 保存到设备中 运行所有进程并成功后 将图像发送到其他Fragment并将其显示为glide 问题是何时

  • 如何更改所有 UITableViewCell 的背景颜色

    我有一个非常简单的视图控制器 它只有一个UITableView and a UIButton 当点击按钮时 我想改变所有的背景颜色UITableViewCells变为绿色 假设有一些单元格不可见 我使用此循环来完成我需要的操作 IBActi

  • 使用 SQLAlchemy 计算具有条件的行数

    我有一个像这样的 sqlite 表 其中有 3 列 我想要 计算 user id 1 的行数 SQLAlchemy 可以做到这一点吗 class UserImage db Model id db Column db Integer prim

  • mac OSX 10.8.3 文件系统上的 gae 本地数据存储在哪里？

    我已经尝试了这些帖子中的所有建议 有谁知道 Mac OS X 的 Google App Engine 本地数据存储文件位于哪里 https stackoverflow com questions 15753914 does anyone k

  • 添加动态 formControl 时，所有必需输入字段的文本颜色更改为无效颜色

    每当我通过按钮单击添加动态 formControl 时 所需的所有输入字段都会将颜色更改为无效 红色 我的期望是 只有当输入被 触摸 时 表单字段才会更改为无效颜色 并且仅在特定的非全部 我不知道为什么会发生这种情况 我刚刚接触有角度和有角

  • 在 Silverlight 中检测控件的焦点

    有什么方法可以判断某个控件 特别是 System Windows Controls TextBox 是否在 Silverlight 中获得焦点 我正在寻找类似以下内容的内容 您会在常规 Net 应用程序中看到的内容 textBox Focu

  • Swift 3 中的 NSFastEnumeration

    我正在尝试迭代一个对象CMSensorDataList返回的类CMSensorRecorder accelerometerData from to 该类确认NSFastEnumeration协议 所以我尝试了中提到的技巧https stac

  • JUnit 运行测试命令行

    我有以下结构 lib junit 4 10 jar tests Tester java tests Tester class build jar jar file jar 测试器属于包测试 我可以使用编译测试 javac cp build

  • App Engine SDK DevServer 只读模式？

    有没有办法以只读模式运行应用程序引擎开发服务器 以模拟 Google 的定期维护 从而将数据存储区置于只读模式 在定期维护期间优雅降级 http code google com appengine docs python howto mai

  • 如何映射输入文件数组？

    我有两个函数 一个将文件转换为 dataUrl 另一个返回结果的承诺 fileToDataURL file var reader new FileReader return new Promise function resolve reje

  • 我可以使用 <%= ... %> 在 ASP.NET 中设置控件属性吗？

  • 行为相同的条件检查的执行[重复]

    这个问题在这里已经有答案了 我回答了这个问题 https stackoverflow com questions 25234401 which is a better practice for if else condition 25234

  • 使用按钮导航到导航窗口中的另一个页面

    我正在尝试使用 WPF 中的导航命令框架在 WPF 应用程序 桌面 不是 XBAP 或 Silverlight 内的页面之间导航 我相信我已经正确配置了所有内容 但它不起作用 我构建并运行时没有错误 在输出窗口中没有收到任何绑定错误 但我的

  • 将 CSS3 动画/变换与滚动事件链接起来

    我正在寻找一种将 CSS3 过渡链接到滚动事件的方法 我正在寻找类似的功能http nizoapp com http nizoapp com 当您到达页面上的某个滚动点时 某些元素会移动 我知道你必须使用 jQuery 调用滚动事件 使用偏

热门标签