<div class="page-scroller">
<div class="list-wrapper">
<ul class="list">
<li>
<h3>Monocle List</h3>
<p>Scroll the page and watch list items expand under this magnifying area.</p>
</li>
<li>
<h3>Checkwave</h3>
<a target="_blank" href="http://lab.hakim.se/checkwave">lab.hakim.se/checkwave</a>
<p>Released 2014-06-26</p>
</li>
<li>
<h3>Device Loop Animation</h3>
<a target="_blank" href="http://lab.hakim.se/device-loop">lab.hakim.se/device-loop</a>
<p>Released 2013-09-20</p>
</li>
<li>
<h3>Flexing Pagination Arrows</h3>
<a target="_blank" href="http://lab.hakim.se/flexing-pagination">lab.hakim.se/flexing-pagination</a>
<p>Released 2013-09-19</p>
</li>
<li>
<h3>CSS Animation: Hole</h3>
<a target="_blank" href="https://codepen.io/hakimel/full/fILbu">codepen.io/hakimel/full/fILbu</a>
<p>Released 2013-07-17</p>
</li>
<li>
<h3>CSS Animation: Spinner</h3>
<a target="_blank" href="https://codepen.io/hakimel/full/CxliK">codepen.io/hakimel/full/CxliK</a>
<p>Released 2013-07-17</p>
</li>
<li>
<h3>CSS Animation: Cloud</h3>
<a target="_blank" href="https://codepen.io/hakimel/full/aIhkf">codepen.io/hakimel/full/aIhkf</a>
<p>Released 2013-07-17</p>
</li>
<li>
<h3>Ladda</h3>
<a target="_blank" href="http://lab.hakim.se/ladda">lab.hakim.se/ladda</a>
<p>Released 2013-05-28</p>
</li>
<li>
<h3>Slides</h3>
<a target="_blank" href="http://slides.com">slides.com</a>
<p>Released 2013-05-12</p>
</li>
<li>
<h3>Kontext</h3>
<a target="_blank" href="http://lab.hakim.se/kontext">lab.hakim.se/kontext</a>
<p>Released 2013-02-26</p>
</li>
<li>
<h3>Hypnos</h3>
<a target="_blank" href="http://lab.hakim.se/hypnos">lab.hakim.se/hypnos</a>
<p>Released 2012-11-27</p>
</li>
<li>
<h3>Kort</h3>
<a target="_blank" href="http://lab.hakim.se/kort">lab.hakim.se/kort</a>
<p>Released 2012-10-29</p>
</li>
<li>
<h3>Fokus</h3>
<a target="_blank" href="http://lab.hakim.se/fokus">lab.hakim.se/fokus</a>
<p>Released 2012-09-23</p>
</li>
<li>
<h3>Meny</h3>
<a target="_blank" href="http://lab.hakim.se/meny">lab.hakim.se/meny</a>
<p>Released 2012-08-25</p>
</li>
<li>
<h3>reveal.js</h3>
<a target="_blank" href="http://lab.hakim.se/reveal-js">lab.hakim.se/reveal-js</a>
<p>Released 2011-12-04</p>
</li>
<li>
<h3>Monocle List</h3>
<p>This is inspired by a Flash site I saw years back.</p>
</li>
</ul>
</div>
</div>
<div class="page-wrapper">
</div>$textColor: #fff;
$rowWidth: 280px;
$rowHeight: 80px;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
font-family: 'Roboto', Helvetica, sans-serif;
background-color: #222;
color: $textColor;
}
.page-scroller {
position: relative;
height: 400%; // arbitrary scroll height
z-index: 1;
.list-wrapper {
display: none;
}
}
.page-wrapper {
position: absolute;
width: $rowWidth * 2;
height: 100%;
left: 50%;
top: 0;
margin-left: -$rowWidth;
font-size: 12px;
overflow: hidden;
z-index: 2;
}
.list-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.list {
position: relative;
width: $rowWidth;
margin: 0 auto;
padding: 0;
list-style: none;
li {
width: 100%;
height: $rowHeight;
padding: 1.2em 1em;
* + * {
display: block;
margin-top: 0.4em;
}
h3 {
font-weight: 500;
}
a {
display: inline-block;
color: $textColor;
text-decoration: none;
}
p {
color: rgba( $textColor, 0.7 );
}
}
li:nth-child(4n+1) {
background-color: #556270;
}
li:nth-child(4n+2) {
background-color: #4ECDC4;
}
li:nth-child(4n+3) {
background-color: #4e6d8a;
}
li:nth-child(4n+4) {
background-color: #FF6B6B;
}
}
.list-a {
top: 0;
li:last-child {
display: none;
}
}
.list-b {
z-index: 10;
font-size: 2em;
box-shadow: 0 0 20px rgba( 0, 0, 0, 0.6 );
.list {
width: $rowWidth * 2;
}
li {
height: $rowHeight * 2;
}
li + li {
border-top: 1px solid rgba( 255, 255, 255, 0.5 );
}
li a {
border-bottom: 1px dotted #fff;
}
}
.list-c {
bottom: 0;
li:first-child {
display: none;
}
}window.onload = function() {
var wrapper = document.querySelector( '.page-wrapper' );
var originalList = document.querySelector( '.list-wrapper' );
var originalListItems = originalList.innerHTML;
originalList.parentNode.removeChild( originalList );
// Top list
var listA = document.createElement( 'ul' );
listA.className = 'list-wrapper list-a';
listA.innerHTML = originalListItems;
wrapper.appendChild( listA );
// Monocle list
var listB = document.createElement( 'ul' );
listB.className = 'list-wrapper list-b';
listB.innerHTML = originalListItems;
wrapper.appendChild( listB );
// Bottom list
var listC = document.createElement( 'ul' );
listC.className = 'list-wrapper list-c';
listC.innerHTML = originalListItems;
wrapper.appendChild( listC );
var listAInner = listA.querySelector( '.list' ),
listCInner = listC.querySelector( '.list' ),
listBInner = listB.querySelector( '.list' );
var scroller,
scrollPosition = 0;
var rowHeight = listA.querySelector( 'li' ).offsetHeight;
var listAHeight = 0,
listBHeight = rowHeight * 2,
listCHeight = 0;
var listAScrollheight = listAInner.scrollHeight,
listBScrollheight = listBInner.scrollHeight;
function init() {
window.addEventListener( 'resize', layout );
scroller = new IScroll( document.body, {
mouseWheel: true,
scrollbars: true,
probeType: 3
} );
scroller.on( 'scroll', onScrollUpdate );
layout();
}
function layout() {
var height = window.innerHeight;
listAHeight = ( height - listBHeight ) / 2;
listAHeight = Math.floor( listAHeight / rowHeight ) * rowHeight;
listCHeight = height - ( listAHeight + listBHeight );
listA.style.height = listAHeight + 'px';
listB.style.height = listBHeight + 'px';
listB.style.top = listAHeight + 'px';
listC.style.height = listCHeight + 'px';
sync();
}
function sync() {
listAInner.style.top = ( listAHeight + ( -scrollPosition * ( listAScrollheight ) ) ) + 'px';
listBInner.style.top = ( -scrollPosition * ( listBScrollheight - listBHeight ) ) + 'px';
listCInner.style.top = ( -scrollPosition * listAScrollheight ) + 'px';
}
function onScrollUpdate( event ) {
scrollPosition = scroller.y / scroller.maxScrollY;
scrollPosition = Math.max( 0, Math.min( 1, scrollPosition ) );
sync();
}
init();
};
External CSS
This Pen doesn't use any external CSS resources.