質問編集履歴

2 コードを書き換えました

k10a

k10a score 35

2019/05/01 14:41  投稿

data-image-srcが正常に動かない
閲覧いただきまして、ありがとうございます。
Parallax.jsライブラリをつかって、パララックス機能を付与しようと考えているのですが、なぜか自分の環境では正常に動かず困っています。
```PHP
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="{{ app.config.front_urlpath }}/js/parallax.js"></script>
<script src="./assts/js/parallax.js"></script>
<div class="parallax" data-parallax="scroll" data-image-src="{{ app.config.front_urlpath }}/img/parallax_bg.jpeg" data-speed="0.6">
</div>
```
本来であれば、下記のようにタグ変更なく通常通り、パララックス効果を実装されるはずのですが
```PHP
<div class="parallax" data-parallax="scroll" data-image-src="/template/default/img/parallax_bg.jpeg" data-speed="0.6">
</div>
```
コンソール上でstyleに背景画像が展開されてしまっています。
背景画像は表示されていますが、パララックスが付いていない状態となります。
```PHP
<div class="parallax" data-parallax="scroll" data-image-src="/template/default/img/parallax_bg.jpeg" data-speed="0.6" background-image: url("/template/default/img/parallax_bg.jpeg"); background-size: cover; background-position: center center;>
</div>
```
他のJSライブラリが邪魔してしまっているのかなと思うのですが、検証の仕方が見つからず。。。汗
```
document.addEventListener('DOMContentLoaded', () => {
   const div = document.querySelector('.parallax');
   div.removeAttribute('style');
});
```
上記のように一度、styleを消してみたところ、style部分は表示されましたが、パララックスと背景画像は適用されなくなりました。
令和一発目に情けない質問で恐縮ですが、原因不明で困っています。
すみませんが、御指南いただけませんでしょうか?
  • JavaScript

    31586 questions

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

1 PHPタグを削除しました

k10a

k10a score 35

2019/05/01 13:34  投稿

data-image-srcが正常に動かない
閲覧いただきまして、ありがとうございます。
Parallax.jsライブラリをつかって、パララックス機能を付与しようと考えているのですが、なぜか自分の環境では正常に動かず困っています。
```PHP
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="{{ app.config.front_urlpath }}/js/parallax.js"></script>
<div class="parallax" data-parallax="scroll" data-image-src="{{ app.config.front_urlpath }}/img/parallax_bg.jpeg" data-speed="0.6">
</div>
```
本来であれば、下記のようにタグ変更なく通常通り、パララックス効果を実装されるはずのですが
```PHP
<div class="parallax" data-parallax="scroll" data-image-src="/template/default/img/parallax_bg.jpeg" data-speed="0.6">
</div>
```
コンソール上でstyleに背景画像が展開されてしまっています。
背景画像は表示されていますが、パララックスが付いていない状態となります。
```PHP
<div class="parallax" data-parallax="scroll" data-image-src="/template/default/img/parallax_bg.jpeg" data-speed="0.6" background-image: url("/template/default/img/parallax_bg.jpeg"); background-size: cover; background-position: center center;>
</div>
```
他のJSライブラリが邪魔してしまっているのかなと思うのですが、検証の仕方が見つからず。。。汗
```
document.addEventListener('DOMContentLoaded', () => {
const div = document.querySelector('.parallax');
div.removeAttribute('style');
});
```
上記のように一度、styleを消してみたところ、style部分は表示されましたが、パララックスと背景画像は適用されなくなりました。
令和一発目に情けない質問で恐縮ですが、原因不明で困っています。
すみませんが、御指南いただけませんでしょうか?
  • JavaScript

    31586 questions

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

  • PHP

    33669 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る