搜索添加 交互_如何快速将微交互添加到您的网站

搜索添加 交互

在今天的快速提示中，我将向您展示如何使用名为micron.jsJavaScript库向您的网站添加微交互。 使用micron.js，您可以在网页元素中添加微妙的动画，而不必自己编写样式-一切都使用标记中的数据属性完成。 让我们来看看！

观看Micron.js截屏视频

1.获取micron.js

访问micron.js主页，您将找到一些演示，以及指向该存储库的链接。 首先，您需要CSS文件和JavaScript文件，其CDN链接如下所示：

<link href="https://unpkg.com/webkul-micron@1.1.4/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/webkul-micron@1.1.4/dist/script/micron.min.js" type="text/javascript"></script>

将它们添加到您看到的页面中，或者如果您使用的是CodePen笔，则在笔设置中将链接添加到CSS和JavaScript选项卡。

2.添加微交互

让我们以锚元素为例。 采取以下措施：

<a href="#" class="demo-button">Default</a>

像这样单击锚点绝对不会执行任何操作。 但是，通过添加一个名为data-micron的数据属性，我们可以为锚添加一些特色。

<a href="#" class="demo-button" data-micron="shake">Default</a>

在这里，您将看到我们已将值shake添加到属性中。 这本可以是许多价值观之一，所有价值观都给我们带来了不同的互动：

• 摇
• 褪色
• 果冻
• 弹跳
• 多田
• 槽
• 摇摆
• 挤
• 闪烁
• 混蛋
• 眨
• 流行音乐

现在，当您单击锚点时，您将以微交互形式看到一些视觉反馈。

3.调整动画时长

添加另一个数据属性将使我们能够更改动画的持续时间：

data-micron-duration="1"

给定的值以秒为单位，因此上面的属性会将默认动画的速度减慢一秒钟。

4.调整缓动功能

您现在就掌握了这个技巧，对吗？ 让我们添加另一个属性来调整动画的缓动功能。

data-micron-timing="linear"

同样，这里支持许多熟悉的值：

• 线性的
• 缓入
• 缓和
• 缓入

5.绑定到另一个元素

我们可以使用micron.js来定位除点击之外的元素，这次有两个数据属性：

data-micron-bind="true" data-micron-id="target"

在这种情况下，我们说绑定是true ，并且我们希望动画对具有id为target的元素生效。

在下面的演示中查看所有这些示例的集合，包括绑定（单击“ 绑定”按钮并看到红色的div动画）：

结论

Micron.js在微交互方面的作用比我们在本教程中展示的更多，请访问网站，开始玩乐，亲身体验！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-quickly-add-microinteractions-to-your-website--cms-30823

搜索添加 交互