js效果网站(javascript网页特效经典300例) 收藏 0

42款经典JavaScript前端框架库，开发的瑞士军刀，随需随取

Vue.js

Vue.js 是一个免费且紧凑的开源库，可快速构建用户界面（尤其是单页 Web 应用程序）。尤雨溪于 2014 年开发 Vue.js，在 2019 年前端框架排名中获得第 2 名，2020年09月18日 Vue.js 3.0 正式发布，主推微软 TypeScript 语言编程。

Vue 中文学习资料和视频教程都非常齐全，在国内是第一人气前端框架。阿里巴巴和GiteLab都在使用Vue

React

React 是一款开源 JavaScript 库，用于构建 Web 界面。其特点是轻量级，独立，可重用创建前端UI代码。目前由 Facebook 维护和开发React，因此你不必担心React的安全性。 Facebook、Twitter、Netflix、WhatsApp 等大公司都在使用React。

AngularJS

AngularJS 与 React 和 Vue 两个框架差不多，可轻松构建网页和移动应用程序。受到谷歌、福布斯、IBM、微软等众多大公司的青睐。

jQuery

jQuery 是一款轻量化、免费、开源的库，也是最早的前端库之一，为开发提供了许多功能，例如 AJAX、操作 DOM（CSS、HTML）、处理事件、动画效果等。

Lodash

Lodash 可轻松处理 JavaScript 中与数组、字符串、数字、对象相关的问题。

Anime.js

Anime.js 是一个处理动画的库，利用 CSS 属性、SVG、DOM 属性、JavaScript 对象等，可快速构建动画。

AOS

AOS 可在用户滚动网页时为网站元素创建动画效果。

Popper

Popper 库只有3kB 左右大小，有了它可以提高网站速度，常和时下流行的 Bootstrap、Foundation、Material-UI等合并使用。

Owl Carousel 2

Owl Carousel 2 是一个开源库，可轻松实现轮播效果。Owl Carousel 2拥有超过 60 种不同类型的轮播样式，具有自动播放功能、视频可用性、自定义运动效果等设定。

D3.js

D3.js 利用 SVG、Canvas、HTML 进行数据可视化和渲染。每周 通过 npm 下载都会超过 100 万次以上。但其缺点是，初学者上手有难度，也不支持IE8 等较旧的浏览器。

DarkModeJS

DarkModeJS 是实现夜间模式的库。可创建CSS样式文件，然后由用户切换到所需模式。

eChart.js

数据可视化的图表库。

SweetAlert

SweetAlert 是一款高效且美观的网站通知库。

Highlight.js

Highlight.js 是一款突出显示文字的库，其优势是，独立于任何框架；能够自动检测您网站上的语言；支持超过 189 种流行的编程语言；提供了 94 种以上的样式。

VideoJS

VideoJS 是基于 HTML5 视频平台构建的视频播放器，支持多种格式，例如 YouTube 和 Vimeo 流媒体。其开发于 2010 年左右。其优点：设计美观，多种样式主题，可在电脑和手机上运行。

Moment.js

利用 Moment.js 处理日期和时间变得容易。

PixiJS

利用最快速、最灵活的 2D WebGL 渲染器构建的数字内容。

Webpack

Webpack 静态模块打包工具。

fullPage.js

fullPage.js 可为网站创建全屏滚动。

Howler.js

Howler.js 只有 7KB 大小，可处理网页音频。通过 API 和 HTML5 Audio 的结合，可运行在许多平台和网络浏览器上，包括 IE9 和 Cordova。Howler.js 的优点：支持众多的文件类型，如 MP3、MPEG、OPUS、OGG、OGA、WAV、AAC、CAF、M4A 等，其自动缓存有助于提高网站的性能以及服务器的带宽。

Masonry

可创建复杂的网格布局。

Screenfull

Screenfull 有助于将元素或网页转换为全屏模式。

particles.js

Particles.js 可为网站创建和优化漂亮的背景。

Leaflet

Leaflet 用于与移动设备上的地图进行交互。

SortableJS

SortableJS 可为 HTML5 添加拖放功能。

Clipboard.js

Clipboard.js 可以快速将网页内容复制到剪贴板。

Underscore.js

Underscore.js 提供了 100 多个函数，支持您最喜欢的日常功能助手：map、filter、invoke等。

Cleave.js

input当用户输入信息时，Cleave 可以很容易地重新格式化元素。

Share

Share库可轻松实现分享功能。

Chardin.js

Chardin.js 库可在网页上显示组件的说明。

Flip

Flip 可轻松地创建翻转效果的计数器。

Image Compare Viewer

Image Compare Viewer 可实现在网页上比较两个图像的功能。

Notyf

Notyf 仅有3KB大小，用于创建 Toast 通知。易于与流行的 JS 框架（如 React、Angular、Aurelia、Vue 和 Svelte）一起使用。

Dinero.js

Dinero.js 提供与货币相关的功能。

SimpleParallax.js

SimpleParallax.js 用于创建简单易行的视差效果。

Duet Date Picker

Duet Date Picker 是由 Duet Design Systems 开发的开源代码。实现日期选择器组件的功能。

Print.js

Print.js 是一款打印库，其支持多种格式的打印，例如 PDF、HTML（例如表单）、图像、JSON 等。此外，可以大多数流行的浏览器上运行，例如 Chrome、Firefox、Safari、Edge 和 Opera。

Mathjs

Mathjs 是一款开源数学库，在 Github 上为 JavaScript 和 Node.js 拥有超过 10.5 万颗星。其可灵活计算和处理许多不同的数据类型，例如数字、大数、复数、分数、单位和矩阵等。

PROGRESSBAR

PROGRESSBAR 是一款进度条的库。

Quill

Quill 一款强大的富文本编辑器。

VALIDATE.JS

VALIDATE.JS 提供验证功能的库。

Mocha

Mocha 是一款功能丰富的 JavaScript 测试框架。

最后

希望这篇文章能为那些前端开发的工程师带来帮助。

不要忘了关注我的频道，祝大家好运！

让网站动起来的js库，真漂亮，再也不用写复杂的动画了~wow.js

越来越多的网站特效很漂亮，其中就有一种我很喜欢的动画，就是当滑动到某个元素的时候，元素就是出现动画效果，如：缩放、旋转、滑动等。感觉很漂亮，之前在做企业站的时候，基本上都是自己手写的，有点麻烦而且效果也不是很好，最近发现了一款比较好用的动画库~~~~wow.js，可以轻松的网站具有这种特效。感受一下吧

Wow.js 的动画效果依赖于第三方库，官方推荐的是： Animate.css

当然也可以使用其它的动画库，需要配置一下 wowo.js。这里就以 Animate.css 为例展开介绍了。有兴趣的同学可以尝试使用一下其它的动画库。

• 引入动画库

• 引入并且使用 wow.js

• 配置一下需要使用动画的元素，为元素的class属性添加一个名为 .wow 的class样式

• 从 Animate.css 选择要使用的动画效果

至此，就已经添加好了一个效果了

可以针对时间、延时等一些配置做具体的修改

还可以通过js一些属性

boxClass: 给需要动画效果的元素 设置的class名称，默认是\”wow\”

animateClass: 需要提供动画的库，默认是由 animate.css 提供

offset: 定义距底部还有多少距离时触发动画效果

mobile: 开启是否在手机上使用动画效果

wow.js 使用的 MIT 开源协议，可以免费的使用，不过你的软件如果是有专利或者需要付费的，请记住在您的产品中包含MIT许可证的全部内容。

wow.js 是一款不错的js特效库，可以方便地给元素添加上滑动出现的效果。大大提高了网站的美观和交互性，并且降低了开发时间和成本。

关注我，分享给您实用的前端知识和优秀的组件库~~

强烈推荐6个让人惊艳的宝藏网站

1优品PPT

一个有情怀的免费PPT模板下载网站。

非常多的模板及素材，包括PPT模板、PPT背景、PPT图表、PPT素材、PPT教程、节日PPT、字体库、PPT课件等。有经常做PPT需求的人必备，可以省下非常多的时间，而且还能达到非常精美的效果。重点全免费！！！

优品PPT

2今日热榜

这个网站几乎集合了所有平台的实时热榜，更快地查看热点信息，免去平时多个app/网站来回切换的痛；上方还将网站进行分区：科技、娱乐、社区、购物、财经、开发、校务、政务等分区。它支持订阅，可以将自己常看的设为订阅，非常方便。

今日热榜

3拷贝兔

拷贝兔可以实现跨设备间文件或者文本临时性快速分享，是一款比较实用的工具。

它支持在Mac、Windows、Linux、ios、Android等设备使用。快速完成原先耗时且繁琐的分享操作。

拷贝兔

文件或文本上传后，会自动生成二维码和提取码，要接收的设备可以用浏览器扫一扫直接扫码获取文件/文本，或者用浏览器打开拷贝兔网站，输入对应提取码获取文件/文本。

拷贝兔

4广告人的网址导航

广告人必备的网站，国内外广告人常用的近400个网站都聚合在一个网站上，大大提高广告人获取资讯，找创意，看案例的工作效率。有做设计的朋友强烈推荐使用。它支持收藏网站，可将里面常用的网站收藏起来，不用每次去找。

广告人的网址导航

5 AI人工智能图片放大

使用最新的人工智能深度学习技术——深度卷积神经网络。它会将噪点和锯齿的部分进行补充，实现图片的无损放大。

放大效果非常出色, 色彩保留较好, 图片边缘也不会有毛刺和重影，无噪点。

AI人工智能图片放大

动漫、插画图片的放大几乎可以说是完美的。将小图片放大后，无论是色彩、细节、边缘，效果都很出色。同时也兼容普通的照片放大。无需注册/登陆，高级功能需付费。

前后对比

6在线批量压缩图片

完全免费，独特且强悍的JavaScript算法，能极速压缩80%的图片体积，而不损害其质量。

它支持JPG/JPEG图片格式、无图像尺寸限制、无图像数量限制、无文件大小限制。

在线批量压缩图片

前后对比

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com