Horizontale Website für eine Bildergalerie
Ich habe hier mal ein Experiment unternommen für eine horizontale Website, in der ich Bilder präsentieren möchte.
Ähnlich aufgebaut wie diese Website hier, die auch von einer Künstlerin ist:
** Link existiert nicht mehr **
Dort kann man zum "scrollen" sowohl das Rad von der Maus bedienen als auch mit der Tastatur (die Pfeile für rechts & links).
Das finde ich gut so.
Hier bei dieser Künstlerwebsite: KünstlerwebsiteBeispiel nur mit der Tastatur scrollbar
kann man eben nur mit der Tastatur und dem nach rechts und linkszeigenden Pfeil eben scrollen.
Deshalb finde ich die Lösung vom ersten Link
schönes Beispiel einer Künstlerwebsite
ziemlich ansprechend.
Nun habe ich mal ein horizontales mit dem Mausrad scrollbare Version nachgebaut: Hier zur Ansicht:
eigenes Beispiel einer mit dem Mausrad scrollbaren Website
Dies funktioniert auch schon ganz gut.
Aber ich komme nach einigen Experimenten nicht dahinter wie nun beides funktionieren kann.
Sowohl das Mausradscrollen als auch mit der Tastatur (die rechts & links Pfeilen eben!)
Was muss ich da ändern, das beides funktioniert. Wer hilft mir da weiter.
Nochmal der Link zu meiner DEMOsite :
eigenes Beispiel einer mit dem Mausrad scrollbaren Website
Gruß der einsiedelnde
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<script src="/js_webseite/jquery.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow:auto;
background:#111;
}
.horizontalScroll {
display:flex;
width:2500px;
background: #2E2E2E;
border: 1px dotted yellow;
}
.bg{
width:1500px;
height:1500px;
display:block;
background: #FDFFFC;
margin: 2.5vh;
background-image: url(/image/photo-1466496224275-4cbf790b285b.jpg);
background-size:cover;
}
</style>
<meta charset="utf-8">
<title>Bildvergrösserung</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="horizontalScroll">
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
</div>
<script>
/*
$('body').keydown(function(event){
switch (event.keyCode) {
case 39:
move_left=-5;
$('#horizontalScroll').css('left',wertx-move_left+'px');
break;
case 38:
move_top=5
$('#horizontalScroll').css('top',werty-move_top+'px');
break;
case 37:
move_right=-5;
$('#horizontalScroll').css('left',wertx+move_right+'px');
break;
case 40:
move_bottom=5;
$('#horizontalScroll').css('top',werty+move_bottom+'px');
break;
}
});
*/
</script>
</body>
</html>