Skip to content

Instantly share code, notes, and snippets.

@akre54
Last active December 28, 2015 00:49
Show Gist options
  • Save akre54/7416538 to your computer and use it in GitHub Desktop.
Save akre54/7416538 to your computer and use it in GitHub Desktop.
var runner = document.querySelector('.ticker'), // a <ul>
frames = runner.children,
timeout = 4000; // in ms
var cycleFrames = function() {
var child = runner.removeChild(frames[0]).cloneNode(true);
runner.appendChild(child);
}
// from https://gist.github.com/joelambert/1002116
requestInterval(cycleFrames, timeout);
.slider-fx-fade > *
position: absolute
opacity: 0
visibility: hidden
transition: opacity 1s ease
&:first-child
opacity: 1
visibility: visible
.slider-fx-scroll-down > *
position: absolute
transition: transform 4s linear
$item-height = 250
for i in(1...40)
$offset = i * $item-height - $item-height
&:nth-child({i})
transform: translate3d(0px, $offset px, 0)
.slider-fx-scroll-left > *
position: absolute;
top: 0;
left: 0;
display: inline-block
transition: transform 4s linear
item-width = 250
for i in(1...40)
$offset = i * $item-width - 2 * $item-width
&:nth-child({i})
transform: translate3d($offset px, 0px, 0)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment