https://github.com/nadjascodejourney/horizontal-scrolling-selfstudy
This repository is designed to develop skills in the area of horizontal scrolling on websites. The main goal is to gain a solid understanding of how to design and implement effective horizontal scrolling pages through a combination of online tutorials and in-depth research.
https://github.com/nadjascodejourney/horizontal-scrolling-selfstudy
css horizontal-scrolling
Last synced: about 2 months ago
JSON representation
This repository is designed to develop skills in the area of horizontal scrolling on websites. The main goal is to gain a solid understanding of how to design and implement effective horizontal scrolling pages through a combination of online tutorials and in-depth research.
- Host: GitHub
- URL: https://github.com/nadjascodejourney/horizontal-scrolling-selfstudy
- Owner: nadjascodejourney
- Created: 2023-12-22T14:19:35.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-06-12T11:06:11.000Z (11 months ago)
- Last Synced: 2025-02-06T07:46:31.627Z (3 months ago)
- Topics: css, horizontal-scrolling
- Language: SCSS
- Homepage:
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Horizontal Scrolling Learning Project (German explanation below)
This learning project aims to master the creation of effective horizontal scrolling pages. By utilizing tutorials and extensive online research, I explore various techniques to build a solid foundation in horizontal scrolling.
## Objective
I find this self-chosen topic fascinating for the following reasons:
- **Creative Design Options**: The ability to differentiate from traditional vertical layouts.
- **Storytelling**: Horizontal scrolling can be used to simulate continuous progression through a narrative, making it suitable for presentations, image galleries, or interactive stories.
- **Responsive Design for Mobile Devices**: On mobile devices with small screens, horizontal scrolling can be a solution to display wider content without compromising usability.
- **Experimental and Interactive Design**: Encourages playful or unconventional user experiences, which can help capture visitor attention.
## Approach
### Tutorials and Guides
The focus is on the practical exploration of various online tutorials that concentrate on creating horizontal scrolling pages. Initially, this will include the use of HTML and CSS, and later on, JavaScript for implementation.
### Practical Implementation
I apply what I have learned by coding concrete examples. Different techniques and styles discovered through research and tutorials will be tried out to develop a versatile understanding of horizontal scrolling page design. Additionally, various solutions will be tested to determine which is best suited for specific tasks and which I prefer.
## References
Here are some of the references used:
- [Create a horizontal media scroller with CSS (by Kevin Powell)](https://www.youtube.com/watch?v=3yfswsnD2sw)
- [Pure CSS Horizontal Scrolling (by Pieter Biesemans)](https://css-tricks.com/pure-css-horizontal-scrolling/)
- [Creating horizontal scrolling containers the right way [CSS Grid] (by Dannie Vinther)](https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585)
- [Pure CSS Horizontal Website Tutorial for Beginners (by Red Stapler)](https://www.youtube.com/watch?v=OeaHnxahf40)
- [See Blog Entry here: Pure CSS Horizontal Scrolling Website Tutorial](https://redstapler.co/pure-css-horizontal-scrolling-website-tutorial/)
- [MDN web docs: scroll-padding-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline)
___________________________________________________________________________________________________________________
# **Horizontales Scrollen**
## Ziel:
Dieses Lernprojekt hat das Ziel, das Erstellen von effektiven horizontalen Scrollseiten zu erlernen. Durch die Nutzung von Tutorials und umfassender Recherche im Internet erkunde ich verschiedene Techniken, um eine fundierte Grundlage im Bereich des horizontalen Scrollens zu schaffen.
Ich finde dieses selbst gewählte Thema aus den folgenden Gründen sehr spannend:
- kreativere Designoptionen: Möglichkeit, sich von traditionellen, vertikalen Layouts zu unterscheiden.
- Storytelling: Für narrative oder storybasierte Inhalte kann horizontales Scrollen verwendet werden, um einen kontinuierlichen Fortschritt durch die Handlung zu simulieren. Dies eignet sich besonders gut für Präsentationen, Bildergalerien oder interaktive Geschichten.
- Responsives Design für Mobile Geräte: Auf mobilen Geräten mit kleinen Bildschirmen kann horizontales Scrollen eine Lösung sein, breitere Inhalte darzustellen, ohne die Benutzerfreundlichkeit zu beeinträchtigen.
- Experimentelles und Interaktives Design: weckt spielerische oder unkonventionelle Benutzererfahrung. Das kann dazu beitragen, die Aufmerksamkeit der Besucher zu steigern.
## Herangehensweise
### Tutorials und Anleitungen:
Der Fokus liegt auf der praktischen Erkundung verschiedener Tutorials aus dem Internet, die sich auf das Erstellen von horizontalen Scrollseiten konzentrieren. Dies wird zu nächst die Verwendung von HTML, CSS und später auch JavaScript für die Umsetzung einschließen.
### Praktische Umsetzung:
Ich wende das Gelernte praktisch an, indem ich konkrete Beispiele code. Dabei werden unterschiedliche Techniken und Stile ausprobiert, die ich durch die Recherche und Tutorials kennenlerne, um ein vielseitiges Verständnis für die Gestaltung von horizontalen Scrollseiten zu entwickeln. Außerdem gibts es verschiedene Lösungen und ich möchte herausfinden, welche sich je nach konkreter Aufgabenstellung am besten eignet und welche mir am besten gefällt.
## Referenzen
Hier sind einige der verwendeten Referenzen:
- Create a horizontal media scroller with CSS (by Kevin Powell), https://www.youtube.com/watch?v=3yfswsnD2sw
- Pure CSS Horizontal Scrolling (by Pieter Biesemans), https://css-tricks.com/pure-css-horizontal-scrolling/
- Creating horizontal scrolling containers the right way [CSS Grid] (by Dannie Vinther), https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585
- Pure CSS Horizontal Website Tutorial for Beginners (by Red Stapler), https://www.youtube.com/watch?v=OeaHnxahf40
- See Blog Entry here: https://redstapler.co/pure-css-horizontal-scrolling-website-tutorial/
- MDN web docs: scroll-padding-inline, https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline