Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Aug 7, 2018
Embed
What would you like to do?
Rolldown List
<ul class="rolldown-list" id="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
</ul>
<button id="btnReload">Reload</button>
// Increments the delay on each item.
$('.rolldown-list li').each(function () {
var delay = ($(this).index() / 4) + 's';
$(this).css({
webkitAnimationDelay: delay,
mozAnimationDelay: delay,
animationDelay: delay
});
});
$('#btnReload').click(function () {
$('#myList').removeClass('rolldown-list');
setTimeout(function () {
$('#myList').addClass('rolldown-list');
}, 1);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
html,body {
width: 100%;
height: 100%;
}
body {
font: 1.2em/1.4 'Oswald', sans-serif;
color: #fff;
text-align: right;
}
.rolldown-list {
text-align: left;
padding: 0;
margin: 0;
}
.rolldown-list li {
padding: 1em;
margin-bottom: .125em;
display: block;
list-style: none;
text-transform: uppercase;
}
.rolldown-list li {
visibility: hidden;
animation: rolldown .7s 1;
transform-origin: 50% 0;
animation-fill-mode: forwards;
}
.rolldown-list li:nth-child(2n) {
background-color: #444;
}
.rolldown-list li:nth-child(2n+1) {
background-color: #333;
}
#myList {
position: absolute;
width: 50%;
left: 50%;
margin-left: -25%;
}
#btnReload {
float: right;
color: #333;
background: #ccc;
text-transform: uppercase;
border: none;
padding: .5em 1em;
}
#btnReload:hover {
background: #ddd;
}
@keyframes rolldown {
0% {
visibility: visible;
transform: rotateX(180deg) perspective(500px);
}
70% {
visibility: visible;
transform: rotateX(-20deg);
}
100% {
visibility: visible;
transform: rotateX(0deg);
}
}
@MRamGopal

This comment has been minimized.

Copy link

@MRamGopal MRamGopal commented Jan 3, 2019

that was a nice work :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment