80 lines
1.5 KiB
HTML
80 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
|
|
<title>Pausing</title>
|
|
|
|
<style type="text/css">
|
|
* {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
html, body {
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
body {font-family:sans-serif;}
|
|
|
|
body > div {
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
background:transparent center no-repeat;
|
|
background-size:cover;
|
|
}
|
|
|
|
body > div:nth-child(1) {
|
|
background-image:url(http://placekitten.com/800/600?image=1);
|
|
}
|
|
|
|
body > div:nth-child(2) {
|
|
background:#f0f0f0;
|
|
overflow:hidden;
|
|
}
|
|
|
|
body > div:nth-child(3) {
|
|
background-image:url(http://placekitten.com/800/600?image=3);
|
|
}
|
|
|
|
.box {
|
|
position:absolute;
|
|
left:0;
|
|
height:100%;
|
|
background:#09f;
|
|
}
|
|
|
|
p {margin:1em 0;}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div data-0="transform:translate(0,0%);" data-100p="transform:translate(0,-100%);"></div>
|
|
|
|
<div data-0="transform:translate(0,100%);" data-100p="transform:translate(0,0%)" data-_box-100p="" data-_box-200p="transform:translate(0,-100%)">
|
|
<div class="box" data-100p="width:0%;" data-_box-100p="width:100%"></div>
|
|
</div>
|
|
|
|
<div data-_box-100p="transform:translate(0,100%);" data-_box-200p="transform:translate(0,0%);"></div>
|
|
|
|
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
skrollr.init({
|
|
constants: {
|
|
//fill the box for a "duration" of 150% of the viewport (pause for 150%)
|
|
//adjust for shorter/longer pause
|
|
box: '150p'
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|