Local HTML page to test spinning your cdArt
Posted: Wed Nov 12, 2014 8:53 am
My first cdArt was denied for the center wobbling. 
I did test spinning it against black, but the problem in this instance was an uneven shadow for the center hole. I decided it would be useful to test spinning the discs locally on different colored backgrounds before submitting. Anyone think I'll get hired as a web-designer from this? Select all - save as rotate.html or download the .zip.
Copy your cdArt.png to disc.png and move it the same directory as the rotate.html file. Then open rotate.html with either Firefox or Chrome. Updated code to version 1.0.
I did test spinning it against black, but the problem in this instance was an uneven shadow for the center hole. I decided it would be useful to test spinning the discs locally on different colored backgrounds before submitting. Anyone think I'll get hired as a web-designer from this? Select all - save as rotate.html or download the .zip.Code: Select all
<html><head>
<title>Rotate disc.png</title>
<style>
.speed {
-webkit-animation-duration:1.5s;
-moz-animation-duration:1.5s;
}
.scale {
/* height: 500px; */
/* height: 750px; */
height: 1000px; */
}
body {
background-color: #5C5C5C;
width: 2400px;
height: 1300px;
}
a {
display: block;
}
.cPicker {
width: 100px;
height: 60px;
position: absolute;
z-index: 6;
}
#pGray {
background-color: #5C5C5C;
left:410px;
}
#pBlack {
background-color: #000;
}
#pWhite {
background-color: #FFF;
left:110px;
}
#pRed {
background-color: #F00;
left:210px;
}
#pGreen {
background-color: #0F0;
left:310px;
}
#colours {
border: 2px solid #333;
z-index: 10;
width: 500px; height: 60px;
}
.discs {
width: 2400px; height: 1300px;
position:absolute;
top: 100px;
}
.reverse {
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-webkit-animation-name: spinR;
-moz-animation-name: spinR;
-webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear;
margin-left: 30px;
overflow: hidden;
z-index: 3;
}
.rotate {
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-webkit-animation-name: spin;
-moz-animation-name: spin;
-webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear;
margin-left: 20px;
overflow: hidden;
z-index: 3;
}
@-webkit-keyframes spin {
from {-webkit-transform:scale(1) rotate(0deg);}
to {-webkit-transform:scale(1) rotate(360deg);}
}
@-moz-keyframes spin {
from {-moz-transform:scale(1) rotate(0deg);}
to {-moz-transform:scale(1) rotate(360deg);}
}
@-webkit-keyframes spinR {
from {-webkit-transform:scale(1) rotate(3600deg);}
to {-webkit-transform:scale(1) rotate(0deg);}
}
@-moz-keyframes spinR {
from {-moz-transform:scale(1) rotate(360deg);}
to {-moz-transform:scale(1) rotate(0deg);}
}
.divColor {
background-color: transparent;
position:absolute;
width: 2524px; height: 1400px;
margin-top: -100px;
margin-left: -8px;
padding-bottom: 16px;
z-index: -1;
}
#bcolorB:target {
background-color: #000;
}
#bcolorW:target {
background-color: #FFF;
}
#bcolorG:target {
background-color: #0F0;
}
#bcolorR:target {
background-color: #F00;
}
#bcolorGy:target {
background-color: #5C5C5C;
}
</style>
</head>
<body>
<div id="colours"><a id="pBlack" class="cPicker" href="#bcolorB"></a><a id="pWhite" class="cPicker" href="#bcolorW"></a><a id="pGreen" class="cPicker" href="#bcolorG"></a><a id="pRed" class="cPicker" href="#bcolorR"></a><a id="pGray" class="cPicker" href="#bcolorGy"></a></div>
<div class="discs">
<div id="bcolorB" class="divColor"></div><div id="bcolorW" class="divColor"></div><div id="bcolorG" class="divColor"></div><div id="bcolorR" class="divColor"></div><div id="bcolorGy" class="divColor"></div>
<img class="rotate speed scale" src="disc.png">
<img class="reverse speed scale" src="disc.png">
</div>
</body>
</html>
)
I updated yesterday to the current version.