金华做网站:如何快速添加微交互到您的网站

2019.08.02 mf_web

67

金华做网站在今天的快速提示中,我将向您展示如何使用名为micron.js的JavaScript库向您的网站添加微交互。使用micron.js,您可以为网页元素添加微妙的动画,而无需自己编写样式 - 所有操作都是使用标记中的数据属性完成的。让我们来看看!

1.  获得micron.js

访问  micron.js  主页,您将找到一些演示链接以及回购链接。要开始使用,您需要CSS文件和JavaScript文件,CDN链接如下所示:

1
2
<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.  添加微交互

我们以锚元素为例。请考虑以下事项:

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

单击这样的锚将绝对不会做任何事情。但是,通过添加名称的数据属性data-micron,我们可以为我们的锚添加一些天赋。

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

在这里,您将看到我们已将值添加shake到属性中。这可能是众多价值观之一,所有这些都给了我们不同的互动:

  • 抖动

  • 褪色

  • 果冻

  • 弹跳

  • 田田

  • 摇摆

  • 闪烁

  • 混蛋

  • 流行的

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

3.  调整动画持续时间

添加另一个数据属性将允许我们改变动画的持续时间:

1
data-micron-duration="1"

给定的值以秒为单位,因此上面的属性会将默认动画减慢到持续一秒。

4.  调整缓和功能

你现在已经掌握了这个,对吧?让我们添加另一个属性来调整动画的缓动功能。

1
data-micron-timing="linear"

同样,这里支持许多熟悉的值:

  • 线性

  • 易用性在

  • 渐出

  • 易于进出

5.  与另一个元素绑定

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

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

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

查看下面的演示,了解所有这些示例的集合,包括绑定(单击绑定按钮并查看红色div动画):

结论

Micron.js为微交互做的比我们在本教程中演示的更多,访问网站,玩游戏,亲眼看看!

金华做网站

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP