android 揭示动画_用scrollReveal.js揭示元素

android 揭示动画

自1996年创建以来,CSS就是我们在网络上用来样式化网站的所有语言。如今,我们可以使用CSS来创建出色的效果,并且由于引入了形状,伸缩框和动画,它每天都变得越来越强大。 除了可以创建动画的众所周知的笑话外,这当然是正确的,但是直到几年前,我们还不能轻易地垂直放置元素居中(在某些版本的Internet Explorer中仍然如此)。

尽管CSS是完成某些任务的语言,但很长一段时间以来,JavaScript一直被用来创建漂亮的动画。 甚至还有专门用于创建动画的整个JavaScript库。 在本文中,我将介绍一个名为scrollReveal.js的库。

什么是scrollReveal.js?

scrollReveal.js是一个库,用于在元素进入视口时轻松显示它们。 它的体积非常小,如果缩小并压缩后其重量约为3Kb。 它没有依赖关系,因此您不需要像jQuery一样添加其他库来使用它。 除了它支持的出色效果外,我对该库的真正喜欢是,您可以使用自然语言来定义要运行的动画。 稍后我们将再次介绍该功能,但首先,我想向您展示一个简单的示例,说明该库可以为您做些什么:

很好,不是吗? 这个演示是用很少的代码行创建的。 此演示的代码可作为JSFiddle获得

现在,我希望您感兴趣,让我们以有序的方式进行。

scrollReveal.js入门

为了在我们的网页中使用scrollReveal.js,我们必须获取该库的副本。 与往常一样,可以通过从其GitHub存储库下载它,也可以使用以下命令通过Bower来完成此操作:

bower install scrollReveal.js

下载后,必须通过添加script元素将库包含在页面中,如以下代码所示:

<script src="path/to/scrollReveal.min.js"></script>

如果您是使用Bower下载的,则路径应类似于以下内容:

<script src="bower_components/scrollReveal.js/dist/scrollReveal.min.js"></script>

有了库之后,我们需要添加或修改库将设置动画的某些元素。 具体来说,scrollReveal.js在页面上使用名为data-sr的属性搜索元素。 正如我们将在下一节中看到的那样,您可以通过为此属性设置一个值来更改应用的动画,但是简单地使用该属性就足够了。

因此,假设您的页面中包含以下HTML代码:

<body>
   <div data-sr>This is the first div</div>
   <div data-sr>This is the second div</div>
   <div data-sr>This is yet another div</div>
</body>

使用此简单代码,您只需添加以下JavaScript代码即可:

new scrollReveal();

完成最后一步后,我们现在可以打开页面了。 该库将在所有div上执行简单的淡入。 下面显示了此代码的结果,带有一些更令人愉悦的样式,并且可以作为JSFiddle使用

现在,让我们看一下一些可用的效果。

配置和效果

默认情况下, scrollReveal.js允许您的元素从页面底部进入视口,但是您可以通过使用enter关键字和方向来逐元素更改此效果。 因此,您可以enter left 。 您还可以使用move关键字指定给定元素必须移动多少像素,后跟像素数,例如move 15px 。 在这些指令之间,您可以放置​​任何您喜欢的文本。 例如,您可以如下定义一个元素:

<div data-sr="please, can you enter left and then move 15px ?">This is the first div</div>

请不要对这件事太着迷,因为您可能最终会在关键字之间写单词,从而获得意想不到的结果。 例如,此定义不正确

<div data-sr="please, can you enter left and then move of 15px ?">This is the first div</div>

您可以在“ move”和“ 15px”之间看到“ of”一词吗? 好! 让我们继续讨论。

使用scrollReveal.js,您还可以让您的元素按给定比例放大或缩小。 您可以通过使用scale关键字来创建此效果,如果要增大元素,请使用up如果要down元素,请使用down ,然后是百分比本身。

免费学习PHP!

全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

如果希望效果在给定的秒数后发生,则可以使用wait关键字,后跟wait的秒数。 以下是这两个指令的使用示例:

<div data-sr="hey bro! wait 2s and then scale up 20% this element">This is another div</div>

如前所述,您也可以执行基本动画,而无需为data-sr属性指定值。 发生这种情况是因为该库为我们在本节及更多内容中讨论过的关键字提供了一组默认值。 我们还可以在调用scrollReveal()方法时通过传递配置对象来更改这些默认值。 这是与它们的属性关联的默认值的完整列表:

defaults: {
  enter:    'bottom',
  move:     '8px',
  over:     '0.6s',
  wait:     '0s',
  easing:   'ease',
  scale:    { direction: 'up', power: '5%' },
  opacity:  0,
  mobile:   false,
  reset:    false,
  viewport: window.document.documentElement,
  delay:    'once',
  vFactor:  0.60,
  complete: function( el ) {}
}

在下一个示例中,我们将使配置对象的某些属性以及本节中介绍的关键字生效。 首先,我们将编写HTML代码。 我们将定义三个div :一个将执行默认动画,并更改一些默认值,而另外两个将具有自己的特定属性:

<div data-sr id="d1">
   <h1>I run the default animation</h1>
</div>
<div data-sr="wait 1s and enter bottom" id="d2">
   <h1>I have specific values</h1>
</div>
<div data-sr="scale down 10% and then ease-in-out 100px" id="d3">
   <h1>I have specific values too</h1>
</div>

要更改默认值,我们将设置一个配置对象,并将其传递给scrollReveal()方法,如下所示:

var config = {
   enter: 'right',
   wait: '0.5s',
   move: '20px'
}

new scrollReveal(config);

该代码的最终结果如下所示, 可以作为JSFiddle使用

结论

在本文中,我们讨论了scrollReveal.js,这是一个很小的漂亮的库,用于在网站上创建动画。 如您所见,使用该库非常容易。 一如既往,切记不要滥用动画,因为它们会很快变得烦人和分散注意力。 让您的用户专注于您的内容,然后在可能的情况下通过一些不错的效果改善他们的体验。

翻译自: https://www.sitepoint.com/revealing-elements-scrollreveal-js/

android 揭示动画

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值