I'm looking to add a scroll effect, snapping to the top of a div when the scroll wheel is released. The only problem is each div has 100% height (thus one image will be on screen at a time).
I come across this fiddle: http://jsfiddle.net/djsbaker/dxzk4/ which seems to work nicely with 300px intervals, but how can something like this be translated to divs with 100% height?
Here's my code:\[code\]<div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div><div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div><div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div>\[/code\]CSS:\[code\] .fill-browser{ position:relative; left: 1%; height:98%; width:98%; margin-bottom: 5px; background: no-repeat 50% 50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }\[/code\]Here's a jsfiddle demo too: http://jsfiddle.net/vHAWW/
I come across this fiddle: http://jsfiddle.net/djsbaker/dxzk4/ which seems to work nicely with 300px intervals, but how can something like this be translated to divs with 100% height?
Here's my code:\[code\]<div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div><div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div><div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div>\[/code\]CSS:\[code\] .fill-browser{ position:relative; left: 1%; height:98%; width:98%; margin-bottom: 5px; background: no-repeat 50% 50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }\[/code\]Here's a jsfiddle demo too: http://jsfiddle.net/vHAWW/