suche HTML/CSS/JS Fix (Vorher-Nachher Slider)

Goku. · 11/14/2024, 21:26

Hallo,

ich habe einen Slider (Vorher-Nachher), das Problem ist, der Kasten ist abgeschnitten d.h. Bild rechts ist gecuttet.

Jedoch sollte er immer die Größe des des "Vorher"-Bild nehmen, da das "Nachher-Bild" ein Upscale Bild ist, Nachher-Bild soll dann skaliert werden auf der Größe der Vorher Bilds.

ggf. noch einbauen, dass ich zwei Bilder mittels Button hochladen kann (Vorher-Nachher), aktuell ist es so, dass er die Bilder aus dem Ordner zieht, der lokal auf dem PC ist, aber das ist kein Muss.

Wer kann sowas? Was kostet mich der kleine Fix?

discord: design9593

Mit ChatGPT Premium konnte ich das Problem nicht lösen, da der immer das Nachher Bild im Slider packt und wenn ich Slider bewege, dann bewegt sich das Bild, anstatt die Überlagerung...

Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bildvergleich</title>
  <style>
    div#comparison { 
      width: 60vw;
      height: 60vw;
      max-width: 600px;
      max-height: 600px;
      overflow: hidden; 
    }
    div#comparison figure { 
      background-image: url('C:/Users/Dennis/Desktop/Tester/v1.png'); /* Vorher-Bild */
      background-size: cover;
      position: relative;
      font-size: 0;
      width: 100%; 
      height: 100%;
      margin: 0; 
    }
    div#comparison figure > img { 
      position: relative;
      width: 100%;
    }
    div#comparison figure div { 
      background-image: url('C:/Users/Dennis/Desktop/Tester/v2.png'); /* Nachher-Bild */
      background-size: cover;
      position: absolute;
      width: 50%; 
      box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
      overflow: hidden;
      bottom: 0;
      height: 100%;
    }

    input[type=range]{
      -webkit-appearance:none;
      -moz-appearance:none;
      position: relative;
      top: -2rem; left: -2%;
      background-color: rgba(255,255,255,0.1);
      width: 102%; 
    }
    input[type=range]:focus { 
      outline: none; 
    }
    input[type=range]:active { 
      outline: none;  
    }

    input[type=range]::-moz-range-track { 
      -moz-appearance:none;
      height:15px;
      width: 98%;
      background-color: rgba(255,255,255,0.1); 
      position: relative;
      outline: none;    
    }
    input[type=range]::active { 
      border: none; 
      outline: none;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance:none;
      width: 20px; height: 15px;   
      background: #fff;
      border-radius: 0;
    }
    input[type=range]::-moz-range-thumb {
      -moz-appearance: none;
      width: 20px;
      height: 15px;
      background: #fff;
      border-radius: 0;
    }   
    input[type=range]:focus::-webkit-slider-thumb {
      background: rgba(255,255,255,0.5);
    }
    input[type=range]:focus::-moz-range-thumb {
      background: rgba(255,255,255,0.5);
    }
  </style>
</head>
<body>

<div id="comparison">
  <figure>
    <div id="divisor"></div>
  </figure>
  <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
</div>  

<script>
  var divisor = document.getElementById("divisor"),
      slider = document.getElementById("slider");

  function moveDivisor() { 
    divisor.style.width = slider.value + "%";
  }
</script>

</body>
</html>

Ich hoffe das Bild erklärt mein Problem

Natsu Dragneel · 11/14/2024, 21:51

Quote:

Originally Posted by Goku.

Spoiler

Hi,

ich habe dich in Discord geaddet.