Skip to content

Instantly share code, notes, and snippets.

@clamstew

clamstew/rotating-images.html

Created May 1, 2014 06:41
Show Gist options
  • Save clamstew/4287a06c75cdc18e9c4d to your computer and use it in GitHub Desktop.
Save clamstew/4287a06c75cdc18e9c4d to your computer and use it in GitHub Desktop.
Download ZIP
I was thinking about an image rotator and started mocking one up on a small scale.
Raw
rotating-images.html
<!DOCTYPE html>
<html>
<head>
<style>
body {margin: 0;}
.container {
margin: 0 auto;
width: 800px;
background: aliceblue;
}
#wrap, #wrap-demistify {
background: #ccc;
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
#wrap-demistify {
width: 200px;
height: 200px;
}
div.mover {
width:100px;
height: 100px;
position:absolute;
}
div.one {
background:red;
-webkit-animation: imageone 5s linear infinite;
}
div.two {
background:blue;
-webkit-animation: imagetwo 5s linear infinite;
}
div.three {
background:green;
-webkit-animation: imagethree 5s linear infinite;
}
div.four {
background:orange;
-webkit-animation: imagefour 5s linear infinite;
}
div.five {
background:hotpink;
-webkit-animation: imagefive 5s linear infinite;
}
div.six {
background:yellow;
-webkit-animation: imagesix 5s linear infinite;
}
@-webkit-keyframes imageone {
0% { left:0px; top:0px; }
16% { left:-100px; top:0px; }
33% { left:-100px; top:100px; }
50% { left:0px; top:100px; }
66% { left:100px; top:100px; }
83% { left:100px; top:0px; }
100% { left:0px; top:0px; }
}
@-webkit-keyframes imagetwo {
0% { left:-100px; top:0px; }
16% { left:-100px; top:100px; }
33% { left:0px; top:100px; }
50% { left:100px; top:100px; }
66% { left:100px; top:0px; }
83% { left:0px; top:0px; }
100% { left:-100px; top:0px; }
}
@-webkit-keyframes imagethree {
0% { left:-100px; top:100px; }
16% { left:0px; top:100px; }
33% { left:100px; top:100px; }
50% { left:100px; top:0px; }
66% { left:0px; top:0px; }
83% { left:-100px; top:0px; }
100% { left:-100px; top:100px; }
}
@-webkit-keyframes imagefour {
0% { left:0px; top:100px; }
16% { left:100px; top:100px; }
33% { left:100px; top:0px; }
50% { left:0px; top:0px; }
66% { left:-100px; top:0px; }
83% { left:-100px; top:100px; }
100% { left:0px; top:100px; }
}
@-webkit-keyframes imagefive {
0% { left:100px; top:100px; }
16% { left:100px; top:0px; }
33% { left:0px; top:0px; }
50% { left:-100px; top:0px; }
66% { left:-100px; top:100px; }
83% { left:0px; top:100px; }
100% { left:100px; top:100px; }
}
@-webkit-keyframes imagesix {
0% { left:100px; top:0px; }
16% { left:0px; top:0px; }
33% { left:-100px; top:0px; }
50% { left:-100px; top:100px; }
66% { left:0px; top:100px; }
83% { left:100px; top:100px; }
100% { left:100px; top:0px; }
}
</style>
</head>
<body>
<div class="container">
<h4>
With 6 moving blocks you could rotate them counter clockwise and
show them through a viewport
</h4>
<div id='wrap'>
<div class='mover one'></div>
<div class='mover two'></div>
<div class='mover three'></div>
<div class='mover four'></div>
<div class='mover five'></div>
<div class='mover six'></div>
</div>
<br />
<br />
<br />
<div id='wrap-demistify'>
<div class='mover one'></div>
<div class='mover two'></div>
<div class='mover three'></div>
<div class='mover four'></div>
<div class='mover five'></div>
<div class='mover six'></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment