jQueryプラグインのScrollify.jsが正常に作動しない

jQueryプラグインのScrollify.jsを設定方法のページを見ながら設定したのですが、
「javascript.js:60 Uncaught TypeError: $.scrollify is not a function　at javascript.js:60　(anonymous) @　javascript.js:60」
とエラーが起きます。

JavaScriptの記述を変えてみたりしましたが正常に作動せずの状況です。
わかる方いらっしゃったらご教授お願いします。

Scrollify.js解説ページ
https://kakechimaru.com/scrollify/

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta http-equiv="content-type" charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7  <title></title>
8  <meta name="description" content="">
9  <meta name="keywords" content="">
10  <link rel="stylesheet" href="public/css/index.css">
11  <link rel="stylesheet" href="public/css/all_common.css">
12  <script src="https://unpkg.com/scrollreveal"></script>
13  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
14<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1/jquery.scrollify.min.js"></script>
15</head>
16
17<body>
18<section class="main-section">
19    <div class="section-box">
20      <div class="service-sec-item">
21        <div class="main-title">
22        <p>NextRevolution</p>
23        <h2>SERVICE</h2>
24        <p>サービス一覧</p>
25        <a href="">詳しく見る</a>
26      </div>
27      </div>
28      <div class="service-sec-item">
29        <div class="scroll-img">
30          <div class="circle"><img src="test5.png" alt=""></div>
31        </div>
32      </div>
33    </div>
34
35  <div class="section-box">
36    <div class="about-sec-item">
37      <div class="main-title">
38      <p>NextRevolution</p>
39      <h2>SERVICE</h2>
40      <p>サービス一覧</p>
41      <a href="">詳しく見る</a>
42    </div>
43    </div>
44    <div class="about-sec-item">
45      <div class="scroll-img">
46        <div class="circle"><img src="test5.png" alt=""></div>
47      </div>
48    </div>
49  </div>
50
51  <div class="section-box">
52    <div class="service-sec-item">
53      <div class="main-title">
54      <p>NextRevolution</p>
55      <h2>SERVICE</h2>
56      <p>サービス一覧</p>
57      <a href="">詳しく見る</a>
58    </div>
59    </div>
60    <div class="service-sec-item">
61      <div class="scroll-img">
62        <div class="circle"><img src="test5.png" alt=""></div>
63      </div>
64    </div>
65  </div>
66  
67<div class="section-box">
68  <div class="about-sec-item">
69    <div class="main-title">
70    <p>NextRevolution</p>
71    <h2>SERVICE</h2>
72    <p>サービス一覧</p>
73    <a href="">詳しく見る</a>
74  </div>
75  </div>
76  <div class="about-sec-item">
77    <div class="scroll-img">
78      <div class="circle"><img src="test5.png" alt=""></div>
79    </div>
80  </div>
81</div>
82</section>
83
84  <!--JavaScript-->
85  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
86  <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
87  <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
88  <script src="public/js/javascript.js"></script>
89</body>
90
91</html>

CSS
1*{
2  margin: 0;
3  padding: 0;
4  border: 0;
5  border: none;
6  word-break: break-all;
7  max-width: 1366px;
8}
9body{
10  margin: 0;
11  padding: 0;
12  border: 0;
13}
14ul{
15  list-style: none;
16  padding: 0;
17}
18.main-contents ul,.main-contents a{
19  display: block;
20  letter-spacing: .15em;
21  color: #ffffff;
22 }
23.main-content {
24  position: relative;
25  display: inline-block;
26  text-align: center;
27  text-decoration: none;
28  outline: none;
29}
30.main-content::before,
31.main-content::after {
32  position: absolute;
33  z-index: 100;
34  content: '';
35  width: 0;
36  height: 0;
37  border: 4px solid transparent;
38  box-sizing: content-box;
39}
40.main-content::before {
41  top: 5%;
42  left: 3%;
43}
44.main-content::after {
45  bottom: 5%;
46  right: 3%;
47}
48.main-content:hover::before,
49.main-content:hover::after {
50  width: 92%;
51  height: 88%;
52  pointer-events: none;
53}
54.main-content:hover::before {
55  border-bottom-color: #ffffff;
56  border-left-color: #ffffff;
57  transition: height .3s, width .3s .3s;
58}
59.main-content:hover::after {
60  border-top-color: #ffffff;
61  border-right-color: #ffffff;
62  transition: height .3s, width .3s .3s;
63}
64.main-content img{
65  width: 100%;
66  z-index: 100;
67  transform: scale(1);
68	transition-duration: 0.3s;
69}
70.main-content img:hover{
71  filter: blur(3px) brightness(70%);
72  transform: scale(1.1);
73  transition-duration: 0.3s;
74}
75.mask{
76  display: block;
77  line-height: 0;
78  overflow: hidden;
79
80}
81.main-content-textarea{
82  position: absolute;
83  left: 50px;
84  top: 50px;
85  z-index: 1;
86  padding: 34px 40px 0 40px;
87  text-align: left;
88}
89
90
91/*ふわふわ*/
92.section-box{
93  position: relative;
94  height: 100vh;
95  background-color: rgba(216, 216, 216, 0.61);
96}
97.main-title {
98  position: absolute;
99  top: 40%;
100}
101.scroll-img{
102  position: absolute;
103  top: 17%;
104  left: 40%;
105}
106.circle img{
107  display: block;
108  animation:top_main_y 1.5s ease-in-out infinite alternate;
109  width: 80%;
110  margin: auto;
111}
112@keyframes top_main_y {
113  0% {
114    margin-top: 0px;
115  }
116  100% {
117    margin-top: 15px;
118  }
119}
120.circle-2 img{
121  animation:top_sub_y 0.8s ease-in-out infinite alternate;
122  position: absolute;
123  top: 60%;
124  left: 80%;
125  width: 20%;
126}
127@keyframes top_sub_y{
128  0% {
129    margin-top: 0px;
130  }
131  100% {
132    margin-top: 20px;
133  }
134}
135
136
137/*ページネーション*/
138.pagenation{
139  padding: 20px;
140  position: fixed;
141  right: 0;
142  top: 50%;
143}
144.pagenation li{
145  list-style-type: none;
146  margin-bottom: 20px;
147}
148.pagenation a{
149  display: block;
150  height: 10px;
151  border: 1px solid #000;
152  width: 10px;
153}
154.pagenation a.active{
155  background: #000;
156}

JavaScript
1$.scrollify({
2    section:".section-box"}
3  );

Luice

2021/11/04 00:57

タグのJavaはどこに関連するんでしょうか？あとheaderとbodyでjquery.min.jsなどを2回呼んでいるのは何故ですか。

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

回答1件

ベストアンサー

$.scrollify()が存在しない、というエラーです。
jQuery を複数回呼び出しているのが原因だと思います。
jQuery → Scrollify.js → jQuery と読み込むと、$が上書きされるので、$.scrollify()の定義が消えます。

投稿2021/11/04 07:08

Lhankor_Mhy

総合スコア36960

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

jQueryプラグインのScrollify.jsが正常に作動しない

関連した質問