{"id":10876,"date":"2020-08-21T15:00:37","date_gmt":"2020-08-21T13:00:37","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=10876"},"modified":"2023-08-29T12:15:18","modified_gmt":"2023-08-29T10:15:18","slug":"horizontal-scrolling-websites","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/horizontal-scrolling-websites\/","title":{"rendered":"17 Stunning Examples of Sites with Horizontal Scrolling"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Intuitive navigation is among the key elements of web design. The way we move from one section of a site to the next and how we browse the content can deeply affect our user experience. Most of the time, website owners want to play it safe, and so they go with the tried-and-true vertical navigation that we\u2019re all accustomed to. However, horizontal scrolling can look way more interesting than its vertical counterpart.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A side scroll layout is an attractive and practical choice, especially for portfolio websites, catalogues, maps, and similar. Discovering projects, exploring cities, and visiting online galleries is far more engaging with sideways navigation. <strong>When done right, horizontal scrolling can make a website more appealing, fun, and memorable, as the websites on our list beautifully illustrate<\/strong>. These are some bespoke examples that represent the perfect synthesis of striking content and clear horizontal navigation:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">\n<a href=\"#square\">Square<\/a>\n<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#home-societe\">Home Soci\u00e9t\u00e9<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#d-potfer-studio\">D. Potfer Studio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#kwok-yin-mak\">Kwok Yin Mak<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#prevint\">Prevint<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#canals\">Canals<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#qode-interactive-catalog\">Qode Interactive Catalog<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#christie-tang\">Christie Tang<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#peakn-film\">Peak\u2019n Film<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#gosha-khidzhakadze\">Gosha Khidzhakadze<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#gingko\">Gingko<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#emanuele-milella\">Emanuele Milella<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#myles-nguyen\">Myles Nguyen<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#parsons-branding\">Parsons Branding<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#studio-bjork\">Studio Bj\u00f6rk<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#ciao-bella\">Ciao Bella<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">\n<a href=\"#vogue-espana\">Vogue Espa\u00f1a<\/a>\n<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Check out the awesome horizontal scrolling widgets we introduced with Qi Addons for Elementor:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/interactive-project-carousel\/\" target=\"_blank\">Interactive Project Carousel widget<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/numbered-slider\/\" target=\"_blank\">Numbered Slider widget<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/horizontal-double-row-projects\/\" target=\"_blank\">Horizontal Double Row widget<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/fixed-project-slider\/\" target=\"_blank\">Fixed Project Slider widget<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"square\"><\/a>Square<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/square.geex-arts.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Square.jpg\" class=\"attachment-full size-full\" alt=\"Square\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Square.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Square-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Square-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Exploring <a href=\"https:\/\/square.geex-arts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Square<\/a>\u2019s fascinating website is an unforgettable experience. This is an online platform where people can exhibit their works and it\u2019s executed in such a creative manner. From the get-go, you\u2019re invited to explore the site with a <em>Let\u2019s Rock!<\/em> button that, when clicked, opens the gates of a web empire where contrasting colors, popular animated GIFs, <a href=\"https:\/\/qodeinteractive.com\/magazine\/web-design-90s-look\/\">\u201890s-inspired<\/a> images, and synth melodies welcome you. And all this happens before you even access the main content.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To see the artists\u2019 works, you first have to drag a square using your mouse until it reaches the finish line embodied by a red dot. As you roll the square, some well-known illustrated characters show up to keep you company, such as Super Mario, Darth Vader, Eric Cartman, Bender from Futurama, etc. Only after you\u2019ve completed this minigame do you get to see the featured projects.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the homepage, you\u2019ll see the word <em>Square<\/em> written in huge, all caps letters across the screen, and, depending on how you move your mouse pointer, the letters will lean in that direction, too. <strong>This action also impacts the way you move through the site. If you move your cursor in any direction, your floating adventure through the Square universe will commence<\/strong>. You get to choose whether you\u2019d like to explore it in a horizontal, vertical, or even random manner.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"home-societe\"><\/a>Home Soci\u00e9t\u00e9<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/homesociete.ca\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Home-Soci\u00e9t\u00e9.jpg\" class=\"attachment-full size-full\" alt=\"Home Soci\u00e9t\u00e9\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Home-Soci\u00e9t\u00e9.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Home-Soci\u00e9t\u00e9-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Home-Soci\u00e9t\u00e9-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/homesociete.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">Home Soci\u00e9t\u00e9<\/a> is a brand that makes luxurious furniture for homes and outdoor spaces. Their website was crafted by the award-winning <a href=\"https:\/\/locomotive.ca\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Locomotive<\/a> agency, so it\u2019s not surprising it looks so creative and interesting from the very first scroll to the last. <strong>This is a one-pager with a sleek, left-to-right horizontal scroll. The whole site is essentially simple, but enrapturing thanks to smooth animation effects and attractive showcases of the company\u2019s works<\/strong>. The main navigation is clear and visible at all times, placed on the left-hand side of the screen, so you can always jump right to the section you\u2019re most interested in. When you reach the end of the horizontally scrolling home page, you\u2019re greeted with a fullscreen section of <a href=\"https:\/\/qodeinteractive.com\/magazine\/large-typography-web-design\/\">large typography<\/a> that beautifully complement the brand\u2019s contemporary designs.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"d-potfer-studio\"><\/a>D. Potfer Studio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/dpotferstudio.com\/work\/art-de-vivre-communication\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/D.-Potfer-Studio.jpg\" class=\"attachment-full size-full\" alt=\"D. Potfer Studio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/D.-Potfer-Studio.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/D.-Potfer-Studio-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/D.-Potfer-Studio-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/dpotferstudio.com\/work\/art-de-vivre-communication\/\" target=\"_blank\" rel=\"noopener noreferrer\">D. Potfer Studio<\/a> is a French consulting and communication studio that specializes in art de vivre, culture, and food and beverage. <strong>Their works are displayed in a horizontally-scrolling carousel gallery<\/strong>. The imagery looks very soft, dreamy, and is wonderfully juxtaposed with the thin, sharp typography. The graphics are also stunningly animated, which makes the scrolling adventure all the more fun.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"kwok-yin-mak\"><\/a>Kwok Yin Mak<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.kwokyinmak.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Kwok-Yin-Mak.jpg\" class=\"attachment-full size-full\" alt=\"Kwok Yin Mak\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Kwok-Yin-Mak.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Kwok-Yin-Mak-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Kwok-Yin-Mak-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.kwokyinmak.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kwok Yin Mak<\/a>\u2019s site is a wonderful oasis of minimalism that undoubtedly leaves a strong impression on visitors. <strong>This is another stunning example of a one-page website with horizontal scrolling that, in this case, works both ways<\/strong>. <strong>As soon as the site loads, you can choose to scroll either left or right<\/strong>. The main navigation is somewhat hidden in the bottom-left corner of the screen. But as you hover over <em>About<\/em>, <em>Work<\/em>, and <em>Guestbook<\/em>, an arrow will point you in which direction to scroll to reach those sections. Thanks to the use of eye-catching photographs, great typography choices, font sizes, and simple animation effects, Kwok has managed to create a terrific website that beautifully showcases his creativity and skills.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"prevint\"><\/a>Prevint<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.prevint.pt\/en\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Prevint.jpg\" class=\"attachment-full size-full\" alt=\"Prevint\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Prevint.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Prevint-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Prevint-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.prevint.pt\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">Prevint<\/a> is an interpersonal violence prevention programme whose goal is to raise awareness about the various types of violence people are most often exposed to. The designers of this site have opted for a horizontal navigation to introduce visitors to what their organization is about and to share three spectrums that may be helpful to the people exposed to violence.<strong> This website is a great example of how the horizontal scrolling effect can be a great choice when you wish to present some general ideas to your users, but you don\u2019t necessarily have to stick to it on the whole site<\/strong>. In fact, here the horizontal navigation disappears in favor of the storytelling scroll effect once visitors click to learn more about any of the spectrums. Prevint\u2019s website has been awarded multiple times and has won the <em>Website of the Day<\/em> awards on <a href=\"https:\/\/www.cssdesignawards.com\/sites\/prevint\/36143\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Design Awards<\/a>, <a href=\"https:\/\/www.awwwards.com\/sites\/prevint\" target=\"_blank\" rel=\"noopener noreferrer\">Awwwards.<\/a>, and <a href=\"https:\/\/thefwa.com\/cases\/prevint\" target=\"_blank\" rel=\"noopener noreferrer\">The FWA<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"canals\"><\/a>Canals<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/canals-amsterdam.nl\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Canals.jpg\" class=\"attachment-full size-full\" alt=\"Canals\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Canals.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Canals-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Canals-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/canals-amsterdam.nl\/\" target=\"_blank\" rel=\"noopener noreferrer\">Canals<\/a> is a charming project created with the purpose of telling the story behind the famous Amsterdam canals. <strong>This captivating website resembles a magazine, and thanks to the horizontal navigation, we almost feel as if we\u2019re holding a physical copy in our hands and we\u2019re flipping through its pages<\/strong>. The marvelous imagery, parallax effects, bold typography, and vivid colors, instantly transport you right on the banks of these historic canals. The main menu is visible on the left side of the screen. As you scroll, the menu\u2019s color will change depending on the background hue of the slide you\u2019re looking at.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"qode-interactive-catalog\"><\/a>Qode Interactive Catalog<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/qodeinteractive.com\/catalog\/\" target=\"_blank\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Qode-Interactive-Catalog.jpg\" class=\"attachment-full size-full\" alt=\"Qode Interactive Catalog\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Qode-Interactive-Catalog.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Qode-Interactive-Catalog-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Qode-Interactive-Catalog-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We created the <a href=\"https:\/\/qodeinteractive.com\/catalog\/\" target=\"_blank\" rel=\"noopener noreferrer\">Qode Interactive Catalog<\/a> with the goal of showcasing an original approach to contemporary web design. The Catalog is a curated compilation of several of our creative themes, all with distinct aesthetic qualities inspired by a variety of art forms. <strong>We chose to implement a horizontal scroll in this project to evoke the effect of walking through a gallery space and viewing artwork<\/strong>. As you hover over the name of each featured theme, you\u2019ll catch a glimpse of its design. And by clicking on the title, you can start exploring the theme\u2019s project page. We\u2019ve kept the side scrolling here as well, since we didn\u2019t want to disrupt the horizontal harmony on individual pages. The QI Catalog has won several awards, including the <a href=\"https:\/\/www.awwwards.com\/sites\/qode-interactive-catalog\" target=\"_blank\" rel=\"noopener noreferrer\">Site of the Day<\/a> recognition by Awwwards, the <a href=\"https:\/\/www.cssdesignawards.com\/sites\/qode-interactive-catalog\/35736\" target=\"_blank\" rel=\"noopener noreferrer\">Website of the Day<\/a> award from CSSDA, and the <a href=\"https:\/\/www.commarts.com\/webpicks\/the-catalog\" target=\"_blank\" rel=\"noopener noreferrer\">Webpicks<\/a> award by Communication Arts, among others.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;latest-themes&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"christie-tang\"><\/a>Christie Tang<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/christietang.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Christie-Tang.jpg\" class=\"attachment-full size-full\" alt=\"Christie Tang\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Christie-Tang.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Christie-Tang-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Christie-Tang-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/christietang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Christie Tang<\/a> is a product designer with a remarkable portfolio website. <strong>The horizontal navigation allows us to explore a reel of her latest works, which elegantly glide from the right to the left side of the screen<\/strong>. As you reach the seventh project, the background color turns from white to black and the navigation goes from horizontal to vertical. With each new scroll, you are led straight into the depths of Christie\u2019s creative world which features examples of her artistry and versatility. The main menu is always visible and placed at the top of the screen. As you hover over the menu, a cool thing happens \u2013 amusing videos show up over the entire screen (one of them even shows Christie herself playing a video game), inciting you to learn more about this undoubtedly unique and inspiring designer.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"peakn-film\"><\/a>Peak\u2019n Film<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/peaknfilm.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Peak\u2019n-Film.jpg\" class=\"attachment-full size-full\" alt=\"Peak\u2019n Film\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Peak\u2019n-Film.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Peak\u2019n-Film-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Peak\u2019n-Film-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Behind <a href=\"https:\/\/peaknfilm.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Peak\u2019n Film<\/a> stands Thom Garcin, a French photographer and video maker. This amazing website is a captivating display of Thom\u2019s breathtaking works. Everything is simple and minimalistic, which allows his work to steal the spotlight. At the top of the page, there\u2019s a progress bar showing you how far you\u2019ve come and how much of his images are left to be seen. <strong>The horizontal effect is smooth, works like magic in both directions, and complements Thom\u2019s portfolio perfectly<\/strong>. The whole project is astounding, hence all the awards it won at <a href=\"https:\/\/thefwa.com\/cases\/peakn-film-p2\" target=\"_blank\" rel=\"noopener noreferrer\">The FWA<\/a>, <a href=\"https:\/\/www.awwwards.com\/sites\/peakn-film\" target=\"_blank\" rel=\"noopener noreferrer\">Awwwards<\/a>, and <a href=\"https:\/\/www.cssdesignawards.com\/sites\/peakn-film\/37061\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Design Awards<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"gosha-khidzhakadze\"><\/a>Gosha Khidzhakadze<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.gosha.xyz\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Gosha-Khidzhakadze.jpg\" class=\"attachment-full size-full\" alt=\"Gosha Khidzhakadze\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Gosha-Khidzhakadze.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Gosha-Khidzhakadze-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Gosha-Khidzhakadze-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.gosha.xyz\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gosha Khidzhakadze<\/a> is a developer with an unpretentious website that is very pleasing on the eye and fun to explore. The imagery is monochromatic and the background is neutrally colored. So what immediately grabs your attention <strong>is Gosha\u2019s name written in massive, orange letters that slowly move off-screen as you scroll through his works<\/strong>. When you place your mouse cursor over any project, the images become wavy, as if observed through water, and this is where Gosha\u2019s expertise in animation becomes evident. The pointer assumes the form of a dispersed circle, and as you move it over a photo, it reveals snippets of other pictures featured in the selected project.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"gingko\"><\/a>Gingko<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.gingko.pro\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Ginko-1.jpg\" class=\"attachment-full size-full\" alt=\"Ginko\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Ginko-1.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Ginko-1-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Ginko-1-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We mentioned this website in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/floral-illustrations-in-web-design\/\">floral illustrations<\/a>, but <a href=\"https:\/\/www.gingko.pro\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gingko<\/a> is also a <strong>great example of horizontal navigation in action<\/strong>. With each scroll, you get more drawn into Karine Goxe\u2019s inviting world of landscape architecture. All the animation effects are unobtrusive and everything flows smoothly, but the horizontal harmony is a bit shaken up at the section where Karine\u2019s works are displayed \u2013 that\u2019s where vertical navigation takes the reins, even if only momentarily.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"emanuele-milella\"><\/a>Emanuele Milella<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/emanuelemilella.com\/works\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"401\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Emanuele-Milella.jpg\" class=\"attachment-full size-full\" alt=\"Emanuele Milella\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Emanuele-Milella.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Emanuele-Milella-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Emanuele-Milella-620x355.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/emanuelemilella.com\/works\/\" target=\"_blank\" rel=\"noopener noreferrer\">Emanuele Milella<\/a> is a creative director and interactive designer with an award-winning portfolio website. The pages are covered in sandy-like, grainy texture that gives the site a retro vibe. <strong>The <em>Works<\/em> section is where the horizontal scrolling effect enters the scene. You can keep track of how many projects you\u2019ve seen by keeping an eye on massive, bold numbers displayed next to each project or by checking out the progress bar placed below images<\/strong>. When you hover your mouse over a picture, the graphics start to follow the movement of the cursor and so they become distorted, though not dramatically. This is just an amusing element that demonstrates Emanuele\u2019s attention to detail and his clever ways of adding a fun factor to projects.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"myles-nguyen\"><\/a>Myles Nguyen<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/mylesnguyen.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Myles-Nguyen.jpg\" class=\"attachment-full size-full\" alt=\"Myles Nguyen\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Myles-Nguyen.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Myles-Nguyen-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Myles-Nguyen-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The content on <a href=\"https:\/\/mylesnguyen.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Myles Nguyen<\/a>&#8216;s website appears to make perpetual waves. Quite literally. <strong>The undulating effect extends throughout the entire site, so the choice of horizontal navigation makes perfect sense<\/strong>. <strong>With each scroll, users feel as if they\u2019re conquering waves, which lead them straight to the examples of Myles\u2019 works<\/strong>. To make this mostly monochromatic showcase even more memorable, Myles has infused the content with humor and sarcasm, showcasing his interesting personality some more.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"parsons-branding\"><\/a>Parsons Branding<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.parsonsbranding.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Parsons-Branding.jpg\" class=\"attachment-full size-full\" alt=\"Parsons Branding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Parsons-Branding.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Parsons-Branding-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Parsons-Branding-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.parsonsbranding.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Parsons Branding<\/a> is a brand strategy and design studio from Cape Town. <strong>On their website, you can choose between a never-ending carousel and a full project grid view. If you opt for the former (which is set as the default view), you\u2019ll be able to browse through the studio\u2019s projects using horizontal scrolling, whereas the latter comes with an infinite scrolling space you can go through in any direction you desire<\/strong>. Once you find the project you wish to know more about, click on it to open a case study. And when you reach the study\u2019s end, another one about some other project will load, and so on, supporting the idea of continuity which is omnipresent on this website.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"studio-bjork\"><\/a>Studio Bj\u00f6rk<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"http:\/\/www.studiobjork.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Studio-Bj\u00f6rk.jpg\" class=\"attachment-full size-full\" alt=\"Studio Bj\u00f6rk\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Studio-Bj\u00f6rk.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Studio-Bj\u00f6rk-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Studio-Bj\u00f6rk-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/www.studiobjork.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Studio Bj\u00f6rk<\/a>\u2019s website is another <strong>shining example of horizontal scrolling, which is used on each page of the site<\/strong>. This website is quite minimalistic, mostly in black and white, while the more vivid colors are visible only on the displayed works. The screen appears to be divided into several sections, each corresponding to one project. Below each picture, there are a few basic details about the piece of work in question. If you\u2019d like to learn about it in greater detail, click anywhere you want within the borders of the section where the work is showcased, and then read an in-depth case study about the project.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;horizontal-scrolling-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"ciao-bella\"><\/a>Ciao Bella<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.ciaobellanairobi.com\/en\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Ciao-Bella.jpg\" class=\"attachment-full size-full\" alt=\"Ciao Bella\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Ciao-Bella.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Ciao-Bella-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Ciao-Bella-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Spoiler alert:<\/strong> If you haven\u2019t watched season 4 of <em>La Casa de Papel<\/em> but plan to, you might want to skip this site as it reveals a major spoiler.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<a href=\"https:\/\/www.ciaobellanairobi.com\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Ciao Bella<\/a> was created by Netflix in tribute to Nairobi, one of the main characters in the hit show <em>La Casa de Papel<\/em>. The website is filled with photos, videos, letters, and audio content people from all over the world sent to their beloved character. The content is displayed over the entire screen and you can go through it by dragging the cursor in any direction you like. <strong>When you find something you\u2019d like to watch, read, or listen to, simply click on it<\/strong>. You can then drag your mouse horizontally to explore the content featured in the same row and discover what else the fans and the cast of the series had to say about Nairobi.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"vogue-espana\"><\/a>Vogue Espa\u00f1a<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.vogue.es\/micros\/tendencias-moda-anos-80\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"401\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Vogue-Espa\u00f1a.jpg\" class=\"attachment-full size-full\" alt=\"Vogue Espa\u00f1a\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Vogue-Espa\u00f1a.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Vogue-Espa\u00f1a-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Vogue-Espa\u00f1a-620x355.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.vogue.es\/micros\/tendencias-moda-anos-80\/\" target=\"_blank\" rel=\"noopener noreferrer\">Vogue Espa\u00f1a<\/a>\u2019s online edition about \u201880s fashion is a one-pager that highlights all the major fashion trends from the era of synth pop, leg warmers, and mullets. <strong>You can navigate through the \u201880s-themed graphic and textual content using horizontal navigation, and it\u2019s precisely this effect that gives the whole website a distinct lookbook-feel<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-theme-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Horizontal scrolling is an effect that has the power to make browsing more engrossing and enjoyable. What matters is to <strong>plan it well, make it easy to use, organize the content, and ensure the main navigation is visible at all times<\/strong>. It\u2019s important to keep things simple and clear to avoid confusing visitors. But that doesn\u2019t mean you shouldn\u2019t experiment with typeface choices, colors, and entrancing animation effects. Let\u2019s not forget about the parallax effect that was so efficiently used on several websites from our list. The point is, <strong>the elements you would consider adding to a vertical site can work just as well on the horizontal counterpart<\/strong>. Don\u2019t limit yourself just because you\u2019ve opted for a less popular navigation type. Be creative all you want, make your website aesthetically pleasing, add compelling and informative content, and above all, ensure your project is beneficial for your users.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Websites with horizontal scrolling are becoming increasingly popular, and rightly so. This web technique has the power to turn a simple browsing experience into an engrossing and memorable adventure, as these examples perfectly illustrate<\/p>\n","protected":false},"author":4,"featured_media":11187,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,43],"class_list":["post-10876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/10876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=10876"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/10876\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/11187"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=10876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=10876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=10876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}