内容
吸引注意力并保持吸引力的一种好方法是创建一个网站布局，以展示您的才华横溢（不错的网站建设者可以帮助您进行建设）。乌克兰网路代理商Vintage的网站就是一个很好的例子，利用玻璃颗粒制成的脉动徽标和悬停时会激活的小故障吸引您，吸引您进入其VR设计产品组合。
- 网络动画：无需代码
少量使用的简单毛刺效果可以使您的网站获得至关重要的视觉吸引力，并且易于实现。这样做的方法。
有一个复杂的网站吗？确保您的虚拟主机可以完成任务。并确保您的设计文件在云存储中的安全。
下载文件 对于本教程。
01.将代码添加到页面的body标签中
创建简单的毛刺效果可以通过许多不同的方式来完成。在这里，我们将通过在文本上方放置一个动画GIF来实现此目的，该GIF将在显示中打开和关闭。首先，将此代码添加到页面的body标签中。
div id =“ holder” onmouseover =“ glitch（）”> div id =“ glitch”> / div>网站br>产品-ION / div>
02.造型显示
内容将使用Google字体中称为Work Sans的特定字体。从此处抓取链接并将其放在您的头部；然后将CSS添加到样式标签或单独的CSS文件中。该页面用白色文本制成黑色，并且为文本设置了样式。
身体{背景：＃000; font-family：“无衬线工作”，无衬线；颜色：#fff; } #holder {font-size：6em;宽度：500像素；高度：300像素；保证金：0自动;职位：相对}
03.显示故障
毛刺效果将是直接放在文本顶部的背景图像。这里重要的一点是，通过将不透明度降低为零，使其不可见，直到用户与文本进行交互时才显示出来。
#glitch {位置：绝对；最高：0;左：0； z索引：10；宽度：100％;高度：100％;背景：url（glitch.gif）;不透明度：0； }
04.掌握一切
在正文部分的末尾添加脚本标签，并在文档中创建对“小故障” div的缓存引用。然后将名为“ over”的变量设置为false。当用户在文本上移动时，将打开和关闭该功能。
var gl = document.getElementById（“ glitch”）; var over = false;
05.运行故障
当鼠标移至文本上方时，将调用毛刺功能。如果故障没有运行，则将故障可见性打开，并在一个半秒后将其关闭。您可以对此进行试验，并使用随机数使其更加不可预测。
函数glitch（）{if（over == false）{gl.style.opacity =“ 1”; setTimeout（function（）{normal（）;}，1500）; }}
06.恢复正常
毛刺效果不应该持续存在，因为它会使用户感到烦恼，但是作为一种交互元素，它可以很好地发挥作用。在这里，代码将不透明度重置为零，以使它在文本顶部不可见。
函数normal（）{gl.style.opacity =“ 0”; }
立即获取Generate New York的门票
为期三天的网页设计活动“生成纽约”又回来了。演讲嘉宾将于2018年4月25日至27日举行，包括SuperFriendly的Dan Mall，网络动画顾问Val Head，全栈JavaScript开发人员Wes Bos等。还有一整天的研讨会和宝贵的交流机会–不要错过。立即获取生成票证。
本文最初发表于《创意网站设计》杂志Web Designer的第270期。 在此处购买第270期 或者 在此处订阅Web Designer.
