質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2442閲覧

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

Surofuture

総合スコア49

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/05/09 02:08

編集2020/05/09 02:17

●状況説明
知り合いから教えてもらったのですが、スクロールするとコンテンツが出てくるやつがやりたくて尋ねてみたら、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">

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script> <script>AOS.init();</script>このコードをheadタグに挿入(知り合いに教えられたので)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/05/09 02:12

>git hubのスクロール現象 GitHubは直接関係ないのでは? あくまで「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をブラウザで開けば動きます。
guest

回答2

0

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>AOS.init();</script> </body>の前に置いたら動きました。 おそらくエラーもHTML要素を読み込んでない状態だからではないかと。

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

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

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

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

投稿2020/05/09 02:23

編集2020/05/09 02:35
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/05/09 02:36

一応、WordPressについても軽く追記しました。
Surofuture

2020/05/09 02:42

ありがとうございます! 参考になります!
guest

0

自己解決

</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>

を置くと動いたので、解決とさせていただきます。ありがとうございました。

投稿2020/05/09 02:36

Surofuture

総合スコア49

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/05/09 02:37

同じ回答を書いて自己解決は、ちょっと。
Surofuture

2020/05/09 02:40

すみません!間違えました。フォローさせていただきますのでよろしいでしょうか? それか自己解決消せるのかな
Surofuture

2020/05/09 02:47

消去リクエストを送っておきました
m.ts10806

2020/05/09 02:59

「受付中に戻す」という機能がどこかにあるかと(質問を投稿したことがないのでこれまでのteratailでの経験からの話しかできませんが)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問