为您的网站添加一个小故障效果

吸引注意力并保持注意力的一个好方法是创造一个网站布局从关闭中展示你的才华。乌克兰网络机构酿酒的网站就是一个很好的例子,吸引你进入VR设计组合一个引人注目的组合,由玻璃颗粒构成的脉动标志和悬停时激活的一点点故障。

一个简单的小故障效果可以为您的网站提供一个至关重要的视觉兴趣,并且它实现起来非常容易。这是怎么做的。

下载文件本教程。

01.将代码添加到页面的body标签中

Vintage's glitch effect is easy to reproduce if you know its secret

如果您知道它的秘密,Vintage的故障效果很容易重现

创建简单的毛刺效果可以通过许多不同的方式完成。在这里,我们将通过在文本顶部设置动画GIF来实现,该GIF将在显示中打开和关闭。首先,将此代码添加到页面的body标签中。

WEB
产品-
离子

02.为显示器设置样式

内容将使用Google Fonts中名为Work Sans的特定字体。从那里抓住链接并将其放在头部;然后将CSS添加到样式标记或单独的CSS文件中。页面为黑色,带有白色文本,并为文本设置了样式。

身体{背景:#000; font-family:'Work Sans',sans-serif;颜色:#fff; } #holder {font-size:6em;宽度:500px;身高:300px;保证金:0自动;位置:相对; }

03.显示故障

毛刺效应将是一个直接放在文本顶部的背景图像。这里的重要部分是通过将不透明度降低到零而使其不可见,以便在用户与文本交互之前不会显示它。

#glitch {position:absolute;顶部:0;左:0; z-index:10;宽度:100%;身高:100%; background:url(glitch.gif);不透明度:0; }

04.抓住一切

将脚本标记添加到正文部分的末尾,并创建对文档中“毛刺”div的缓存引用。然后将名为“over”的变量设置为false。当用户移动文本时,将打开和关闭此功能。

var gl = document.getElementById(“glitch”); var over = false;

05.运行故障

当鼠标移过文本时,会调用毛刺函数。如果毛刺未运行,则毛刺可见性将打开,并在一秒半后关闭。您可以对此进行试验并使用随机数使其更难以预测。

function glitch(){if(over == false){gl.style.opacity =“1”; setTimeout(function(){normal();},1500); }}

06.恢复正常

毛刺效应不应该继续保持,因为它对用户来说太烦人,但作为一个互动元素,它运作良好。在这里,代码将不透明度重置为零,以使其在文本顶部不可见。

function normal(){gl.style.opacity =“0”; }

立即获取Generate New York的门票

为期三天的网页设计活动生成纽约回来了。 2018年4月25日至27日期间,标题演讲者包括SuperFriendly的Dan Mall,网络动画顾问Val Head,全栈JavaScript开发人员Wes Bos等。还有一整天的研讨会和宝贵的交流机会 - 千万不要错过。立即获取您的Generate门票

本文最初发表于创意网页设计杂志Web Designer的第270期。在这里购买问题270要么在这里订阅Web Designer

相关文章:



翻译字数超限