<article>
<h2>Scroll the List Below</h2>
<ul class="fly-reverse">
<li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Fourty</li><li>Fourtyone</li><li>Fourtytwo</li><li>Fourtythree</li><li>Fourtyfour</li><li>Fourtyfive</li><li>Fourtysix</li><li>Fourtyseven</li><li>Fourtyeight</li><li>Fourtynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li>
</ul>
</article>
@mixin colors($max-count, $color-frequency){
$color: 360/$max-count;
@for $i from 1 through $max-count {
&:nth-child(#{$max-count}n + #{$i}) {
background: hsl(($i - 1)*($color / $color-frequency), 80%, 60%);
color: hsl(($i - 1)*($color / $color-frequency), 80%, 50%);
}
}
}
body {
background: #222;
font-family: 'Gudea', sans-serif;
font-weight: bold;
font-size: 16px;
margin-bottom: 40px;
line-height: 1;
}
article {
display: inline-block;
margin: 20px;
width: 90%;
margin-left: 5%;
height: 280px;
h2 {
color: #ccc;
text-align: center;
margin-top: 0;
}
}
ul {
width: 100%;
height: 280px;
position: relative;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: scroll;
list-style: none;
perspective: 400px;
li {
position: relative;
padding: 15px;
background: #eee;
color: #252525;
font-size: 18px;
z-index: 2;
transform: translateZ(0px);
@include colors(50,1);
text-align: center;
}
}
.fly-reverse {
perspective: 400px;
perspective-origin: 50% 50%;
li {
transition: all 600ms ease, opacity 300ms ease;
transform-origin: 50% 50% -50px;
&.past {
opacity: 0;
transform: rotateX( -180deg );
}
&.future {
opacity: 0;
transform: rotateX( 180deg );
}
}
}stroll.bind( 'ul.fly-reverse' );
External CSS
This Pen doesn't use any external CSS resources.