1

I'm trying to make an entire website with all events triggered by scrolling. I just need help to achieve this effect :

  1. I have a website with a few divs which fill all the viewport, I want the user to be able to scroll down to a named div and then when he keep scrolling the website stop scrolling vertically but the content of the div scroll horizontally. when it's done the website can scroll vertically again.

explainations

<body>

<header> </header>

<div class="scroll-vertical" id="tile1"></div>
<div class="scroll-vertical" id="tile2"></div>
<div class="scroll-vertical" id="tile3"></div>

<div class="scroll-horizontal" id="tile4">
    <div class="horizontal" id="tile5"></div>
    <div class="horizontal" id="tile5-a"></div>
    <div class="horizontal" id="tile5-b"></div>
    <div class="horizontal" id="tile5-c"></div>
</div>

<div class="scroll-vertical" id="tile6"></div>
<div class="scroll-vertical" id="tile7"></div>
<footer> </footer>

  1. How to make that the website can only be scrolled from one div to the other ( full page)

I know there is a jquery plugin named fullpage.js which does that pretty well but as a student learning web development using plugins is not the best way to improve my skills.

Thanks for your help!

Cheers Simon

Simon Renault
  • 80
  • 11

1 Answers1

0

Why would you assume that ? I doubt it can get much simpler than

$(document).ready(function() {
    $('#fullpage').fullpage();
});

The author of the plugin also most likely already encountered, considered and had to solve a number of details and issues, cross-browser and non, that you have not yet had a chance to think about.

Edit :: animating divs:

$( "#bigasshorizontaldiv" ).animate({
    left: "-=thewidthofoneviewport",
    }, 5000, function() {
    // Animation complete.
});
deg
  • 457
  • 3
  • 8
  • Yes of course you are completely right, but my goal here is also to fuly undurstand how it works, i'm new to webdevelopement and trying to learn and using all the times plugins to solve my problems is not the best way to do that. And fullpage.js is not free and right-free so as a student it is a problem. – Simon Renault Aug 30 '17 at 20:57
  • I agree wholeheartedly. I wanted you to know a "much simpler way" is quite a stretch, to avoid mis-expectations. – deg Aug 30 '17 at 21:02
  • Don't worry, maybe I should change that, english is not my native so sometimes I may not use the most suitable word. I will change that so it's easier to understand. – Simon Renault Aug 30 '17 at 21:04
  • It seems to be free though, what gives you the impression it isn't ? – deg Aug 30 '17 at 21:05
  • fullpage.js-master is free but the extension allowing for horizontal and vertical scrolling is 23£. But for me, the bigger problem is the one solved with this extension and not with the main library. With a bit of time and patience, i'm pretty sure I will succeed to make this kind of full page scroll. – Simon Renault Aug 30 '17 at 21:10
  • Would the big problem be the fixed screen-to-screen scrolling, or the horizontal scrolling ? – deg Aug 30 '17 at 21:15
  • The horizontal one as I need to stop the scrolling of the page and switch to an horizontal scrolling. – Simon Renault Aug 30 '17 at 21:23
  • This - https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily - and an amount of js/jq to adapt the div sizes to the current viewport may help. – deg Aug 30 '17 at 21:33
  • thank you, yes it will help, now have to find how to transform the vertical scroll action into horizontal scrolling inside the div. – Simon Renault Aug 30 '17 at 21:45