質問編集履歴

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

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ブラウザのほとんどに搭載されています。 Myタグに追加

1 PHPタグを削除しました

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ブラウザのほとんどに搭載されています。 Myタグに追加

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