Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created December 5, 2012 12:56
Show Gist options
  • Save dziudek/4215285 to your computer and use it in GitHub Desktop.
Save dziudek/4215285 to your computer and use it in GitHub Desktop.
Download ZIP
Image Roll
Raw
dabblet.css
/**
* Image Roll
*/
#image-roll {
height: 200px;
width: 600px;
-webkit-perspective: 600;
-moz-perspective: 600;
perspective: 600;
}
#image-roll > div {
float: left;
height: 300px;
opacity: 0;
transform: rotateY(-120deg);
transform-origin: right 0;
transition: transform .225s ease-out;
width: 200px;
}
#image-roll > div.active {
opacity: 1;
transform: rotateY(0deg);
}
.image-roll1 {
background: transparent url('http://placekitten.com/600/300') 0 0;
}
.image-roll2 {
background: transparent url('http://placekitten.com/600/300') -200px 0;
}
.image-roll3 {
background: transparent url('http://placekitten.com/600/300') -400px 0;
}
#image-roll + hr {
clear: both;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="image-roll">
<div class="image-roll image-roll1"></div>
<div class="image-roll image-roll2"></div>
<div class="image-roll image-roll3"></div>
</div>
<hr />
<button id="run">RUN!</button>
<button id="clear">Clear</button>
Raw
dabblet.js
document.getElementById('run').addEventListener('click', function() {
var elms = document.querySelectorAll('.image-roll');
var j = 0;
for(var i = elms.length - 1; i >= 0; i--) {
animate(elms[i], j * 225);
j++;
}
}, false);
var animate = function(el, delay) {
setTimeout(function() {
el.setAttribute('class', el.getAttribute('class') + ' active');
}, delay);
};
document.getElementById('clear').addEventListener('click', function() {
var elms = document.querySelectorAll('.image-roll');
for(var i = 0; i < elms.length; i++) {
elms[i].setAttribute('class', elms[i].getAttribute('class').replace(' active', ''));
}
}, false);
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment