Q&A
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 });
例えばこんな感じのです。リンク内容
回答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
総合スコア80875
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/27 03:58
2019/10/27 04:37
2019/10/27 07:27
2019/10/27 10:08