跳到主要内容

使用JavaScript创建一个摇摆不定的文本效果

A screenshot from Patrick Heng's website including moving typography

将效果引入文本和排版可以为其添加全新的视角用户体验在网站上。但是要阅读文本,过于聪明或聪明的效果可能会破坏它的目的。

所以要聪明,要聪明,但要确保你的动力学排版效果确实有效,就像它一样Patrick Heng的网站- 上图中的特色。阅读,了解如何...

1.创建介绍文本

打开项目文件你会看到有velocity.js和blast.js库。 Blast拆分文本,而velocity是一个补间引擎。有三个偏移变量使每段文本以不同的间隔移动。

2.拆分文本

使用blast,每个文本字符被分成他们自己的span元素。然后循环文本的顶层,并为每个字母增加偏移量,以便它们独立地进行动画处理。

$(“h1”)。blast({delimiter:“character”}); function anim(){var $ spans = $(“#top”)。find('span'); $ spans.each(function(){offset1 + = 40;

3.添加速度

现在,速度库添加了移动和不透明度,使字母向上移动并淡入。每个字母都是偏移的,并且为每个字母设置持续时间和缓动。

$(this).velocity({translateY:-100,opacity:1},{delay:offset1,duration:800,easing:“easeOutBack”}); }); }

4.呼吁行动

现在调用'anim'函数,这会触发动画开始。 'setTimeout'函数现在错开了第二个黄色文本块。同样,它使用速度触发,如第一个示例中所示。

动画(); setTimeout(function(){var $ spans = $(“#middle”)。find('span'); $ spans.each(function(){offset2 + = 40; $(this).velocity({translateY: - 100,不透明度:0.8},{

继续前进

设置延迟,持续时间和缓动以使第二个黄色文本正确移动。然后在下一个'setTimeout'函数中控制最后一段橙色文本,以便在开始之前延迟此移动一段时间。

延迟:offset2,持续时间:800,缓和:“easeOutBack”}); }); },100); setTimeout(function(){var $ spans = $(“#bottom”)。find('span');

6.添加最终字母

现在最后的字母移动到位。这给出了相同的效果Patrick Heng的网站,有文字层移动。 Patrick实际上使用WebGL来移动文本,但这是一种使用DOM元素的简单方法。

$ spans.each(function(){offset3 + = 40; $(this).velocity({translateY:-100,opacity:0.8},{delay:offset3,duration:800,easing:“easeOutBack”});} ); },150);

在Generate London了解更多信息

Generate graphic

参见Richard Rutter,Sarah Parmenter和Bruce Lawson,以及2018年Generate London的更多话题

理查德·鲁特(Richard Rutter)对排版和共同创立有着浓厚的兴趣和魅力Fontdeck,一种开创性的网络字体服务。作为一名自封的网络排版传播者,理查德是Clearleft的首席组织者和号网络排版会议。

在Generate London 2018,他的工作室将帮助您创建具有吸引力,适当,独特,富有表现力和可读性的网页排版的网站,适用于各种形状和大小的屏幕。您将学习如何将数百年前的工艺与尖端技术(包括可变字体)相结合,以便为您的读者设计和开发最佳体验。

在一天的过程中,您将参加实践活动,将每种新技术应用到详细的示例站点,您可以随身携带。这将成为您将来参考的完美资源。如果这还不够,每位与会者都会带着理查德广受好评的免费电子版走开网络排版书

不要错过,现在就买票

相关文章:



翻译字数超限