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

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

ただいまの
回答率

88.79%

data-image-srcが正常に動かない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 912

k10a

score 35

閲覧いただきまして、ありがとうございます。

Parallax.jsライブラリをつかって、パララックス機能を付与しようと考えているのですが、なぜか自分の環境では正常に動かず困っています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.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>

本来であれば、下記のようにタグ変更なく通常通り、パララックス効果を実装されるはずのですが

<div class="parallax" data-parallax="scroll" data-image-src="/template/default/img/parallax_bg.jpeg" data-speed="0.6">
</div>

コンソール上でstyleに背景画像が展開されてしまっています。
背景画像は表示されていますが、パララックスが付いていない状態となります。

<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部分は表示されましたが、パララックスと背景画像は適用されなくなりました。

令和一発目に情けない質問で恐縮ですが、原因不明で困っています。
すみませんが、御指南いただけませんでしょうか?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • m.ts10806

    2019/05/01 07:50

    PHP?

    キャンセル

  • k10a

    2019/05/01 13:35

    すみません、一応Laravel上でやっていたことだったので、PHP入れましたが、PHPタグを排除しました。

    キャンセル

  • m.ts10806

    2019/05/01 14:23

    でしたら「Laravel5」はあったほうがいいですね。
    JavaScriptだけだと下記がなんのことかわかりませんので
    {{ app.config.front_urlpath }}
    JavaScriptだけで問いたいのでしたら上記は適当に置き換えたほうが良いでしょう。

    キャンセル

  • k10a

    2019/05/01 14:42

    ご指摘いただきまして、ありがとうございます。
    こちら適当に変更させていただきました。

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 88.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る