This seems to have been asked before without a sufficient answer. I have absolutely no knowledge of how to do this (including no plugins). I want my website to scroll horizontally when I actively scroll down vertically.
Some examples of what I mean: http://hotdot.pro/en/ and http://mashup.ikm.gda.pl/
To be clear, I don't care about the parallax effect that both of these websites utilize. I just want to scroll horizontally.
Thanks!
Try this: You need to add a script reference to jquery and to the mouse wheel plugin. And then use this JS:
$(function() {
$("body").mousewheel(function(evt, chg) {
this.scrollLeft -= (chg * 50); //need a value to speed up the change
evt.preventDefault();
});
});
Script References:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/jquery.mousewheel.js"></script>
you can directly use the first one, jquery script, as is because it is a public repository, but the second, the mousewheel.js will require you to save the .js file somewhere on your server and provide a link to it (similar to how you provide links for images in the src attribute).
Plugin: https://github.com/brandonaaron/jquery-mousewheel
Reference: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/