Dake Photography - DAKE DESIGN

p.dake.design/ib

Please use device with larger screen to interact with this demo.

Scroll from top to bottom and check what happens.

A new (maybe not) and user-friendly way to scroll webpage horizontally.

							
								$(window).on( "load", function() {
									$("#vertical-container").css({
										height: $('#contents').width() - $(window).width() + $(window).height()
									});
									$(window).on('scroll', function () {
										$("#contents").css({
											transform: "translateX(-" + window.scrollY + "px)"
										});
									});
								});

Overview

Most of the websites are designed to read from top to bottom. Viewers with mouses cannot scroll from left to right.

I designed a special scrolling experiences to make this photography portfolio website has a gallery feeling.

Process

First, let's create the layout.

We need to create a veritical container for holding fake height, a horizontal container to wrap contents, and a contents div to display contents.

								
									.horizontal-container {
										position: fixed;
										top: 0;
										width: 100vw;
										height: 100vh;
										overflow: hidden;
									}
									
									#contents {
										height: 100%;
										display: flex;
										align-self: flex-end;
										position: absolute;
									}

Then, let's give the page a fake height to scroll from top to bottom.

width of the contents— current window's width= the scrollable distance of the page the scrollable distance of the page+ current window's height= page's fake height

							
								$("#vertical-container").css({
									height: $('#contents').width() - $(window).width() + $(window).height()
								});

After creating the fake height, let's set up the scroll function.

I use jQuery's scroll event and transformX to animate the page's horizonal scroll.

							
								$(window).on('scroll', function () {
									$("#contents").css({
										transform: "translateX(-" + window.scrollY + "px)"
									});
								});

Last thing, wrap the code in $(window).on( "load", function() in order to prevent code load before all images are fully loaded.

If the code load before images are fully loaded, it cannot generate correct page height.

							
								$(window).on( "load", function() {
									$("#vertical-container").css({
										height: $('#contents').width() - $(window).width() + $(window).height()
									});
									$(window).on('scroll', function () {
										$("#contents").css({
											transform: "translateX(-" + window.scrollY + "px)"
										});
									});
								});