とっておきの「夜食」教えて下さい

急いでいます！

トリミングで表示した画像をクリックで元どおりにしたい

解決済

  • 質問者：ebiebi56
  • 質問日時：
  • 回答数：3件

webページに画像を二つ、横並びで表示し、その二つを合わせて全画面（100%）になるように設定しています。
ただし左右の画像はトリミングされ、画面上に見えているのはそれぞれの画像の横半分のみです。

左の画像をクリックしたら、トリミングされた部分も含めて画像がスライドし、左画像だけで画面が埋まり、同じように、右の画像をクリックしたら、トリミングされた部分も含めて画像がスライドし、右画像だけで画面が埋まる仕組みを作りたいのですが、
どこかに参考になりそうなサイト、または詳しい方は居ないでしょうか？

クリックしてから画像を動かしたい（スクロールやページ読み込みでの自動切り替えでも、ボタン式のスライダーでも無い）のと、トリミング解除（元々の画像を横幅縮めて表示し、クリックで広がるようなモノではなく）で難儀している次第です。


お手数おかけしますが、よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

参考程度に

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんばんは



方法はいろいろ考えられると思います。
ブラウザの全画面表示と言っても、縦長だったり横長だったりしますので、画像のプロポーションとの関係をどのようにしておくのかが一番問題になりそうな気がしますけれど、そのあたりに関しては何も記載が無いので・・・

＞どこかに参考になりそうなサイト、～
どこかで見た記憶はありますが、残念ながらどこだか覚えていません。


簡単なものなら、作成してもさほどではないので、以下はごく簡単な一例です。
画像の変化は、CSSアニメーション（transition）を利用しています。
スクリプトでは「クリック時にクラス設定を行う」ことだけを行っています。

具体的には、二つのDIVをflexで横並びにして、width:50%で同じサイズにしてあります。
画像は背景画像として表示し、ともにサイズは高さを100％にして幅は成り行き。
左側の画像は左端合わせ、右側の画像は右端合わせに固定してあります。

親要素（＝#wrap)にクラス（left, right）を設定すると、そちら側のdivの幅を100％まで、もう一方の幅を0にアニメーションするという仕組みにしてあります。
クラスを外すと元に戻ります。

ご参考までに。
（決して、これが唯一の方法というわけではなく、一例にすぎません）
※ 画像のプロポーションが画面サイズより小さい場合は、余白となって表示されます。
（画像の表示サイズや位置を変えることで、初期状態・拡幅時の表示の状態を調整できると思います）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #wrap {
width: 100%; height: 100%;
margin: 0; padding: 0;
}
#wrap { display: flex; }
#wrap .left, #wrap .right {
width: 50%; height: 100%;
background-repeat: no-repeat;
background-size: auto 100%;
transition: width 3s;
}
#wrap .left {
background-image: url('./photo01.jpg');
background-position: left;
}
#wrap .right {
background-image: url('./photo02.jpg');
background-position: right;
}

/* アニメーション設定 */
#wrap.left .left { width: 100%; }
#wrap.left .right { width: 0; }
#wrap.right .left { width: 0; }
#wrap.right .right { width: 100%; }
</style>
</head>
<body>

<div id="wrap">
<div class="left"></div>
<div class="right"></div>
</div>

<script>
document.getElementById('wrap').addEventListener('click', e=>{
const c = e.target.classList.item(0), cls = e.currentTarget.classList;
cls.toggle(c, !cls.contains(c));
});
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

三度にも渡り、丁寧な解説をありがとうございます。
おかげさまで狙った動きを実装できました。

通報する
お礼日時：2022/12/17 14:10

No.3

  • 回答者： fujillin
  • 回答日時：

No2です。



説明文が飛んでしまいました。すみません。
No2の補足説明です。


別法で、もう少し画像の位置・サイズが調整しやすそうな方法を考えてみました。
ついでに、スクリプトを用いない方法にしてあります。

label要素を二つ重ねておいて、上側のものをトリミング（=clip）で、右半分だけを表示しておくという考え方です。
変化させるのは、こちらの要素のみで、クリックによって表示幅を変えれば、下にある要素（＝常に全体分の表示）が見えてくる（or隠れる）という考えです。
label要素にしているのは、inputと関連付けて、クリックを感知するためです。

label要素は全体表示（width:100%; height:100%;）にしてありますので、その中で画像を好きな位置・サイズで表示するように指定しておけば済みます。
（例示では、width:100%; height:100%;にしてあります。）
    • good
    • 0
    • 件
通報する

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

<!DOCTYPE HTML>


<html lang="ja">
<head><title>Sample</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
html, body, #wrap {
width: 100%; height: 100%;
margin: 0; padding: 0;
}
#wrap input { display: none; }
#wrap label {
position: absolute;
top: 0; left: 0;
width: 100%; height:100%;
overflow: hidden;
}
#wrap label:last-child {
clip-path: inset(0 0 0 50%);
transition: clip-path 3s;
}
#right:checked ~ label { clip-path: inset(0 0 0 0); }
#left:checked ~ label { clip-path: inset(0 0 0 100%); }

/* 画像表示サイズ等を以下で調節 */
#wrap label img { width: 100%; height:100%; }
</style>
</head>

<body>
<div id="wrap">
<label for="left"><img src="./img/photo01.jpg"></label>
<input type="checkbox" id="left">
<input type="checkbox" id="right">
<label for="right"><img src="./img/photo02.jpg"></label>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報