Skip to content

Instantly share code, notes, and snippets.

@L422Y

L422Y/index.html

Created November 20, 2012 12:57
Show Gist options
  • Save L422Y/4117783 to your computer and use it in GitHub Desktop.
Save L422Y/4117783 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Larry Williamson. image rotator / css3
Raw
index.html
<style>
</style>
<div id="main">
<div id="container"></div>
</div>
Raw
script.js
var c, parts;
var num = 36;
var pWidth = 200;
var flickr_uid = '47382512@N00';
function init() {
parts = [];
flickrData = flickrData.sort(function(){ return Math.random() > 0.5; } );
c = $('#container');
for(var i=0; i<num; i++) {
parts.push(Part(i));
}
}
function Part(n) {
var obj = $('<div></div>');
var offset = 0-(num/2);
var deg = 360 / num;
var rY = (n+offset)*deg;
var tZ = offset*deg*2;
tZ += (n%2 ? 1 : 0);
var
r = 0,
g = Math.floor(Math.random()*128) +128,
b = 0,
a = 0.95;
var bgURL = flickrData[n];
var css_obj = {
// left: Math.sin(offset) + 'px',
zIndex: n,
backgroundColor: 'rgba('+r+','+g+','+b+','+a+')',
backgroundImage: 'url('+bgURL+')',
'-webkit-transform': 'rotateY('+rY+'deg) translateZ('+(0-tZ)+'px)'
};
obj.text(n);
obj.css(css_obj);
c.append(obj);
// $('body').append('<div>'+(offset)+'</div>');
return obj;
}
/*** flickr data ***/
var flickrData = [
"http://farm7.staticflickr.com/6128/5984893888_85f3625e9c_m.jpg",
"http://farm7.staticflickr.com/6017/5964174017_5f3d87b6f0_m.jpg",
"http://farm4.staticflickr.com/3155/5720295275_44fcc8acf4_m.jpg",
"http://farm3.staticflickr.com/2702/5715863125_bc6a71def5_m.jpg",
"http://farm6.staticflickr.com/5138/5548734921_36512f52ba_m.jpg",
"http://farm6.staticflickr.com/5247/5288872554_2f65ef6340_m.jpg",
"http://farm6.staticflickr.com/5041/5288852744_ae1317e765_m.jpg",
"http://farm6.staticflickr.com/5008/5288841634_a9125bf007_m.jpg",
"http://farm6.staticflickr.com/5202/5288236293_b933fec062_m.jpg",
"http://farm6.staticflickr.com/5124/5288839700_b85224eb90_m.jpg",
"http://farm6.staticflickr.com/5044/5288838946_19ddda9cf1_m.jpg",
"http://farm6.staticflickr.com/5044/5288234443_05416dd637_m.jpg",
"http://farm6.staticflickr.com/5002/5288830662_af9359f17a_m.jpg",
"http://farm6.staticflickr.com/5209/5288218201_83e6885f6e_m.jpg",
"http://farm6.staticflickr.com/5248/5288820870_cdfe084a86_m.jpg",
"http://farm6.staticflickr.com/5045/5288819012_6c8a1fcd00_m.jpg",
"http://farm6.staticflickr.com/5283/5288213845_263db05abb_m.jpg",
"http://farm6.staticflickr.com/5121/5288212969_5603dcb9ab_m.jpg",
"http://farm6.staticflickr.com/5249/5288815598_8c800652e0_m.jpg",
"http://farm6.staticflickr.com/5247/5288814654_665c86ccf7_m.jpg",
"http://farm9.staticflickr.com/8345/8200408121_59c8bae38f_m.jpg",
"http://farm9.staticflickr.com/8060/8200408195_2ed9d94a29_m.jpg",
"http://farm9.staticflickr.com/8202/8200408199_89f4cb7e8c_m.jpg",
"http://farm9.staticflickr.com/8059/8200408233_99116c1154_m.jpg",
"http://farm9.staticflickr.com/8210/8200408367_16c4e6a9d5_m.jpg",
"http://farm9.staticflickr.com/8205/8200408507_027dc22fdb_m.jpg",
"http://farm9.staticflickr.com/8064/8200408513_c099816e52_m.jpg",
"http://farm9.staticflickr.com/8341/8200408565_da216a78f2_m.jpg",
"http://farm9.staticflickr.com/8199/8200408579_656ab4a4f5_m.jpg",
"http://farm9.staticflickr.com/8341/8200408583_684c50e8fb_m.jpg",
"http://farm9.staticflickr.com/8065/8200408587_8206296dc5_m.jpg",
"http://farm9.staticflickr.com/8478/8200408613_f8bed4620a_m.jpg",
"http://farm9.staticflickr.com/8478/8201501322_8970bd68ac_m.jpg",
"http://farm9.staticflickr.com/8060/8201501364_69ff748842_m.jpg",
"http://farm9.staticflickr.com/8207/8201501472_50a0685a37_m.jpg",
"http://farm9.staticflickr.com/8070/8201501496_319775efc4_m.jpg",
"http://farm9.staticflickr.com/8482/8201501566_2073728cbf_m.jpg",
"http://farm9.staticflickr.com/8479/8201501582_0c338a8459_m.jpg",
"http://farm9.staticflickr.com/8486/8201501614_99b9ac4c89_m.jpg",
"http://farm9.staticflickr.com/8339/8201501662_c65855eab1_m.jpg"
];
$(init());
Raw
style.scss
@import "compass";
@import url('http://fonts.googleapis.com/css?family=Oswald');
$default-prefixes: webkit moz ms o;
@mixin build-prefix-values($property, $value, $prefixes: $default-prefixes) {
@each $prefix in $prefixes {
-#{$prefix}-#{$property}: #{$value};
}
#{$property}: #{$value};
}
@mixin animation($value...) {
-webkit-animation: $value;
-moz-animation: $value;
-ms-animation: $value;
-o-animation: $value;
animation: $value;
}
@mixin keyframe ($animation_name) {
@-webkit-keyframes $animation_name { @content; }
@-moz-keyframes $animation_name { @content; }
@-o-keyframes $animation_name { @content }
@keyframes $animation_name { @content; }
}
div#main {
font-family: "Oswald";
@include build-prefix-values('perspective', '1000px');
@include build-prefix-values('transform-style', 'preserve-3d');
@include build-prefix-values('animation','rotator2 30s infinite linear');
position:absolute;
left:50%;
top:50%;
#container {
&:hover {
@include build-prefix-values('animation-play-state','paused');
}
@include build-prefix-values('animation','rotator 30s infinite linear');
@include build-prefix-values('transform-style', 'preserve-3d');
@include build-prefix-values('transform-origin', '0 0');
@include build-prefix-values('transform', 'rotateX(32deg)');
@include build-prefix-values('transition', 'animation');
background:rgba(0,0,0,0.5);
width: 0;
height: 0;
position:absolute;
left:50%;
top:50%;
div {
cursor:pointer;
position:absolute;
border-radius: 50%;
text-align:center;
font-size:30px;
display:table-cell;
vertical-align:middle;
line-height:64px;
background: #000;
width: 64px;
height: 64px;
opacity:0.88;
left:-32px;
color:white;
text-shadow:
0px 0px 5px #000,
0px 0px 3px #000,
0px 0px 2px #000,
0px 0px 1px #000;
background-color:#eed;
background-size: 100% 100%;
background-position: center center;
border:3px solid rgba(0,0,0,1);
overflow:show;
-webkit-transition:
background-size 1s ease-out,
width 0.2s ease-in-out,
height 0.2s ease-in-out,
line-height 0.2s ease-in-out,
font-size 0.2s ease-in-out 0s,
color 0.2s ease-in-out,
top 0.2s ease-in-out,
left 0.2s ease-in-out,
text-shadow 0.2s ease-in-out,
border 0.2s ease-in-out,
border-radius 0.2s ease-in-out
;
&:hover {
color:transparent;
text-shadow: 0 0 20px rgba(0,0,0,0);
opacity:1;
background-size: 150% 150%;
border:3px solid white;
position: absolute;
top:-20px;
font-size:100px;
left:-50px;
line-height:100px;
width: 100px;
height: 100px;
border-radius: 0;
z-index:222 !important;
-webkit-transition: text-shadow-color 0.2s ease-in 0s;
}
}
}
}
@include keyframe(rotator) {
0% { @include build-prefix-values('transform', 'rotateY(0deg)') }
50% { @include build-prefix-values('transform', 'rotateY(180deg)') }
100% { @include build-prefix-values('transform', 'rotateY(359deg)') }
}
@include keyframe("rotator2") {
0% { @include build-prefix-values('transform', 'rotateX(-2deg) rotateZ(-2deg)') }
50% { @include build-prefix-values('transform', 'rotateX(2deg) rotateZ(2deg)') }
100% { @include build-prefix-values('transform', 'rotateX(-2deg) rotateZ(-2deg)') }
}
.striped {
padding: 2.25em 1.6875em;
background-image: -webkit-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
background-image: -moz-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
background-image: -o-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
background-size: 4px 4px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment