Rails 6 引入 AOS(Animate On Scroll)

环境

  • Rails: 6.1.3.2
  • Ruby: 3.0.1
  • AOS: 2.3.4

AOS 的介绍

Animate On Scroll 官网: https://michalsnik.github.io/aos/


步骤

  1. 安装AOS
yarn install aos
  1. 创建app/javascript/animate_on_scroll.js文件。注意:文件不能命名为aos.js
import AOS from 'aos';

document.addEventListener('DOMContentLoaded', function() {
    AOS.init();
});
  1. app/javascript/packs/application.js中添加一行
//其他 import 的内容...
import 'animate_on_scroll.js'
  1. app/javascript/styles/application.scss中加入一行,没有则创建
@import '~aos/dist/aos';
  1. 随便找个页面,加入以下内容测试
<div data-aos="fade-down" style="height: 100vh; background: cadetblue"></div>
<div style="height: 100vh; background: aqua">
    <div data-aos="fade-left" style="margin-left: 20em"><h2>Haha</h2></div>
</div>
<div data-aos="fade-right" style="height: 100vh; background: rebeccapurple"></div>
<div data-aos="fade-up" style="height: 100vh; background: indianred"></div>

AOS 的用法

AOS github : https://github.com/michalsnik/aos


参考

How to include custom JS (AOS.js specifically) in Rails 6


写在最后

最後までご覧いただいてありがとうございます

点赞

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注