Custom Javascript

We require some custom Javascript to handle split scrolling some sections and ignoring others of a page as necessary. Please visit: http://178.128.165.99/#4 for an example of this split scrolling behaviour.

We require this effect only with the ability to add sections that are not split scrolled.

An example HTML Mark up of such a page (head/body omitted for clarity)












...












...


As you can see from the above the JS code must be able to trigger split scrolling on only sections with the "split-scroll-section" class and ignore all other sections.

All sections will take up the full page width and height of a screen on desktop/mobile, as such 'split-scroll-sections' need only 'trap' the cursor for the desired number of swipes. i.e. if a split-scroll-section has 4 inner divs inside it a split-scroll-section needs to prevent a user from navigating to the next section until all inner content has been displayed, using the split scroll effect. in the case of having 4 inner divs, the first 2 would be shown by default meaning only 1 swipe needs to be trapped to show the remaining 2 divs, once these divs have been shown the next swipe/scroll can move to the next section

Scroll from one section to another on the page must be smooth, i.e. the slightest scroll should trigger animating to the next section to prevent seeing two different sections on screen once scrolling has stopped.

Please feel free to implement this is the best manner you see fit. As long we are able to control the implementation using simple css classes and the performance is smooth we are not particular on the method used to achieve this.