CODEWITHSUNDEEP
javascriptjquerycss
Luigi Carlni
Luigi Carlni

Reputation: 1

jQuery Mouse scrolling entire windows every scroll, like aplle iphone5 website

Does any one know how can I set a scrolling of 100% of the window like in this website?

I have a website with a vertical scrolling, with every < div > set on li100% width and 100& height, i have an anchor system that allows me to scroll directly from a slide to another, using links on every < div ID >

i would like to be able to do the same things with the mouse wheel,

http://www.apple.com/iphone-5c/

mine website:

http://www.mb.nullame.com/

Upvotes: 0

Views: 2387

Answers (2)

Alvaro
Alvaro

Reputation: 41595

You can make use of fullpage.js. It does exactly what you are looking for. Also, it is compatible with old browsers such as Internet Explorer 8, 9...

It is quite complete. You can add a menu, change the scrolling easing, the speed, use arrows to move, make it loop...

You can dowload it from the github repository.

Upvotes: 3

Lapsio
Lapsio

Reputation: 7064

I'd make website body with absolute positioning 100% x 100% (to fill browser window) put into it div with real website content and disable scrolling (overflow hidden) then by listening to onmousewheel event (and touch events for touch devices) manage site - I'd make it as 5 sets of css rules for each 'frame' with transitions to make it look 'fluent'. In fact it can be played well with css - so you'd need in fact change only one class - class of this div with real site to 'scroll' it through viewport. Children elements could have parent dependent css like:

.pictureA{
  position:absolute;
  transition:all 0.5s;
}
.realBody_0 .pictureA{
  left:-50%;
}
.realBody_1 .pictureA{
  left:0;
}

and after let's say 5 mousewheel events change div with content class to realBody_1. (ofc count wheel up/down to properly manage it)

Upvotes: 0

Related Questions