向页面上的对象添加动画

这是一个需要使用JavaScript的高级演练。


在你的网站上添加动画可以帮助你的页面增加重点,刺激甚至一些乐趣。

背后的伟大的人们Animate.css项目使它变得容易。它们有大量的效果,可以添加到PageCloud站点上的对象中。188金宝搏官方app下载安卓


这三个主要的组件将需要包括在您的页面上,以允许动画出现。

1.将animation .css添加到编辑器中

在你的页面上出现动画之前,你需要添加动画文件到你的页面:

  1. 转到想要添加动画的页面。
  2. 打开< >主管编辑器的页面。
  3. 复制并粘贴下面的代码到编辑器:
  4. 保存并关闭编辑器。
  5. 保存该页面


2.将泛型animation .css类添加到对象中

在页面中包含了animation .css,将泛型animate类添加到任何你想要动画的对象中:

  1. 在编辑器中单击要动画的对象。
  2. 编辑菜单,单击“高级”页签。
  3. 单击CSS选择器。
  4. 复制并粘贴下面的代码到“Classes”字段:
    • animate__animated
  5. 点击“保存“为了保住你的工作。


3.向对象添加特定的动画类

有了通用动画类后,将特定的动画添加到对象中。

  1. 选择由Animate.css
  2. 单击动画名称右侧的“复制到剪贴板”图标。
  3. 在Pa188金宝搏官方app下载安卓geCloud上,选择要动画的对象。
  4. 编辑菜单,单击“高级”页签。
  5. 单击CSS选择器。
  6. 将第一步复制的动画粘贴到“Classes”字段中。
  7. 点击“保存和“实时查看”来查看页面加载时的动画效果。


(可选)在对象上定义动画触发函数

当动画通过编辑器在对象上触发时进行调整。

  1. 选择由Animate.css.在下面的例子中,我们使用'animate__backInRight'
  2. 选择要动画的对象。
  3. 打开< > JavaScript编辑器通过按下关键字上的J然后S键选择对象。
  4. 编辑器中有不同的触发器函数。决定一个,然后继续步骤5。
    • 触发功能包括:'click', 'mouseenter', ' mouselave ', 'scrollin', 'scrollout'。
  5. 在所需的触发器函数下,在之间的空行中及以上)};粘贴在element.addClass:
    • element.addClass(“animate__backInRight”);
  6. 保存并关闭编辑器。
  7. 点击“保存”和“实时查看”,以查看具有特定触发功能的动画效果。

当在“Classes”字段上设置特定的动画类时,设置动画触发函数不起作用在定义动画触发器函数之前,从“Classes”字段中删除特定的动画类

用户图标

谢谢你的反馈!

    这篇文章有用吗?
    谢谢你的反馈!