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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Q&A

解決済

1回答

1287閲覧

parallax.jsが反応しない。

dream

総合スコア43

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

0グッド

0クリップ

投稿2019/10/26 06:24

編集2019/10/26 07:19

parallax.jsを使って背景画像をマウスカーソルで上下に動かしたかった
のですが、全く反応がなくて途方に暮れてます。
私自身何がいけないのかさっぱりなので、どなたか教えていただければ
幸いです。

HTML5

1コード <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/style.css"> 7</head> 8<body> 9 10<div class="visual"> 11 <ul id="scene" data-friction-x="0" data-friction-y="0.5" data- 12 scalar-x="0" data-scalar-y="15"> 13 <li class="layer" data-depth="1"> 14 <div class="bg"></div></li> 15 </ul> 16</div> 17 18 <script src="js/parallax.min.js"></script> 19 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 20 <script src="js/script.js"></script> 21</body>

CSS3

1コード .visual #scene { 2 position: absolute; 3 left: 0; 4 top: 0; 5 right: 0; 6 bottom: 0; 7 z-index: 0; 8 overflow: hidden; 9} 10 11.visual #scene li { 12 width: 100%; 13 height: 100%; 14 display: block; 15 position: absolute; 16 z-index: 6; 17 right: 0; 18 bottom: 0; 19 background: url(../images/toaru-accera.jpg) no-repeat; 20 background-size: cover; 21}

jquery

1コード $(function() { 2 $("#scene").parallax(); 3 });

例えばこんな感じのです。リンク内容

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

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

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

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

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

guest

回答1

0

ベストアンサー

jQueryプラグインですので公式のサンプルにもあるように、jQuery本体を先に読み込ませる必要があります。

Installation

Download and include parallax.min.js in your document after including jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="/path/to/parallax.js"></script>

この手の「何かしら読み込ませたし設定もしているが何も反応しない」場合はブラウザ開発ツールのコンソールを見るとたいていエラーが出ています。ご確認ください

投稿2019/10/26 08:08

編集2019/10/26 08:09
m.ts10806

総合スコア80765

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

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

dream

2019/10/27 03:58

回答いただきありがとうございます。しかし、私が実現しようとしているものとは 多少異なるみたいです。具体的には掲載しましたリンク内容と同様のものを やってみたいので。
m.ts10806

2019/10/27 04:37

読み込み順が違うという指摘ですよ。
dream

2019/10/27 07:27

苦労しましたが、無事できました。 ありがとうございました!
m.ts10806

2019/10/27 10:08

結局どのように解決されたのでしょうか。 「苦労した」経緯も記載しておくと同じような問題を抱えた人のためになるかもしれません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問