12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- <!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>
|