今作っているサイトの文字をスクロールに合わせてふわっと表示させるために、このページ(https://liginc.co.jp/500530)を参考にしながらコードを書いています。
しかし、全くjQueryの機能が動いておりません。
HTML
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>凛太郎応援ページ</title>
7 <link rel="stylesheet" href="style.css">
8 <script src="https://unpkg.com/scrollreveal"></script>
9 <script src="js/jquery-3.6.0.min.js"></script>
10 <script src="js/script.js"></script>
11
12
13
14 </head>
15 <body>
16
17
18
19 <header>
20 <div class="container">
21
22 <div class="title">***応援サイト <div class="music"><audio controls src="img/music.wav"></audio></div>
23
24
25 </div>
26 </header>
27
28 <div class="top-img">
29 <div class="container">
30 <div class="fade">
31 <h1> ****を</h1>
32 <h1> ***未来に変えてみませんか？</h1>
33 </div>
34 </div>
35 </div>
36
37
38 <div class="explain">
39 <p>****<span style="font-size:30px"><b>***。</span></b></p>
40 <p>*******、<b><span style="font-size:30px">****</span></b>**********</p>
41 <p>************<b><span style="font-size:30px">*********</span></b></p>
42 <p>********<b><span style="font-size:30px">*********</span></b></p>
43 <p></span>********<b><span style="font-size:30px">**********</span></b></p>
44 <p>*********</p>
45 <p>*********<b><span style="font-size:30px">*******</span></b>***********</p>
46
47 </div>
jQuery
1ScrollReveal().reveal('.explain', {
2 duration: 10000, // アニメーションの完了にかかる時間
3 viewFactor: 0.2, // 0~1,どれくらい見えたら実行するか
4 reset: true // 何回もアニメーション表示するか
5});
6
7$(".explain").click(function(){
8
9 $(this).css('color' , 'red');
10
11});
ちなみに、ファイル構造は以下の通りです。
webページファイル
index.html, style.css, jsファイル, img
jsファイルの中
script.js,jquery-3.6.0.min.js
一応jQueryもhttps://jquery.com/のサイトからダウンロードしましたが、
jQuery
1$(".explain").click(function(){
2
3 $(this).css('color' , 'red');
4
5});
の部分も反映されていません。
何がダメなのでしょうか？
よろしくお願いします。
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。