Skip to content

Instantly share code, notes, and snippets.

@maplethorpej
Created March 25, 2017 18:56
Show Gist options
  • Save maplethorpej/a54d1b45ee93e38ff24618c683f6b27d to your computer and use it in GitHub Desktop.
Save maplethorpej/a54d1b45ee93e38ff24618c683f6b27d to your computer and use it in GitHub Desktop.
jQuery-based vertical rotation slider with fade gradient
function subjectCrawl() {
var $list = $('.subject-crawl ul');
var itemHeight = $list.children('li:first').height();
var listLength = $list.children().length;
// position center item
$list.css('top', -(($list.height() - itemHeight) / 2));
scrollList();
setInterval(function() {
scrollList();
}, 3000);
function scrollList() {
$list.animate({
'paddingTop': itemHeight
}, 350, function() {
var $last = $list.children('li:last-of-type');
$last.detach();
$list.prepend($last);
$list.css('paddingTop', 0);
});
listOpacity();
}
function listOpacity() {
var midpoint = ((listLength - 1) / 2);
for (var i = 0; i < $list.children().length; i++) {
var pos = i + 1;
var opacity = pos / midpoint;
if (opacity > 1) {
opacity = (pos - (pos - midpoint) * 2) / midpoint;
}
if (opacity != 1) {
opacity = opacity * .25;
}
var $item = $list.children().eq(i);
$item.css('opacity', opacity);
}
}
}
subjectCrawl();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment