面向初学者的微交互教程:如何使用CSS和JavaScript创建交互式“赞”按钮

面向初学者的微交互教程


我认为可以肯定地说微交互很酷。我们–网民–普遍都喜欢他们。而且,无论您是否注意到它们,它们都可以显着改善用户体验。通过使您的网站或Web工具以友好的方式巧妙地变得生动起来,它们使用户更轻松地享受了整个交互过程.

本着这种精神,我想给您一个快速的微交互教程,并向您展示如何创建一个很棒的 "喜欢" 您网站的按钮。用最少的代码。它在起作用:

竖起大拇指的按钮非常令人兴奋,不是吗?让我们开始吧!

但首先:

为什么首先要打扰微交互?

我不会试图在这里过分说服您,但让我们看几件事.

微交互已经存在了一段时间-足够使它们甚至 全书 写关于他们。另外,已经进行了许多实验和研究,以了解它们实际上是多么有用和有效。.

尼尔森·诺曼集团(Nielsen Norman Group)是最著名的研究机构之一,着眼于微观互动 在2018年紧密. 根据他们的结论,微交互已被证明可以通过鼓励互动和传达品牌来改善用户体验。.

简而言之,如果正确使用微交互,也可以不使用过多,则真的很有益。今天,我们将向您展示一个微观互动的简单示例:

微交互教程:大拇指按钮的标记和基本CSS

��注意;在底部,我们为您提供了一些选项,这些选项不涉及手工编写代码.

首先,我们需要一些不错的旧HTML和CSS魔术来使其起作用。结构非常简单.

我们将对类似图标本身使用SVG标签-这是从 字体很棒;您可以找到大多数图标 这里. 为了调整SVG标签的宽度和高度属性,我们将使用以下HTML:

现在,对于CSS,我们将进行基本的入门。我们要在此处进行的操作是使“赞”按钮看起来不错,并使所有内容都很好地位于屏幕中央。我们已经知道,我们将在点击时切换一个班级(活动班级),因此我们需要对此进行说明。如果启用,我们将用蓝色填充图标,如果不启用,则将用深灰色填充图标:

身体 {
显示:flex;
align-items:居中;
证明内容:中心;
高度:100vh;
}

.像按钮{
显示:flex;
align-items:居中;
证明内容:中心;
}

.like-button.active {
-webkit-animation:两者都流行0.9s;
动画:两者均为pop 0.9s;
}

.像按钮svg {
不透明度:1;
}

.像按钮一样的svg路径{
填充:#333;
过渡:填充.4s缓解;
}

.like-button.active svg路径{
填充:#2196f3;
}

我们想要在这里做的另一件事是当按钮变为活动状态时使用的弹出动画,因此我们将其添加到CSS文件中:

@ -webkit-keyframes pop {
0%{
-webkit-transform:scale3d(1,1,1);
转换:scale3d(1,1,1);
}
30%{
-webkit-transform:scale3d(1.25,0.75,1);
转换:scale3d(1.25,0.75,1);
}
40%{
-webkit-transform:scale3d(0.75,1.25,1);
转换:scale3d(0.75,1.25,1);
}
50%{
-webkit-transform:scale3d(1.15,0.85,1);
转换:scale3d(1.15,0.85,1);
}
65%{
-webkit-transform:scale3d(0.95,1.05,1);
转换:scale3d(0.95,1.05,1);
}
75%{
-webkit-transform:scale3d(1.05,0.95,1);
转换:scale3d(1.05,0.95,1);
}
100%{
-webkit-transform:scale3d(1,1,1);
转换:scale3d(1,1,1);
}
}

@keyframes pop {
0%{
-webkit-transform:scale3d(1,1,1);
转换:scale3d(1,1,1);
}
30%{
-webkit-transform:scale3d(1.25,0.75,1);
转换:scale3d(1.25,0.75,1);
}
40%{
-webkit-transform:scale3d(0.75,1.25,1);
转换:scale3d(0.75,1.25,1);
}
50%{
-webkit-transform:scale3d(1.15,0.85,1);
转换:scale3d(1.15,0.85,1);
}
65%{
-webkit-transform:scale3d(0.95,1.05,1);
转换:scale3d(0.95,1.05,1);
}
75%{
-webkit-transform:scale3d(1.05,0.95,1);
转换:scale3d(1.05,0.95,1);
}
100%{
-webkit-transform:scale3d(1,1,1);
转换:scale3d(1,1,1);
}
}

的 "相互作用" 此微交互教程的一部分

现在我们已经掌握了基本的样式,现在该处理实际的交互了–这意味着JavaScript!

首先,我们需要一个JavaScript函数,该函数会在给定的时间间隔(最小和最大)之间生成一个随机整数:

函数randomInt(min,max){
返回Math.floor(Math.random()*(max-min + 1)+ min);
}

接下来,我们将需要另一个函数,该函数随机返回+1或-1,因此我们可以具有随机的负值或正值:

函数plusOrMinus(){
返回Math.random() < 0.5? -1:1;
}

现在进行实际的交互处理;让我们看一下代码以正确解释它:

  • 首先,我们将按钮保存在变量中,并向其中添加click事件监听器.
  • 单击该按钮后,我们将添加一个preventDefault()函数,以确保不会发生任何不必要的事情.
  • 之后,我们将向按钮添加活动类,我们之前通过CSS将其设置为蓝色.
  • 然后,我们将运行generateClones()函数(尚未定义),通过此按钮将我们的按钮作为参数传递.

让按钮= document.querySelector(".像按钮");

button.addEventListener("点击", 功能(e){
e.preventDefault();
this.classList.toggle("活性");
generateClones(this);
});

现在,我们定义generateClones()函数,并通过以下步骤运行:

  1. 首先,让我们决定随机数的克隆。我们将在该图标的两个和四个克隆之间实例化。我们将使用先前定义的randomInt()函数.
  2. 然后,对于每个克隆,我们将使用按钮内的SVG标签作为 "模型" 并使用cloneNode(true)JavaScript函数将其克隆到新变量中。我们还将使用随机整数生成器函数为克隆定义5到16之间的大小.
  3. 接下来,我们将克隆添加到按钮中,使用先前生成的数字设置其宽度和高度,并使其位置绝对,以便我们可以独立于按钮移动它们.
  4. 我们需要做的另一件事是克隆的过渡,因此单击时它们不会只是弹出到新位置.
  5. 现在,要添加将使我们的图标四处移动的实际转换,我们将变得有些疯狂。我们希望我们的克隆从按钮中心随机向外移动。结合使用randomInt()和plusOrMinus()函数,我们将使用translate3d CSS属性在XY轴上移动克隆。我们还将使用 "骇客", 否则我们的过渡就不会适用。因此,添加一个简单的setTimeout()函数将有助于我们实现这一目标。同时,我们将不透明度移至0,使克隆消失.
  6. 删除我们的克隆。处理完所有爵士乐后,我们必须清除DOM。因此,我们需要另一个setTimeout()函数,该函数将在一秒钟后从DOM中删除我们的克隆.

generateClones(button){
// 1.生成克隆并遍历设置的数字
让克隆= randomInt(2,4);
为(让它= 1;它 <=克隆; it ++){
// 2.在变量中获取SVG标签克隆并生成随机大小
让克隆= button.querySelector("svg").cloneNode(true),
大小= randomInt(5,16);
// 3.将克隆添加到按钮并更改其宽度/高度/位置
button.appendChild(clone);
clone.setAttribute("宽度", 尺寸);
clone.setAttribute("高度", 尺寸);
clone.style.position = "绝对";
// 4.添加一些浮华的过渡
clone.style.transition =
"转换0.5s三次方bezier(0.12,0.74,0.58,0.99)0.3s,不透明度1s缓解0.5s";
// 5.使用setTimeout函数使我们的图标向外动画,以便CSS遵循.
让animTimeout = setTimeout(function(){
clone.style.transform =
"translation3d(" +
plusOrMinus()* randomInt(10,25) +
"像素," +
plusOrMinus()* randomInt(10,25) +
"px,0)";
clone.style.opacity = 0;
clearTimeout(animTimeout);
},1);
// 6. 0.9秒后删除克隆
让removeNodeTimeout = setTimeout(function(){
clone.parentNode.removeChild(clone);
clearTimeout(removeNodeTimeout);
},900);
}
}

而已!我们已经做到了最后!在下面,您会找到CodePen示例:

看笔
点赞按钮
由Andrei Băicuș(@算盘
密码笔.

谢谢你通过这个!

向WordPress添加微交互的其他选项

如果手动编写代码不完全是您的事,那么实际上有很多WordPress插件可用于将微互动传递到您的网站上,而不必担心其幕后工作原理.

首先,您可以使用 制作动画! 插件使用CSS3为页面上的几乎所有元素设置动画.

例如,您可以添加一个按钮或一段文本,然后将其设置为在单击时以某种方式进行动画处理.

这是该插件可以执行的操作的一个示例– 视频��.


制作动画!

作者: eLEOPARD设计工作室


100%评分


40,000 +安装


4.7.0要求

更多信息

animate-it.2.3.7.zip

当前版本:2.3.7

上次更新时间:2020年3月20日


100%评分


40,000 +安装


4.7.0要求

WordPress.org插件页面


制作动画!

另一个插件(也是我们编辑的最爱之一)是 简码终极版.

在大量不同的短代码中,有一个用于简单的动画。关于动画的行为有一些预设,您可以在要动画的块中放置几乎所有内容.

这是一个动画按钮的示例(请注意;该动画仅在其第一次滚动到视口时才起作用;如果看不到,请刷新页面):

点击我


WordPress简码插件—简码旗舰版

作者: 弗拉基米尔·安诺欣


98%评级


800,000+安装


WP 4.6+要求

更多信息

shortcodes-ultimate.5.9.0.zip

当前版本:5.9.0

上次更新时间:2020年5月24日


98%评级


800,000+安装


WP 4.6+要求

WordPress.org插件页面


WordPress简码插件—简码旗舰版

这两个插件应该为您提供足够多的选项来为页面上的某些元素设置动画,并在用户与其互动时使它们弹出更多一点。当然,您不想太过分,但是当用户与您的号召性用语进行交互时,给他们额外的帮助可能会很大.

您如何看待微互动,您是否正在考虑充分利用此微互动教程,并向您的网站添加一些内容?让我们在评论中知道.

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map