文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

那些前端常用的网站插件

Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js...— 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js — web 语法高亮 Chart.js — 使用 JavaScript... — CSS 实现动画过渡的 jQuery 插件 Barba.js — 流式页面过渡 TwentyTwenty — 一个对比图片的可视化 diff 工具 Vivus.js — 在 SVG 上绘制动画 Wow.js... — 滚动时展现动画 Scrolline.js — 页面滚动时显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画...Typeahead.js — 搜索补全 Dragdealer.js — 炫酷拖拽 Bounce.js — 创建炫酷的 CSS3 动画 Pagepiling.js — 全屏滚动 Multiscroll.js

5.4K50

2019年最全的web前端知识体系汇总

: · Fullpage.js—快速实现全屏滚动特性: · Highlight.js—web 语法高亮: · Waypoints.js—滚动到某个元素位置时触发一个功能: · Typed.js—打字机效果...—一个基于动画和平移的雪碧图库 · Animsition—CSS 实现动画过渡的 jQuery 插件 · Barba.js—流式页面过渡 · TwentyTwenty—一个对比图片的可视化 diff 工具...· Vivus.js—在 SVG 上绘制动画 · Wow.js—滚动时展现动画 · Scrolline.js—页面滚动时显示滚动进度 · Velocity.js—快速流畅的 JavaScript 动画...—又一个页面滚动库 · Parallax.js—对智能设备方向变化做出响应的视差引擎 · Typeahead.js—搜索补全 · Dragdealer.js—炫酷拖拽 · Bounce.js—创建炫酷的...CSS3 动画 · Pagepiling.js—全屏滚动 · Multiscroll.js—两列垂直反向滚动 · Favico.js—动态 favicon · Midnight.js—固定头部切换效果

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

    jq---方法总结

    什么是jQuery 在使用jQuery之前，我们必须先了解什么是jQuery，它能够干什么(不然我们为啥要用它)。 jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。...A $A.wrap( $B ); // 在$A的外侧包裹$B $A.unwrap( ); // 只移除$A的父元素的标签 $A.wrapAll( $B ); // 在整个$A的外侧用单个$B将其包裹起来...*/ $("selector").slideDown(); // 显示隐藏的元素，带有向下滑动的过渡动画效果 $("selector").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果...$("selector").slideToggle(); // 切换显示/隐藏的元素，带有向上/下滑动的过渡动画效果 $("selector").fadeIn(); // 显示隐藏的元素，带有淡入的过渡动画效果...设置所有匹配元素的css样式"width: 200px; height: 100px"，并执行一个当前样式到指定样式的过渡动画效果 // 动画的执行时间为 1000 毫秒 $("selector").

    3.8K20

    React 动画真的难吗？我用一个库解决了困扰大半年的性能问题

    一个同事曾经这样评价我之前做的一个 React 后台系统："功能不错，但感觉就像是一个 Excel 表格。" Excel 表格。 那一刻我意识到，UI 动画根本不是锦上添花，而是基础体验的一部分。...问题是，如何在 React 中优雅地实现这些动画？纯 CSS？事件回调？还是第三方库？... 这样做有几个好处： 集中管理：所有动画参数在一处定义 一致性：整个应用的动画风格统一 易于维护：改动时只需改一个地方 在阿里巴巴国际站的一个项目里，我们就是用这套 Variants...正确做法： 只给关键交互元素加动画 用 shouldReduceMotion 检测用户偏好 考虑用虚拟滚动优化长列表 和 CSS 的真实对比 这是个常见的争议：Framer Motion vs CSS...总结：为什么这值得你投入时间 如果你现在还在用纯 CSS 或者 jQuery 时代的动画方案处理 React 的复杂交互，你在浪费开发时间，同时用户也能感受到体验的差异。

    21610

    CSS vs JS动画：谁更快？

    我的建议是：当你只在移动平台上开发，并且动画只是简单的状态切换，那么适合用纯 CSS transition。在这种情况下，transition 是高性能的原生支持方案。...相反的，Velocity 在 zip 压缩之后只有 7kb，它不仅仅实现了 jQuery animate 方法的所有功能，还包含了 颜色、transforms、loop、easings、class 动画和滚动动画等功能...简单的说就是 Velocity 包含了 jQuery、 jQuery UI 和 CSS transition 的功能。...更进一步从易用性的角度来讲，Velocity 使用了 jQuery 的$.queue() 方法，因此可以无缝过渡到 jQuery 的$.animate()、$.fade()和$.delay()方法。...在结束之前，请记住一个高性能的 UI 绝不仅仅是选择一个正确的动画库。页面上的其他代码也需要优化。

    2.7K20

    好玩又实用的19个JavaScript动画库

    前言 今天我们来看看2019年的一些伟大的JavaScript动画库。在2002年左右，我们使用Flash来制作网络动画。...它可以与jquery一起使用，也可以不使用jquery。它的速度非常快，它具有彩色动画、转换、循环、测量、支持SVG和滚动功能。它是jquery和css转换的最佳组合。 ?...资源地址 TweenJS 一个简单但功能强大的JavaScript库，用于在HTML5和JavaScript属性之间切换和设置动画。独立工作或与画架集成。 ?...资源地址 MoveTo 一个没有任何依赖关系的轻量级滚动动画JavaScript库。 ? 资源地址 Motio 用于简单但功能强大的基于sprite的动画和平移的小型JavaScript库。 ?...资源地址 Particles.js 用于创建粒子的轻量级JavaScript库。 ? 资源地址 AOS AOS（动画在滚动）比JavaScript更依赖于CSS。 ?

    3.9K11

    jquery无缝隙连续滚动代码

    通常我们在做网页布局的时候，客户为要求在某个地方实现图片滚动或文字滚动的展示，这就是所谓的跑马灯效果，在以前蓝叶用html标签marquee来做跑马灯效果，marquee不是很完美，如果一个层的宽度或高度过长...，那么中间会用空隙显得很不美观；现在蓝叶用jquery无缝隙连续滚动代码来实现跑马灯效果，这段jquery无缝隙连续滚动代码可以自由设置，向左、向右、向上、向下的滚动效果，如果你需要就把以下代码复制到你需要的地方...，稍微进行修改即可使用了，这是一段jquery代码，需要jquery库的支持才行。...$("#gdtw").imgscroll({ speed: 40, //图片滚动速度 amount: 0, //图片滚动过渡时间 width...: 1, //图片滚动步数 dir: "left" // "left" 或 "up" 向左或向上滚动 }); });

    8.7K30

    前端组件库_前端组件库有什么好处

    jQuery 标签系统插件 10.8 自动完成插件 At.js – 一个Twitter/微博样式的@自动完成插件 jquery-textcomplete – 智能搜索提示框/自动补全 10.9 样式修正...pagePiling.js – 全屏滚动效果 13.13 分屏滚动 multiscroll.js – 分屏滚动效果 13.14 转场效果 Animsition – 页面切换时的过渡效果 13.15 固定元素...13.17 拖拽组件 Draggabilly – 专注于拖拽功能的 JS 库 13.18 隐藏或展示页面元素 Headroom.js – 在不需要页头时将其隐藏 Readmore.js – 内容显示与隐藏插件...动画 animate.css – A cross-browser library of CSS animations....Transit – CSS transitions and transformations for jQuery Move.js – 简化CSS3动画的JS库 ScrollMe – 在网页中加入各种滚动动画效果

    7.7K10

    06-移动端开发教程-fullpage框架

    CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。...1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。 主要功能有： 支持鼠标滚动。 支持前后退和键盘控制。...支持css3动画。 支持窗口缩放。 窗口缩放时自动调整。 可设置滚动宽度，背景颜色，滚动速度，循环选项，回调，文本对齐方式等。...在初始化全屏插件的时候，有很多设置项。...配合fullpage的onLeave事件，可以实现在上一屏离开的时候，给下一屏添加动画样式类，并把上一屏的动画样式类去掉。动画样式类可以提前记录在一个数组中或者是放到动画元素的自定义属性中。

    6.4K50

    jQuery 快速入门教程

    jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。...").slideDown(); // 显示隐藏的元素，带有向下滑动的过渡动画效果 $("selector").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果 $("selector...").slideToggle(); // 切换显示/隐藏的元素，带有向上/下滑动的过渡动画效果 $("selector").fadeIn(); // 显示隐藏的元素，带有淡入的过渡动画效果 $("selector...你可以使用animate()方法设置CSS样式，并执行一个从当前样式到指定样式的过渡动画效果。...// 设置所有匹配元素的css样式"width: 200px; height: 100px"，并执行一个当前样式到指定样式的过渡动画效果 // 动画的执行时间为 1000 毫秒 $("selector"

    15.2K30

    06-移动端开发教程-fullpage框架

    CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。...1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。 主要功能有： 支持鼠标滚动。 支持前后退和键盘控制。...支持css3动画。 支持窗口缩放。 窗口缩放时自动调整。 可设置滚动宽度，背景颜色，滚动速度，循环选项，回调，文本对齐方式等。...在初始化全屏插件的时候，有很多设置项。...配合fullpage的onLeave事件，可以实现在上一屏离开的时候，给下一屏添加动画样式类，并把上一屏的动画样式类去掉。动画样式类可以提前记录在一个数组中或者是放到动画元素的自定义属性中。

    6.6K90

    HTML之marquee(文字滚动)详解

    1️⃣  标签简介 是 HTML 中实现文字或图片滚动效果的标签特点：可以让文字或图片水平或垂直滚动仅适用于简单动画注意：该标签 已被 HTML5 弃用，现代网页推荐使用...CSS 动画或 JavaScript 替代<marquee>这是滚动文字示例</marquee>2️⃣ 基本属性属性说明示例direction滚动方向left / right / up /... → 鼠标移出事件5️⃣ 注意事项与替代方案HTML5 已弃用：不推荐在现代网页中使用 替代方案：CSS 动画（@keyframes + transform）JavaScript /...jQuery 滚动效果CSS 滚动示例：<div class="scroll-text">这是CSS滚动文字</div><style>.scroll-text {display: inline-block...6️⃣ 总结 用于文字或图片滚动，支持 方向、速度、行为、循环 等属性已被 HTML5 弃用，不推荐用于生产环境现代替代方案：CSS 动画 + JavaScript，功能更强大https

    59010

    记几处原生JS的开发 原

    我先用jquery实现的功能，然后替换里面几个方法即可 ，无非就是查找，添加class等！ 在控制台先测试好，直接使用就行了，但遇到以下问题，简单记一下： 0、项目引用了prism.js来加亮代码。...先想肯定是阴影或变形引起的吧，就把css中的shadow去掉，还不行。就一块块的去CSS代码。在把透明度去掉，就好了！...frm得到的竟然直接是一个window对象，我的个天呀！  在chrome，ff中， 可不是这样，我还没有去百度原因，不知道有没有什么说法没有。...以前很少写动画的功能，一是没必要太花哨，二是用css3有时能解决一下问题（虽然css3我也不熟，今天才动手实践了一下）。...这次要滚动一下body，我想这个就完全不能用css3了吧，那就动手写一个定时计算吧，总要动手做一次嘛！

    2.4K20

    transform、transition方法详解及scale、zoom差异性说明

    ，在参数中分布指定水平方向上的倾斜角度与垂直方向上的倾斜角度。...方法来实现文字或图像的移动处理，在参数中分布指定水平方向上的移动距离与垂直方向上的移动距离。.../*水平方向、垂直方向移动50px*/ transform: translate(50px, 50px); /*只在水平方向移动50px*/ transform: translate(50px); CSS3...动画过渡 Transitions 将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。...duration：表示在多久时间内完成属性值的平滑过渡 timing-function：表示通过什么方法进行平滑过渡，缓动函数 delay： 表示指定变换动画特效延迟多久后才开始执行（当触发特效后，经过

    4.6K21

    Web高性能动画及渲染原理（1）CSS动画和JS动画

    如果CSS代码中只包含一般的静态选择器（指CSS代码中不包含能够造成HTML元素状态变更的选择器），那么被渲染出的元素在整个生命周期中就只会拥有一个关键帧，也就是首次被渲染时的样式，而1个关键帧或是2个没有样式差异的关键帧都无法进行插值计算...综上可知，animation是一种强制执行的动画，既对transition过渡动画失效的场景进行了补充实现，同时也增加了动画细节的可定制性（例如循环动画或往复动画的实现），但它的功能扩展仍然是针对单过程动画的...，另一方面，JS代码运行在主线程之中，主线程的实时工况会对动画的流畅度造成极大影响，而CSS动画则不必担心。...1.3 小结 所以综上可知，动画的编写姿势，实际上就是在CSS的简洁性和JS的细节控制力之间找到一个平衡点。...使用Velocity.js实现动画 velocity.js是一个非常易用的轻量级动画库，它包含了jQuery中$.animate( )方法的全部功能，但是比jQuery更流畅。

    8.6K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券