AOSスクロールライブラリの使い方を知りたい

●状況説明
知り合いから教えてもらったのですが、スクロールするとコンテンツが出てくるやつがやりたくて尋ねてみたら、https://michalsnik.github.io/aos/のサイトのやつを使えばいいとのことだったので、使ってみたものの、画面が白くなるだけで、フェードやズームなど全くできない状態です。

●質問内容
・この機能を使うのに必要なソースコードや知識
・この機能をwordpressで使う時にjsの導入や何か導入しなければいけないか
※質問が曖昧ですみません

●現在のコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="style.css">
7    <!--スクロール現象-->
8  <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
9  <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
10  <script>AOS.init();</script>
11
12  <title>practice</title>
13</head>
14<body>
15  <div>
16    <div>子要素</div>
17    <div>子要素</div>
18    <div>子要素</div>
19    <div>子要素</div>
20    <div>子要素</div>
21    <div>子要素</div>
22    <div>子要素</div>
23    <div>子要素</div>
24    <div>子要素</div>
25    <div>子要素</div>
26    <div>子要素</div>
27    <div>子要素</div>
28    <div>子要素</div>
29  </div>
30  <div data-aos="fade-right">
31    <div>子要素</div>
32    <div>子要素</div>
33    <div>子要素</div>
34    <div>子要素</div>
35    <div>子要素</div>
36    <div>子要素</div>
37    <div>子要素</div>
38    <div>子要素</div>
39    <div>子要素</div>
40    <div>子要素</div>
41    <div>子要素</div>
42    <div>子要素</div>
43    <div>子要素</div>
44    <div>子要素</div>
45    <div>子要素</div>
46    <div>子要素</div>
47    <div>子要素</div>
48    <div>子要素</div>
49    <div>子要素</div>
50    <div>子要素</div>
51    <div>子要素</div>
52    <div>子要素</div>
53    <div>子要素</div>
54    <div>子要素</div>
55    <div>子要素</div>
56    <div>子要素</div>
57  </div>
58  <div data-aos="fade-down">
59    <div>子要素</div>
60    <div>子要素</div>
61    <div>子要素</div>
62    <div>子要素</div>
63    <div>子要素</div>
64    <div>子要素</div>
65    <div>子要素</div>
66    <div>子要素</div>
67    <div>子要素</div>
68    <div>子要素</div>
69    <div>子要素</div>
70    <div>子要素</div>
71    <div>子要素</div>
72    <div>子要素</div>
73    <div>子要素</div>
74    <div>子要素</div>
75    <div>子要素</div>
76    <div>子要素</div>
77    <div>子要素</div>
78    <div>子要素</div>
79    <div>子要素</div>
80    <div>子要素</div>
81    <div>子要素</div>
82    <div>子要素</div>
83    <div>子要素</div>
84    <div>子要素</div>
85    <div>子要素</div>
86    <div>子要素</div>
87    <div>子要素</div>
88    <div>子要素</div>
89    <div>子要素</div>
90    <div>子要素</div>
91    <div>子要素</div>
92    <div>子要素</div>
93    <div>子要素</div>
94    <div>子要素</div>
95    <div>子要素</div>
96    <div>子要素</div>
97    <div>子要素</div>
98    <div>子要素</div>
99    <div>子要素</div>
100    <div>子要素</div>
101  </div>
102</body>
103</html>

●エラーメッセージ

aos.js:122 Uncaught TypeError: Cannot read property 'setAttribute' of null
at Object.E [as init] (aos.js:122)
at index.html:10

●試してみたこと
・https://michalsnik.github.io/aos/のCDNの導入
・ <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

m.ts10806

2020/05/09 02:12

>git hubのスクロール現象 GitHubは直接関係ないのでは？あくまで「AOSというスクロールライブラリ」の話だと思います。

m.ts10806

2020/05/09 02:14

ちなみに、ダウンロードしてDemoは動かしてみましたか？ https://github.com/michalsnik/aos

Surofuture

2020/05/09 02:14

そうなんですね。githubに関しては無知でしたので。。修正いたします。ご指摘ありがとうございます

m.ts10806

2020/05/09 02:15

はい。この書き方だと「Github本体の機能として導入されてる」と認識します。

Surofuture

2020/05/09 02:26

ダウンロードはしたのですがどのように動かせばいいかわからなくて詰まっている状況です

m.ts10806

2020/05/09 02:28

>どのように動かせばいいか DemoフォルダのHTMLをブラウザで開けば動きます。

行動規範の内容に同意します

回答2件

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

ちなみにDemoでもjsファイルは</body>前に読み込まれ、そのあとにinit()が実行されています。

・この機能をwordpressで使う時にjsの導入や何か導入しなければいけないか

WordPressに精通しているわけではないですが（ほとんど知らない）
プラグインのほとんどは
・プラグイン本体のJSファイルを正しく読み込ませる
・プラグインの実行の記述をそのあとに書く
・必要に応じてHTMLに属性や情報を与える

ことで動くので、それらが揃うように実装していけば問題なく動くのではと思います。
[WordPress　jsプラグイン導入]とかで調べてみてください。
基本的な導入の仕方をおさえるところからですね。

投稿2020/05/09 02:23

編集2020/05/09 02:35

m.ts10806

総合スコア80875

Surofuture

2020/05/09 02:36

</body>の前に <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet"><script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script><script>AOS.init();</script> を置くと動いたので、解決とさせていただきます。ありがとうございました。