swdevelopment/animate

这将使用 AOS 库来使 HTML 元素动画化。

维护者

详细信息

github.com/sw-development-services/animate-plugin

源代码

问题

文档

安装数: 4,105

依赖项: 0

建议者: 0

安全性: 0

星标: 3

关注者: 2

分支: 2

开放问题: 0

类型：craft-plugin

5.0.0 2024-04-19 15:52 UTC

Requires

MIT c8c63eb0475b9e4ebd6c75f8372320ce1c6da723

cmsCraftanimatecraftcmscraft-pluginanimation effectsHTML animation

This package is auto-updated.

Last update: 2024-09-02 22:43:24 UTC

README

这将使用来自 https://github.com/michalsnik/aos 的 AOS 动画化元素。

Screenshot

要求

此插件需要 Craft CMS 3.0.0-beta.23 或更高版本。

安装

要安装插件，请按照以下说明操作。

  1. 打开您的终端并进入您的 Craft 项目

     cd /path/to/project

  2. 然后告诉 Composer 加载插件

     composer require swdevelopment/animate

  3. 在控制面板中，转到设置 → 插件，并点击 animate 的“安装”按钮。

或

    ./craft plugin/install animate

animate 概述

animate 通过加载运行 Animate On Scroll 库所需的文件来节省您的时间，并允许您在模板中添加动画元素。

配置 animate

要开始使用 animate，只需导航到控制面板并点击 animate 插件。

  1. 要激活，请确保您打开了激活 animate 的开关。
  2. 要使用 CDN 与库一起，请确保打开了使用 CDN 的开关。在生产环境中使用 CDN 是一个好的做法。如果您在本地开发，则无需打开此开关。

Screenshot

使用 animate

要在模板中使用 animate，只需将 data-aos 标签添加到任何元素中。库的完整使用完全取决于您。

  • 动画使用属性 data-aos

  • 设置可以用属性 data-aos- 覆盖

    • 延迟
    • 持续时间
    • 偏移量
    • 缓动
    • 锚点
    • 锚点位置

动画选项（淡入）

"翻转"的示例代码

<div class="content" data-aos="flip-up">
    <h1 data-aos="slide-right" data-aos-delay="200" data-aos-duration="400">Welcome</h1>
</div>

有关所有动画、动画类型和设置选项，请参阅 animate 的设置页面。

animate 路线图

未来功能

  • 添加在 CP 上的任何字段中编辑动画的能力。

由 Tim Strawbridge 提供