Skip to content

Instantly share code, notes, and snippets.

@lstroud

lstroud/index.html

Last active December 14, 2015 23:39
Show Gist options
  • Save lstroud/5167320 to your computer and use it in GitHub Desktop.
Save lstroud/5167320 to your computer and use it in GitHub Desktop.
Download ZIP
scrolling experiment
Raw
index.html
<html>
<head>
<style>
/* *:not(html) {
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 350ms;
}
*/
body {
overflow: hidden;
height: 100%;
position: relative;
}
ul{
list-style: none;
margin:0;
padding:0;
}
#view {
font-weight: 100;
font-family: 'HelveticaNeue-Light', 'Helvetica Neue';
font-size: 18px;
position: absolute;
display: -webkit-box;
left: 0;
top: 0;
-webkit-box-orient: vertical;
height: 960px;
width: 360px;
z-index: 2;
}
#scroller {
-webkit-box-flex: 1;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff;
display: -webkit-box;
-webkit-box-orient: vertical;
height: 100%;
position: relative;
}
#scroller * {
-webkit-transform: translate3d(0,0,0);
}
#content {
display: block;
}
.icon {
position: relative;
display: -webkit-box;
text-align: left;
vertical-align: middle;
height: 4em;
-webkit-box-orient: vertical;
border-bottom: thin solid #ccc;
}
.icon .line1 {
display: -webkit-box;
padding-left: 0.5em;
width: 100%;
font-weight: 700;
font-size: 20px;
height: 1.5em;
line-height: 1.5em;
color: #353535;
}
.icon .line2 {
display: -webkit-box;
width: 100%;
padding-left: 1em;
height: 1.5em;
line-height: 1.5em;
color: #555;
}
.icon .line2 span {
display: inline-block;
padding-left: 0.5em;
vertical-align: middle;
width: 3em;
}
.icon span img {
position: relative;
vertical-align: middle;
margin-top: -3px;
width: 24px;
height: 24px;
/*-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: gear-moves;
-moz-animation-duration: 5s;
-webkit-animation-name: gear-moves;
-webkit-animation-duration: 5s;*/
}
@-webkit-keyframes gear-moves {
0% {
-webkit-transform: translate3d(0,0,0) rotate(0deg);
}
100% {
-webkit-transform: translate3d(0,0,0) rotate(360deg);
}
}
</style>
</head>
<body>
<div id="view">
<div id="scroller">
<ul id="content">
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
<li class="icon">
<div class="line1">
<span>Test-1234-23-A</span>
</div>
<div class="line2">
<span>234</span>
<span>13</span>
<span>0</span>
<span>
<img id="detail-icon-img" src="http://cdn1.iconfinder.com/data/icons/token/Token%2C%20128x128%2C%20PNG/Gear.png"/></span>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment