Responsive Horizontal Scrolling

Design help General
1

Hey guys, I have a question about Horizontal Scrolling. I am creating a Horizontal Scrolling Responsive site with Parallax effect. An example of this is Horizillax - ProductiveThemes.com is for sale | HugeDomains.

I found a tutorial to do Parallax here - https://www.youtube.com/watch?v=-aXVcSkBEsk.

Would it be possible to create Responsive Horizontal Scrolling using Webflow. It is for a sidescrolling game so having a sidescrolling website will help with narrative and familiarize players. Below image is what my site’s layout will look like. Navigation Bar will resemble NES controller with Left/Right Arrows to move forward/backward and 3 buttons to jump to a specific page. Navbar will remain static while content will move left and right.

940Ă—582 23.1 KB

Thanks.

2

@PixelGeek made the video :wink: What do you think Nelson, would the JS lib you used work laterally?

1 Like
3

that JS that i showed in the video isn’t meant for going from one panel to another. It’s just a mouse position tracker.

So no. This wouldn’t be the solution for @zebualvi

1 Like
4

Thanks guys. I tried Parallax.JS inside FullPage.JS (fullPage.js | One Page Scroll sections Site Plugin) by duplicating content on two slides and it worked in Dreamweaver. While it moved content on both slides simulatenously, becuase you can only see one slide at a time, it kind of does the job in a way. There was some overlapping of images but I think with some depth adjustment/wrapper div overflow it can be avoided. Any suggestions?

Thanks.

5

@zebualvi do you mean that you have multiple layer on top of each other, that can be controlled separately? I’ve tried doing some horizontal scrolling myself, and my problem was with Z-index, that only the top-layer could be controlled by mouse movement.

Or do you want the layers to be connected and have a different moving speed (say 0.1 ; 0.2; 0.4 if there’s three layers)? Because that would be hard to do in WF I’d say. Purely theoretically you’d need anchors and JS to do it. Maybe @bartekkustra knows.

6

@zebualvi one possible workaround could be to use a slider widget and interactions:

(1) Make fullscreen slider
(2) Add your fullscreen background layers (for the parallax effect)
(3) Use the slider trigger interaction to move the background elements horizontally (at different percentages)

See an example of this at grate.willwong.me (click on the “login” example and navigate through the slider)

As for implementing the horizillax plugin - that may take some time to test it out but definitely interested in trying this :slight_smile:

2 Likes
7

Here’s a bit more info on what I did to get some horizontal scrolling going.

Put everything in a wrapper div with these settings:

<style>     .t_s_holder { overflow-y: auto; } </style>

The inner divs I no-wrapped:

.t_d_right { white-space: nowrap;}
.t_d_left { white-space: nowrap;}

Loaded Jquery, mouseweel.js, and gave it some functionality:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="https://cdn.rawgit.com/jquery/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<script>
$(document).ready(function() {
    $('.t_s_holder').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 40);
        e.preventDefault();
    });
});
</script>

See demo: Webflow - Horizontal Scrolling done right
and the result here:
http://horizontalscrolling.webflow.io/

1 Like
8

Thanks for the ideas guys, really appreciate it. I’m using Webflow because I haven’t touch Dreamweaver in ages so If i can get a responsive page design with @PixelGeek’s Parallax tut, would it be possible to take HTML and CSS code out and put it in FullPage.JS and go from there? My understanding, which is definitely wrong, is that if I have everything in place where I want them, I’ll put them inside one wrapper div in Dreamweaver and have that div move/slide using FullPage.JS.

Parallax is an important element of my design idea but Responsive horizontal design is far more important for now as after my initial presentation in class I will get a 2-3 extra weeks to refine it before final submission.

@Diu I am thinking something simple and similar as this - http://andwecode.com/playground-demo/naruto-with-parallax-js/. Basically I have three pages: Home Page that has my Main character inside a home (L1), L2/Second page is a garden with all game characters and final page is just a container with Unity Webplayer to allow players to directly play my game inbrowser.

@thewonglv Your approach is similar to FullPage.JS. As long as I have three horizontal pages that are responsive, it may work as intended.

1 Like
9

ok, thanks for the elaboration. What you want could also be achieved with interactions as @thewonglv pointed out.

Still, the horizontal responsive bugs me. I’m not sure what you mean with that. Instead of scroll down (as everybody does on mobile these days) scroll to the side?

If that doesn’t work, you could hack it with one 100% width & height background with a fixed background (your L1), have L2 slide over with scroll functionality (but interactions is more easy, just use scroll, move to left 100% and you’re done), and then do the same with your third page.

But, i’d seriously go with @thewonglv 's solution. ;D

10

@Diu If you scroll down to second page and slide left/right, that’s exactly what I have in mind for scrolling. FullScreen Backgrounds - fullPage.js. I chose Sidescrolling/Horizontal Scrolling becuase I am making an 8-Bit 2.5D game in which players move in X and Y direction only similar to NES/Sega Mega II games. Having a website that shows level design and similar movement will help explain/define the idea better for people.

11

Yeah and it would all be in the Webflow Designer (no code or clunky plugin behavior) however, it is still just a workaround to having a true parallax effect. Please share your progress - I’m excited to see how it goes :slight_smile:

12

Thanks @thewonglv I’ll final my design in Photoshop, remake it in Webflow over the next three days and put it up here so you guys can see and provide feedback. I’ll follow your method of Slideshow, hopefully it will atleast be a good enough starting point so you guys can have a look and suggest changes. Appreciate all the reply. Thanks once again.

13

Ok, I got it. (finally ;)) I’m interested to see what you make of it. I’m sure it will be rewarding to get it fixed!

14

Hey guys, I’m looking for a way to do smooth horizontal scrolling. This is what I’ve made so far - http://thecomeback.webflow.io/. Any ideas on what I should do to scroll to a particular section when click on Nav Bar?

I also have a question about tooltip. Each character in my game will have its own story which will be told via animation. I was wondering if there’s a way to create a div that will have text and youtube/vimeo file, which will show up once you hover over/touch any character on my site.

Thanks.

15

First of all, compliments for the unique design. It’s totally going up for webby awards. :wink:
It seems you’ve figured out the scrolling to section part yourself.
How’s the tooltip coming along? You’ve made div’s for the bad guys already. It seems to me you can easily insert video and other stuff there right?

Cheers

16

@Diu Thanks man, glad you like the site. Its still a work in progress, i do intend on using animations and text in div boxes when they are ready though that will take a few months. For now it covers part of my class assessment so i’m focusing on making first game level now for final page which is due in a few weeks. After that i’ll spruce up my tooltips which should be easy. My final project is due in mid of next year so ill keep on tweaking my site accordingly as well.

Thanks.

17

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.