LoginSignup
codeazuki
@codeazuki

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

背景画像をクリックでスライドさせるには

Q&A

Closed

HTMLCSSJavaScript初心者

背景画像をクリックでスライドさせるためには、どのようなコードを指定すればよいでしょうか？また、そのときに、画面にあるボタンを押しても、背景画像が反応しないようにしたいです。１週間ぐらいこの処理が書けなくてとても困っています。助けてください (´;ω;｀)

0

2Answer

YottyPG
@YottyPG

回答者が以前の質問を見ていない場合もあります。新たに質問を投稿する際には、実装したい仕様、現状のコード、詰まっている点などを具体的に記載していただけると助かります。

また、過去の質問で未クローズのものがあり、回答に未返信のものもあるようです。その状態で新しい質問を投稿するのは、以前の質問に回答してくださった方に対して失礼になってしまうかもしれません。ひとつひとつ試してみた結果などを回答していただき、それでも問題が解決しない場合に新しい質問として投稿していただけるとありがたいです。

過去の質問でも指摘があったかと思いますが、同じような質問が複数投稿されると他の方の質問が目立たなくなり、回答が付きにくくなることがあります。そういった点にもご配慮いただきながら、質問掲示板を活用していただけると幸いです。

2Like

Comments

  1. @YottyPG

    質問内容に関してですが、
    以前の質問の @southkey47様 の回答にもありますが、やりたいことはslickで実現できるように思います。
    要件として、ライブラリなどは利用せず自ら実装する必要があったりするのでしょうか？
    学習のために自らで実装してみたいといった感じでしょうか…？

  2. @codeazuki

    Questioner

    Jqueryはあまり使わない方がいいと噂で聞いたことがあるので、避けたいと感じました。実際は、使ってもいいのですか？

  3. @YottyPG

    個人的にはjQueryを利用しても別に構わないと思います。
    噂にとのことですが、避けた方がいい理由などは確認されていますでしょうか？

    どうしてもjQueryを避けたいのであれば、その他スライダー・カルーセルを実装するプラグインはいくつかあるので、自分で使いやすそうなものを選んで使ってみるのもありかと思います。

    もちろん、1から自分で実装するのもありです。
    以前の質問であげていた参考サイトのように、クリックして画像を変えるくらいの処理であれば、そこまで複雑な処理ならずに実装はできると思います。

    参考：

  4. @codeazuki

    Questioner

    ありがとうございます。

juner
@juner

こういう感じのですか？

下記のは クリック 時に 右に 200px 移動する 背景画像のサンプルです。

background-position-x transition sample - LiveCodes

<div id="target"></div>
<style>
  :root {
    min-height: 100vh;
    display: flex;
    flex-flow: row nowrap;
    body {
      flex: 1;
      display: flex;
      flex-flow: row nowrap;
      :where(#target) {
        display: flex;
        flex: 1;
        background-image: url("画像のURL");
        background-repeat: no-repeat;
        background-position-x: 0;
        height: 100%;
        width: 100%;
      }
    }
    &:has(.clicked) {
      pointer-events:none;
    }
  }
</style>
<script type="module">
  target.addEventListener("click", async (e) => {
    const target = e.currentTarget;
    target.classList.add("clicked");
    const animate = target.animate(
      [
        {
          backgroundPositionX: CSS.px("0"),
        },
        {
          backgroundPositionX: CSS.px("200"),
        },
        {
          backgroundPositionX: CSS.px("0"),
        },
      ],
      {
        duration: 2000,
        iterations: 1,
      },
    );
    animate.play();
    await animate.finished;
    target.classList.remove("clicked");
  });
</script>
0Like

Comments

  2. @codeazuki

    Questioner

    参考になります。

Your answer might help someone💌

LoginSign Up