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