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: schönes Beispiel einer Künstlerwebsite 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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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(https://images.unsplash.com/photo-1466496224275-4cbf790b285b?dpr=1&auto=compres); 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!