20排版动画,实验和小的解决方案为您的下一个网络项目

20排版动画,实验和小的解决方案为您的下一个网络项目

排版对于任何界面来说都是至关重要的元素。我们不止一次地考虑过它的影响。它可以从多个角度帮助网站设计:它不仅是显示内容的工具,也是丰富用户体验的工具。

更重要的是,当涉及到心爱的三人组(CSS、HTML和JS)时,似乎前途无量。有了如此巨大的潜力在你的指尖,它是很难抗拒的诱惑,把普通的字体变成一些令人敬畏的和惊人的,并提供一个特殊的行为。

今天,我们总结了20个优秀的排版动画,它们可以给任何字体带来乐趣,无论你是需要强调标题,将元素从内容流中分离出来,还是仅仅放置一些焦点锚点。

其中一些展示了尖端技术的可能性,比如WebGL或Three.js;其他人则充分利用CSS和HTML。

字体设计动画

排版动画由Georgi Nikoloff

虽然脚本相当沉重,并迫使CPU像以往一样努力工作,这个粒子动画看起来令人兴奋和开创性的。在这里,点很快形成字母,给任何界面一个数字氛围。它适用于任何技术相关的项目或个人的投资组合。

字体设计动画

交互式排版效果

这支笔包括四种不同的印刷效果,为任何字体增加了强烈的互动吸引力。每一个都是由鼠标指针触发的,所以你不仅可以把它作为给标题添加趣味的工具,还可以把它作为一个小的访客游乐场。

交互式排版效果

古董字体由Thibault Jan Beyer设计

带有旧时代感觉的字体,由于其迷人的外观,不仅在复古的设计中,而且在现代的设计中也有应用。它们有很多,但是这个值得关注,因为它是在CSS的帮助下构建的,这使得它很轻量,非常灵活,非常适合许多项目。

老式字体

印刷动画由Kenji Saito

齐藤健二以独特和创新的CSS, HTML和JavaScript实验而闻名。这个活版动画一定会吸引你的眼睛与它的特殊的精心复制的行为和复杂的过渡之间的符号。

字体设计动画

文本动画:蒙特塞拉特(Montserrat),克莱尔·拉森(Claire Larsen)著

线条艺术是时尚的这些天,和轮廓印刷术是美化众多网站之一。由克莱尔拉尔森的文本动画的特点是一个美丽的复合字体,从来没有站着不动,从而放射出微妙的动感和外观非常时尚。

蒙特塞拉特

背景光文本由Goran Rakic

该效果是在Canvas和Vanilla.js的帮助下实现的。尽管它在FireFox中不能正常工作,更不用说其他一些浏览器了,比如Internet Explorer;尽管如此,就像第一个例子一样,它的美恰恰在于其开创性的方法和出色的执行,总有一天会成为现实。

背光的文本

贝内特·菲利的《磁谱仪》

动画是完美的飞溅页,开幕发言或主要标题。它是明亮的,平坦的,动态的,高度吸引人的。使用它来突出标题或标识。

Magnetype

SVG文本动画由Nirajan Basnet制作

这个效果看起来与我们之前的例子非常相似,但是有一些细微的区别,比如使用的阴影或空白的数量。所有的线条都向一个方向移动,实现连续的和谐流动。

SVG文本动画

Jonny Scholes的文本效果

仅仅使用HTML和CSS特性,Jonny Scholes就成功地用文本创建了这个优雅而复杂的技巧。它非常实用,可以很容易地增强许多项目。

关注文字效果

dhaakon的Sketch.js + CoffeePhysics Awesomeness

这是我们收集的另一个精彩的粒子动画,它会让你大吃一惊。结合Sketch.js和CoffeePhysics强大的可能性,作者想出了这样一个非凡的解决方案。

CoffeePhysics精彩

3d文字效果-鼠标移动由Dennis Garrn

Dennis Garrn成功地再现了一种可以在电影院看到的传统浮雕效果。他还利用视差来增加一些现实主义的字母,使整体影响更深刻。

3 d文字效果

由Rachel Smith设计的圆圈,文本和getImageData

这是一个有趣的粒子动画。雷切尔·史密斯创造了一种混合的微小的平面圆圈,任何单词都可以在上面输入。起初,它只是一块画布,上面无序地移动着充满活力的气泡;所有的魔法都是从点击CTA开始的。

圆圈,文本和getImageData

3D挤压文本效果- CSS只有皮特雷迪

这只是一个应用于谷歌字体的多重阴影技术,是免费的。解决方案很简单,但通常都是杰出的和特殊的。字体粗大,粗犷有力。你可以将它应用于复古设计和现代设计。

3D挤压文本效果

粒子文本动画由亨德利Sadrak

Hendry Sadrak不仅用一个独特的粒子动画震撼你的大脑,而且还爆炸了一开始出现的单词,把它转化成一团混乱的粒子,可以吹嘘一个相当自然的行为。

粒子动画文本

Codedoodl.es文本动画由Guillaume Rouxel

这种效果有点像传统的信息显示板,它不断变换字母和数字。这是一个干净整洁的复制,是理想的显示标志类型或简短的标题登陆页。

Codedoodl.es

三文本动画由Szenia Zadvornykh

三个文本动画是压倒性的积极的方式。js赋予它力量,这意味着这是一个先进的工作与非凡的行为。文本效果是难以置信的:它很容易抓住整体的注意力,并将其导向想要的单词。更重要的是,你可以通过点击和拖动来与动画进行交互。

三个文本动画

织物排版生成器由mxmx

这个小发生器让你产生一个漂亮的俏皮的效果,巧妙模仿织物纹理与3D的感觉。您可以控制诸如密度、缓动、粗糙度和灵活性等参数,以实现所需的结果。

面料排版发电机

萨满·提托的xgvsn

这是一个小集合的美丽和实用的效果,是由CSS3和jQuery构建的。虽然所有的解决方案都是相当标准和典型的,但它们都可以夸耀跨浏览器支持,这是当今的必备功能。

萨满·提托的xgvsn

输入动画英雄由乔希·卡明斯

Josh Cummings提供了一种简单而优雅的方法,通过使用常规的字体和基本的输入动画来为登录页面增添一些趣味。这种效果有一种强烈的技术氛围,所以它与任何web开发组合都是完美的。

类型的动画英雄

3D CSS排版诺亚布隆

偶然发现仅由CSS3提供支持的排版总是一件令人愉快的事情。Noah Blon甚至更进一步:他不仅重新创建了一个3D文本,而且还提供了一个微妙而明显的视差效果来加强效果。

3 d CSS排版

结论

虽然上面列出的大多数例子只能在Chrome中使用,而且在其他流行的浏览器中也会遇到一些问题,但这是一个开始,甚至是向更动态、更具交互性的排版方式的巨大飞跃。

你认为最令人印象深刻的例子是什么?最实用?最先锋?在吸引注意力方面,你喜欢静态排版还是动态排版?

2020-01-18 17:20
相关热门