Panorama Bild wie bei Google Maps?
Hi,
Ich habe folgenden Code:
HTML:
<div id="panorama-container">
<img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />
<a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
max-width: 100%;
overflow: hidden;
}
#panorama-container {
width: 100%;
height: 100%;
}
#panorama-image {
position: absolute;
left: 0;
top: 0;
height: 100%;
max-width: auto;
overflow-y: hidden;
}
#fullscreen-button {
position: absolute;
top: 20px;
right: 20px;
font-size: 16px;
color: #fff;
text-decoration: none;
}
JS:
var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;
fullscreenButton.addEventListener("click", function() {
if (panoramaContainer.requestFullscreen) {
panoramaContainer.requestFullscreen();
} else if (panoramaContainer.webkitRequestFullscreen) {
panoramaContainer.webkitRequestFullscreen();
} else if (panoramaContainer.mozRequestFullScreen) {
panoramaContainer.mozRequestFullScreen();
} else if (panoramaContainer.msRequestFullscreen) {
panoramaContainer.msRequestFullscreen();
}
});
document.addEventListener("touchstart", function(event) {
initialX = event.touches[0].clientX;
});
document.addEventListener("touchmove", function(event) {
if (initialX === null) {
return;
}
var currentX = event.touches[0].clientX;
var diffX = currentX - initialX;
initialX = currentX;
movePanorama(diffX); /* Change this value to adjust the speed of the movement */
event.preventDefault();
});
document.addEventListener("touchend", function() {
initialX = null;
});
function movePanorama(amount) {
position += amount;
panoramaImage.style.left = position + "px";
}
Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.
Vielleicht versteht ihr was ich meine
LG
1 Antwort
Dein Code hat bei mir nicht ganz so funktioniert wie du es beschrieben hast, aber hier ein Beispiel von Chat GPT
<!DOCTYPE html>
<html>
<head>
<title>Panorama-Bild</title>
<style>
body {
margin: 0;
padding: 0;
}
#panorama {
background-image: urlhttps://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg);
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
position: relative;
}
#slider {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
}
#slider input[type="range"] {
width: 100%;
-webkit-appearance: none;
background: #ddd;
height: 5px;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 10px;
}
#slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #2196F3;
cursor: pointer;
border-radius: 50%;
}
#slider input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
background: #2196F3;
cursor: pointer;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="panorama">
<div id="slider">
<input type="range" min="0" max="100" value="50" id="range">
</div>
</div>
<script>
const slider = document.getElementById("range");
const panorama = document.getElementById("panorama");
slider.addEventListener("input", function() {
const value = this.value;
panorama.style.backgroundPosition = `${value}% 50%`;
});
</script>
</body>
</html>