iT邦幫忙

0

[npm][Angular] AOS - Animate On Scroll Library

**Animate On Scroll **

https://michalsnik.github.io/aos/

1.install aos
npm install aos --save

2.angular.json
加上 styles , scripts

            "styles": [
              "src/styles.css",
              "node_modules/aos/dist/aos.css"
            ],
            "scripts": ["node_modules/aos/dist/aos.js"]

3.app.component.ts


  import * as AOS from 'aos';

  ngOnInit(): void {
    AOS.init();
  }

**4.app.component.html
**

<div  data-aos="fade-up" data-aos-delay="1000"	>
  the content
</div>

參數:
data-aos >> animation 種類 ( fade-zoom-in,fade-up.....etc )
data-aos-delay >> 延遲 (ms)
..
..
..詳請至參考

參考:
AOS
Animate On Scroll Library

https://michalsnik.github.io/aos/

npm -AOS

https://www.npmjs.com/package/aos


尚未有邦友留言

立即登入留言