程序猿必备的10款web前端动画插件一

1.动画SVG框架幻灯片

在幻灯片之间切换时显示动画SVG帧的实验性幻灯片。不一样的形状能够用来建立各类风格。

咱们想和你们分享一个实验幻灯片。咱们的想法是在从一个幻灯片转换到另外一张幻灯片时，使SVG帧动画化。使用不一样的形状，咱们能够在改变SVG路径时建立各类框架样式。这个想法的灵感是基于Dribbble拍摄：06章太平庸。咱们使用的是anime.js的动画。

在线演示

源码下载

2.WebGL的背景装饰

使用WebGL显示为背景的装饰形状的集合。这些形状由Three.js建立，并使用TweenMax库进行动画制做。

，咱们将探索一些使用WebGL生成的原始和实验背景。主要想法是将有趣的动画形状显示为装饰性页面背景，其中一些具备微妙的交互性。全部的演示都是用Three.js WebGL库建立的各类形状，动画由高性能的GSAP动画库控制。

在线演示

源码下载

3.创意SVG笔画动画

一个创意抚摸由SVG和GSAP驱动的自行车插图的动画。

SVG笔画动画不是什么新东西，可是当使用基本上由笔画构成的更复杂的绘画时，咱们能够建立一个很是原始的效果。使用许多不一样的颜色和添加一些其余元素动画，咱们能够带来一个很是独特的外观插图生活。

在线演示

源码下载

4.展开网格项目动画

在细节视图打开时缩略图放大的网格项目动画。

咱们想分享一个简单的实现你的网格动画是基于Dribbble的射击冲浪项目由菲利普Slováček。当单击一个网格项目时，背景和缩略图将被放大并移动到其全屏位置。虽然Dribbble镜头是手机的动画，但咱们认为咱们也能够在桌面上探索这个概念。

在线演示

源码下载

5.Kylo Ren CSS页面预加载器

仅用HTML和CSS制做的星球大战Kylo Ren页面预加载器。

，咱们要分享一些与你有点不一样的东西：一个没有图像的动画“星球大战”只赞助Kyl​​o Ren用HTML和CSS制做。

在线演示

源码下载

6.动态形状覆盖与SVG

一些想法为多层SVG形状叠加，动态生成与各类效果可调整的属性。

咱们想分享另外一种实现变形页面转换的方法。这一次，咱们将用JavaScript生成多个SVG曲线，使得许多不一样的外观形状成为可能。经过控制几个SVG路径的各个坐标，使用粘性运动的矩形（叠加）生成的曲线形状。咱们使用glsl-easings中的一些很好的缓动函数，经过调整曲线，速度和延迟值，咱们能够产生许多有趣的效果。

在线演示

源码下载

7.液体变形效应

由PixiJS和GSAP驱动的WebGL中的液晶失真效果的幻灯片放映。

咱们想和你分享一个有趣的失真效果。这个演示的主要概念是使用位移贴图来扭曲底层的图像，给它不一样类型的效果。为了演示图像之间的液态转换，咱们建立了幻灯片。一个位移贴图一般作的是将图像用做纹理，稍后将其应用于对象，从而给出假设底层对象缠绕在该纹理周围。这是一种经常使用于许多不一样领域的技术，可是咱们将探索如何将其应用于简单的图像幻灯片。咱们将使用PixiJS做为咱们的渲染器，过滤引擎和GSAP动画。

在线演示

源码下载

8.切片双图像布局

一些布局具备切片背景图像，幻灯片功能和毛刺效应。

咱们想和你一块儿分享一些图片。 这个想法是在网格布局中显示一些文本元素，并以幻灯片方式更改内容和图像。 对于背景图片，咱们建立了一个有一些额外选项的插件。 为了作一个有趣的过渡，咱们使用一个小故障效果。 这个效果咱们也适用于一些文字。

在线演示

源码下载

9.有机SVG形状变形想法

一小组有机形状效果的想法。演示显示了一些在网站上交互式使用动画SVG变形的方法，包括菜单悬停和内容显示效果。

咱们但愿与您分享更多动画有机SVG形状。这个想法是将一些流畅，天然的形状整合到一个网页中做为装饰元素，有时候还有一个互动，也就是在菜单项上悬停的菜单背景，或者简单地说，一个由凯文激发灵感的持续动画波背景拉格尔的设计。在其中的一个演示中，咱们还使用了一些模式和剪辑路径，以得到全屏动画，以显示其余内容。这些演示中的变形路径和其余动画由anime.js支持。

在线演示

源码下载

10.变形页面转换

一个简单的变形页面转换效果，当当前页面向上移动时，SVG路径变形。

咱们但愿与您分享一个简单的变体页面过渡效果。这个想法是将一个SVG路径变形，同时移动一个介绍页面，建立一个有趣，流畅的外观。对于动画咱们使用anime.js和一些字母效果，咱们使用Charming。在演示中，咱们使用“介绍转换”来展现效果，但这固然只是这种页面转换的许多用例之一。

在线演示

源码下载