文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

膜拜！用最少的代码却实现了最牛逼的滚动动画！

GreenSock 动画平台 （GSAP） 可为 JavaScript 可以操作的任何内容（CSS 属性、SVG、React、画布、通用对象等）动画化，并解决不同浏览器上存在的兼容问题，而且比 jQuery...在开发过程中启用视觉标记，以准确查看开始/结束/触发点的位置。...在滚动记录器处于活动状态时，如将active类添加到触发元素中：toggleClass: "active" 使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。...gsap.timeline({ // 添加到整个时间线 scrollTrigger: { trigger: ".container", pin: true, // 在执行时固定触发器元素...start: "top top", // 当触发器的顶部碰到视口的顶部时 end: "+=500", // 在滚动 500 px后结束 scrub: 1, // 触发器

2.7K20

膜拜！用最少的代码却实现了最牛逼的滚动动画！

GreenSock 动画平台 （GSAP） 可为 JavaScript 可以操作的任何内容（CSS 属性、SVG、React、画布、通用对象等）动画化，并解决不同浏览器上存在的兼容问题，而且比 jQuery...高级固定功能可以在某些滚动位置之间锁定一个元素。灵活定义滚动位置。支持垂直或水平滚动。丰富的回调系统。当窗口调整大小时，自动重新计算位置。在开发过程中启用视觉标记，以准确查看开始/结束/触发点的位置。...在滚动记录器处于活动状态时，如将active类添加到触发元素中：toggleClass: "active"使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。...gsap.timeline({ // 添加到整个时间线 scrollTrigger: { trigger: ".container", pin: true, // 在执行时固定触发器元素...start: "top top", // 当触发器的顶部碰到视口的顶部时 end: "+=500", // 在滚动 500 px后结束 scrub: 1, // 触发器1

3.1K00
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React从入门到放弃，一个关于网页速度的故事

    我在我的新工作中尝试了 React，并在 Clojure 主题的峰会（Clojure Cup 2013）期间发现 CLJS 和 React 简直是天作之合。React 为什么这么好呢？...当你使用之前的东西，例如 jQuery、Backbone、Angular 或者其它东西，只需一年的开发之后，你的代码就会是一团事件监听器和触发器。...在 Intercooler 中，如果你在 body 中声明ic-target属性，其中的所有标签都会认为它们的 target 也是这个。...在开发者方面，我认为 React 仍然比较好些，但是 TwinSpark 比用 jQuery 在代码封装和组件化方面要好。另外还有很多方法来提升它。 好消息是开发流程没有太大变化！...这也使得我们可以同时拥有 React 和非 React 版本，进行 A/B 测试，而无需编写二次标签。 6 结论 从首次尝试到发布，我们花了 4 个月时间。

    1K20

    2021大厂（阿里、百度、字体跳动、腾讯）前端面试题库

    11.在交互式系统中，非剥夺是不是一个好的策略？为什么？ 12.谈一谈计算机网络和分布式计算机系统的区别 13.为什么要引入多道程序技术？...33.Vue2 中注册在 router-link 上事件无效解决方法 34.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题 35.axios 的特点有哪些 36.请说下封装...2.网页上有5个div元素，如何使用 jQuery来选择它们？ 3.$(this) 和 this 关键字在 jQuery 中有何不同？ 4.使用CDN加载 jQuery库的主要优势是什么？...9.jquery中的选择器和CSS中的选择器有区别吗？ 10.jQuery的特点都有什么？ React 1.什么是React？ 2.React有什么特点？ 3.列出React的一些主要优点。...4.React有哪些限制？ 5.什么是JSX？ 6.你了解 Virtual DOM 吗？解释一下它的工作原理。 7.为什么浏览器无法读取JSX？ 8.如何理解“在React中，一切都是组件”这句话？

    1.8K20

    React 18 之画师登仙！

    忽然，一旁的助手将另一幅画布放在黄衣人面前，他也不停笔，伸出另一只手，用一支一模一样的毛笔在新的画布上开始作画。 一心二用、左圆右方啊，有两把刷子！你到底画的是啥？...正寻思间，助手在黄衣人面前加了一幅画布，只见他双手仍然不停笔，竟从锦袍中伸出第三只手，拿着毛笔在这第三幅画布上作画。 我确信没看错！他确实有三只手，拿着三支笔！...我惊魂未定，助手却又拿出三幅画布，尽数都摆在画家面前。 难道他是三头六臂？我不禁倒吸一口气。 果不出所料，画家又多出三只手，六手六笔在六幅画布上同时作画，没有丝毫地犹豫和停顿。...而在 React 18 里，我们只需要标记好非紧急更新，具体的更新速度和显示内容由 React 根据机器速度自动调节，对于开发者来说是完全透明的。 那么，怎么标记非紧急更新呢？...毕竟，React 是以全面提高用户体验为目标的，与整个开发生态系统的协作是很重要的。 另外，React 18 中的 Suspense 在服务器端也有良好支持。

    43410

    React vs HTMX ，谁更适合你？

    可以嵌入到已存在的 HTML 页面中，但主要用于基于 Javascript 的项目上 社区 小而日益发展 市场上最大的 生态系统 小 极为丰富 如何从 jQuery 走向 React：从 jQuery...到现代 Web 开发框架 在 Web 开发的早期阶段，开发者依赖 jQuery 来处理 AJAX 请求、DOM 操作以及事件处理。...HTMX 是一个轻量级的解决方案，它保有类似 React 的现代交互性，同时具备像 jQuery 那样的简单集成和无负担特性。...HTMX 作为一种流线型和灵活的选择，在由更复杂的前端框架主导的宇宙中，独树一帜。...难以整合到非 JavaScript 项目中。 最后 所以，没有谁最好，只有谁最合适。 大家认为这两个库怎么样呢？欢迎在评论区留言。

    1.4K21

    SVGEdit：老牌开源 SVG 编辑器是如何架构的？

    UI 层 UI 层原本是基于 jQuery UI 的，但后面丢弃 jQuery 改用 Web Component 进行了重构。...顺带一提，有个叫做 jPicker 的基于 jQuery 的拾色器插件，也做了魔改，去掉对 jQuery 的依赖。...LeftPanel 的 init 方法是在 EditorStartUp 类（这个是 Editor 的父类）的 init 方法中被调用的。...各种命令类保存在 svgCanvas.history 中。 简评 UI 框架应该选择 React 或 Vue。 这样项目才会有更多人使用，作为一款比较古早的编辑器才可能焕发第二春。...当然最好 React 和 Vue 都做。 SVGEdit 丢掉 jQuery 用 Web Component，我不是很理解，外国比较流行这个？这样就不好集成进公司的项目中，不利于项目的持续发展。

    76830

    精读《Microsoft Power Fx》

    Power Fx 团队已经有了一些思考： 简单：该语言设计本着简介简单的原则，这样才方便非开发人员上手。...Excel 一致性：可以帮助 Excel 开发者做知识迁移，一部分是和微软 Excel 太成功了有关，另一方面 Excel 表达式在画布语言领域探索确实深入，有可取性。...这个有点像 Jquery 转到 React 模式时，过程式代码与数据驱动代码的区别。 函数式：函数式在灵活性和易用性上有天然优势，且无副作用的特性也利于理解逻辑与编译优化。...这保证了在画布应用编写逻辑的良好体验，因为本身画布应用就是实时的，低代码能力本身也要与画布实时性浑然一体。...讨论地址是：精读《Microsoft Power Fx》· Issue #355 · dt-fe/weekly 版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）

    64230

    前端插件以及部分细分网址梳理

    技术构建 IOS7 程序 regulex: 用于生成 正则表达式 的可视化流程图 markdown-it: 新型 Markdown 解析器，快速，支持插件 multiline: 用于 Javascript 中的多行文本...是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持 jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素...iPhone6 展示页类似的效果，适用于单页应用，兼容到 IE8 scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等)，性能很好 ScrollMagic: 神奇的滚动交互效果插件，可以在滚动的过程中设置各种各样的动态效果...flippant.js: 一款能够漂亮的网页元素翻转效果库，代码许久不更新，不过作为源码学习还是不错的 move.js: 基于 CSS3 的前端动画框架 scrollReveal.js: 使元素以非常酷帅的方式进入画布...的 Angular 插件，可以在 Angular 中使用 React Components material: Google Material Design 效果的 Angular 实现 angular-local-storage

    5.7K90

    WordPress中的jQuery库不起作用的相关问题

    WordPress 中的jQuery 库问题曾经困扰了我一段时间。...如果仅仅加载WordPress 自带的jQuery 库，在使用一些jQuery 插件的时候明明是代码没有错误，但就是不起作用，该有的效果不能实现；但加载了原版的jQuery 库却又可以了，这样一来却同时加载了两个...$ 代替jQuery 的写法不能识别，一些功能不起作用的原因正是由此而来。...如何解决这个问题，网络上有以下解决方案： 方案一：将相关js代码中的$ 手动改为 jQuery。...更新：如果查看源代码分享加载了WordPress 自带的jquery 库，那么肯定是主题或者插件加载的（非登录状态下），因此，按照下面的代码可予以取消（其实就开发而言，不建议这么做）： 你的主题也可能加载也会加载

    4K60

    React学习(九)-React中发送Ajax请求以及Mock数据

    撰文 | 川川 前言 在React中,render函数返回的结果,取决于组件的props和state 我们都知道UI页面上的数据不是写死的,往往是从后端的数据接口中拿到的 然后将真实的数据填充到页面上...在React中,你可以使用你喜欢的Ajax库,例如：Axios,浏览器内置的feach方法,JQuery Ajax,或是第三方库request,下面就逐一来看看的 方式一使用Axios发送Ajax请求...该方式无论是Vue还是React甚至其他一些框架中,都普遍常用,它支持promise方式，在使用axios库之前,应该先在终端下使用npm或者cnpm全局安装一下 npm install -S axios...是一个库,在React中你想要用时,得先安装,使用该方法请求数据不是不可以,但是不推荐 npm install -S jquery 或者 cnpm install -S jquery 然后在你需要请求数据的文件处...是会报错的 换而言之,假数据放置在public目录下,不使用charles等其他代理工具，也能成功,因为在React中的webpack自动的帮你处理了,会自动的找到public目录下的文件 当然除了charles

    4.7K31

    笔记（十九）——安卓混合开发技术点

    Native 非主流：Html5+、AppCan、Jquery Mobile（主要用于做移动Web） 二、移动跨平台方案 移动开发10年历程 React Native、weex、Flutter...1.React Native，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。...3.Flutter，是谷歌的移动UI框架，使用Dart语言开发，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。 ?...首先第一点，也是最本质的区别：Flutter 使用系统级 API 进行渲染，客户端仅需要提供一块画布就可以支持应用展示。这一点使其脱离了原生的渲染，让我们可以获得高度一致的渲染体现。...除了一致性以外，Flutter 大量利用了 GPU 绘制的 Skia 图形引擎，在渲染速度和动画效果上都给出了更有体验。

    1.1K20

    React基础(9)-React中发送Ajax请求以及Mock数据

    image.png 前言 在React中,render函数返回的结果,取决于组件的props和state 我们都知道UI页面上的数据不是写死的,往往是从后端的数据接口中拿到的 然后将真实的数据填充到页面上...在React中,你可以使用你喜欢的Ajax库,例如：Axios,浏览器内置的feach方法,JQuery Ajax,或是第三方库request,下面就逐一来看看的 方式一使用Axios发送Ajax请求...该方式无论是Vue还是React甚至其他一些框架中,都普遍常用,它支持promise方式，在使用axios库之前,应该先在终端下使用npm或者cnpm全局安装一下 npm install -S axios...是一个库,在React中你想要用时,得先安装,使用该方法请求数据不是不可以,但是不推荐 npm install -S jquery 或者 cnpm install -S jquery 然后在你需要请求数据的文件处...中提供的方法Ajax请求数据,我们只需要请求一数据,但却要把整个jquery库都给引入进来,这个按照当今的按需加载模块化开发的话，是非常不合理的，于是就有了fetch,和axios的解决方案 在React

    2.2K30

    组件注册与画布渲染

    只要注册了组件元信息与组件树，可视化搭建的画布就可以渲染出来了，这很好理解。...对于画板工具软件，如果不考虑布局等复杂的画布功能，该结构描述足以完成大部分工作的技术抽象：配置面板修改组件实例的 props 属性，甚至布局位置也可以存储在 props 上。...因此要给组件 props 注入函数，需要定义在组件元信息上，由于其定义了额外的 props 属性，且不在组件树中，所以我们将其命名为 runtimeProps: const divMeta = {...但这只是可视化搭建的第一步，在真正开始做项目后，你还会遇到越来越多的问题，比如除了渲染画布，还要在业务层定义属性配置面板、组件拖拽列表、图层列表、撤销重做等等功能，这些功能如何拿到画布属性？...版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）

    1.3K20

    Vue常识面试题

    （组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件2.组件化的优势 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间...是不是先要获取到DOM然后在....干点啥 四、Vue跟传统开发的区别 没有落地使用场景的革命不是好革命，就以一个高频的应用场景来示意吧注册账号这个需求大家应该很熟悉了，如下 用jquery来实现大概的思路就是选择流程...，Jquery操作DOM 五、Vue和React对比 这里就做几个简单的类比吧，当然没有好坏之分，只是使用场景不同 相同点 都有组件化思想 都支持服务器端渲染 都有Virtual DOM（虚拟dom...react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数 diff算法不同。...在Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。

    2.2K30

    (转载非原创)React 并发功能体验-前端的并发模式已经到来。

    在Concurrent Mode 下，React可以暂停高消耗的，非紧急的组件的渲染，并聚焦在更加紧迫的任务处理，如UI 渲染，始终保持应用为可响应式，避免白屏，卡顿等现象。...下图描述了卡顿现象： 在等待非紧急 API 调用完成时，UI 卡顿，从而阻止呈现用户界面。解决方案是使用并发模式进行可中断渲染。...React开发人员建议将懒加载组件包装在Suspense组件中。 这样做可确保组件在渲染时不会出现“不良状态”。用户界面在整个过程中保持响应，并带来更流畅的用户体验。...本文以像素应用为例在150*150的画布上随机分布像素并包含一个搜索框，每次用户点击搜索框时候，画布会重新渲染自己。 即使UI 界面无法在并发模式下渲染，用户输入也不会停止更新。...像素画布在处理完成后重新渲染。在传统模式下，快速键入时，UI 会停止，有时会在再次渲染画布之前停止。用户输入也会停止并且不会更新。 构建像素应用程序的主要文件是 canvas.js。

    5.9K00

    React 并发功能体验-前端的并发模式已经到来。

    在Concurrent Mode 下，React可以暂停高消耗的，非紧急的组件的渲染，并聚焦在更加紧迫的任务处理，如UI 渲染，始终保持应用为可响应式，避免白屏，卡顿等现象。...下图描述了卡顿现象： 在等待非紧急 API 调用完成时，UI 卡顿，从而阻止呈现用户界面。解决方案是使用并发模式进行可中断渲染。 ?...React开发人员建议将懒加载组件包装在Suspense组件中。 这样做可确保组件在渲染时不会出现“不良状态”。用户界面在整个过程中保持响应，并带来更流畅的用户体验。...本文以像素应用为例在150*150的画布上随机分布像素并包含一个搜索框，每次用户点击搜索框时候，画布会重新渲染自己。 即使UI 界面无法在并发模式下渲染，用户输入也不会停止更新。...像素画布在处理完成后重新渲染。在传统模式下，快速键入时，UI 会停止，有时会在再次渲染画布之前停止。用户输入也会停止并且不会更新。 构建像素应用程序的主要文件是 canvas.js。

    6.3K20

    这 5 个前端组件库，可以让你放弃 jQuery UI

    无论应用中需要的是日历，滑块，图形或其它用于提升或简化用户交互的组件，那么都面临两种选择：要么自己来创建这些组件，要么使用现有的组件功能。...虽然jQuery UI能起到很好的作用，但是还有其它的一些框架，拥有很好的高品质控件。在这篇文章中，将会分析其中的几个框架并做比较。...有趣的一点是，Wijmo 5构建在更现代化的标准之上，因此在IE8上不起作用，此时就需要Wijmo的旧版本。Wijmo 3是基于jQuery，所以它支持直到在IE6上使用。...另外，值得一提的是JQWidget支持React，Angular甚至ASP .NET组件。如果你倾向于其中一个，那么这个框架会为你节省很多时间开发。...如果用于非商业用途，jQuery EasyUI是免费的，但如果用于开发，则需要授权。 总的来说，EasyUI是一个坚实的框架，但是网站和文档比较旧。

    5.3K20

    React学习(四)-理清React的工作方式

    JS,JQ中,通过内联方式添加事件,是不推荐的,然而在如今的一些面向数据编程,例如React,Vue等框架中,这一方式却得到了支持与延续,要从面向DOM编程转移到面向数据编程 React实现 import...至少在没有出现React,vue,Angular等这些框架之前,它仍然是霸主统治性地位存在的,然而现在真的不得不说,它的确是在走向落寞....它只会修改数据变化的的DOM部分,并不需要去关心怎么去操作DOM 如下图所示 在React中，对JSX元素上添加事件,是通过on*EventType 这种内联方式添加的,不需要手动调用浏览器原生的 addEventListener...进行事件监听,在React中,它已经帮我们封装好了一些事件类型属性（onClick,onChange,onFocus,obBlur等） 当需要给某个JSX元素监听事件的时候,只需要通过内联方式,在React...分别用原生JS,JQ,React进行了实现,在React中UI视图取决于render函数返回的内容,数据是什么,就让页面显示什么,无需关注DOM操作,并且React引入了虚拟DOM 它是对DOM树的一种抽象

    1.8K30

    React基础(4)-理清React的工作方式

    JS,JQ中,通过内联方式添加事件,是不推荐的,然而在如今的一些面向数据编程,例如React,Vue等框架中,这一方式却得到了支持与延续,要从面向DOM编程转移到面向数据编程 React实现 import...它只会修改数据变化的的DOM部分,并不需要去关心怎么去操作DOM 如下图所示 在React中，对JSX元素上添加事件,是通过on*EventType 这种内联方式添加的,不需要手动调用浏览器原生的 addEventListener...进行事件监听,在React中,它已经帮我们封装好了一些事件类型属性,当需要给某个元素监听事件的时候,只需要通过内联方式,React元素上加on*EventType就可以了,注意这里事件类型的写法,驼峰式命名法...也就是说， 这样的写法是不起作用的 如果想要做到这一点,在组件标签上监听事件起作用,也可以做到,就是结合第三方模块styled-components样式组件进行使用...React数字框组件应用开始,分别用原生JS,JQ,React进行了实现,在React中UI视图取决于render函数返回的内容,数据是什么,就让页面显示什么,无需关注DOM操作,并且React引入了虚拟

    2.1K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券