#Perfect-Scroll#
This is a javascript and html document inspired by Apple's iPhone 5C and 5S website
First, I use JQuerys powerness. This is a very simple, light, and easy to use template.
<!-- A simple <div> tag works very well -->
<div id="page">
<div class="full lightgreen"></div>
<div class="full lightblue"></div>
<div class="full lightgrey"></div>
<div class="full darkblue"></div>
</div>
var nextscroll, prevscroll, scrolling = false, currpage = 0;
var body = document.getElementById("page");
if(body.addEventListener)
{
body.addEventListener("mousewheel", Scroll, false);
body.addEventListener("DOMMouseScroll", Scroll, false);
} else {
body.attachEvent("onmousewheel", Scroll);
};
function Scroll(scrollEvent)
{
scrollEvent.preventDefault();
var scrollEvent = window.event || scrollEvent;
var pos = Math.max(-1, Math.min(1, (scrollEvent.wheelDelta || -scrollEvent.detail)));
if(!scrolling)
{
scrolling = true;
if(pos > 0)
{
if(currpage > 0)
{
currpage --;
};
} else {
if(pos < 0)
{
if(currpage<$(".full")["length"])
{
currpage ++;
};
};
};
$("html,body").animate({scrollTop:($(".full").height() * currpage) + "px"},800,function ()
{
scrolling = false;
});
};
};
.full {
width: 100%;
height: 100%;
font-family: 'Open Sans',Helvetica,Arial,san-serif;
}
.full { overflow: hidden; position: relative; }
.number {
width: 400px;
height: 400px;
border-radius: 100%;
.wo(.1);
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
z-index:9;
text-align: center;
&:before{
font-size:300px;
line-height:360px;
display:block;
width:360px;
height:360px;
position:absolute;
border-radius:100%;
top:20px;
left:20px;
}
}
- Creator : @RemiDelhaye (http://remidelhaye.fr)