Skip to main content
F
friedaundihrbachelor
Participant
September 12, 2022
Question

Horizontal Scroll, whole website

  • September 12, 2022
  • 1 reply
  • 1318 views

Hi!
Ich bin schon lange auf der Suche nach einer Lösung für mein Scroll-Problem.
Ich möchte ganz einfach die GESAMTE Seite horizontal scrollbar machen, nicht nur Teile oder bestimmte Bereiche. Also eine ganze Website, die sich aufbaut und verscheidene klickbare Teile und Interaktionen im Laufe hat, aber eben nicht von oben nach unten scrollt sondern von links nach rechts.


Man kann ja in Adobe XD direkt bei den Maßen der Zeichenfläche auch angeben, ob ein vertikaler Bildlauf möglich sein soll und die Viewport-Höhe festlegen. Aber es ist eben dort nur die Wahl zwischen "Kein" oder "Vertikal" für den Bildlauf. Eine Option für "Horizontal" gibt es erstmal nicht.
Mit scrollbaren Gruppen habe ich das Problem, dass meine Interaktionen und Animationen, die ich im Laufe der Website (die nach rechts und links scrollbar sein soll, nicht nach oben und unten) anlege, sich verschieben oder einfach ausgeblendet sind sobald ich einen Bildlauf-Rahmen dafür erstelle.

 

Habt ihr eine Lösung dafür? Ich habe schon so viele Videos und Foren durchsucht, aber niemand scheint daran interessiert zu sein einen Protoypen für eine horizontale Website zu bauen.
Genau das ist aber eben mein Programm-Limit: ich kann Webflow oder Coden nicht nutzen sondern muss mich auf Adobe XD bzw. Figma beschränken.

 

Vielen Dank,
Johanne

    This topic has been closed for replies.

    1 reply

    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    September 12, 2022

    Hi @friedaundihrbachelor, if I'm not missing something, you can actually create a background element that as wide as you want, exceeding the artboard's width (and covering the whole height of the artboard), and then make it scrollable as a workaround. See how I created a background element that is wider than the artboard, with a horizontal gradient to see bg changes as we horizontally scroll: 

    https://xd.adobe.com/view/647e85e7-8e1c-4d23-9a5b-ac1d903e5be5-312d/?hints=off 

    and the file is here if you want to check: https://www.dropbox.com/s/zqap41w9kxpgkvg/horizontal%20scroll.xd?dl=0

    Hope this helps!

      F
      friedaundihrbachelorAuthor
      Participant
      September 12, 2022

      Hi,

      unfortunately that's not what I'm looking for.

      I know how to make scrollable Backgrounds or Parts, but I want ALL layers to move horizontally, instead of the classic vertical movement.

      I want to create a FullHD One Page Website (visually it resembles a game where you run through a horizontal landscape) that extends left and right, not vertically like a normal Website.

      And I want all Elements like Buttons, Interactions, Navigation Bar, PopUps, Slides/movable areas etc. to appear while scrolling, as usual. Like this for example: https://mylesnguyen.com/ 

       

      This doesn't work though, once I group objects to make a scrollable area/group out of the elements, so the workaround you're describing would exclude any interactive objects throughout the scroll. 

      AkinGn
      Community Expert
      AkinGnCommunity Expert
      Community Expert
      September 12, 2022

      Hi, I think the best way (I know it's a workaround but it'd solve the problem for now) is in a full width artboard, creating the site > grouping all elements with the whole bg > and pasting the whole site content to the narrow artboard and enabling horizontal scroll on that narrow artboard. You can see the updated prototype here: https://xd.adobe.com/view/9ab46fa5-0c33-4e33-9c32-1ac05773ea26-cfe7/

       

      The file with two artboards is here: https://www.dropbox.com/s/zqap41w9kxpgkvg/horizontal%20scroll.xd?dl=0

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices