Local HTML page to test spinning your cdArt

Anything else graphics related.
Post Reply
User avatar
Dybal
Veteran
Veteran
Posts: 49
Joined: Fri Jul 11, 2014 3:00 pm

Local HTML page to test spinning your cdArt

Post by Dybal »

My first cdArt was denied for the center wobbling. :shock: 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>
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.
Attachments
rotate.html.zip
(1.13 KiB) Downloaded 281 times
Last edited by Dybal on Fri Jan 30, 2015 10:45 am, edited 1 time in total.
User avatar
zorensen
Admin
Admin
Posts: 116
Joined: Wed May 07, 2014 9:02 pm
Location: Norway
Contact:

Re: Local HTML page to test spinning your cdArt

Post by zorensen »

Great work, buddy!
This is absolutely perfect to have to test your own cdArt before uploading :-)

Thanks for sharing this!
(I would hire you btw :P)
"If you can't explain it simply, you don't understand it well enough." Albert Einstein

- Getting started
- Navigating Fanart.tv
- Why Your Image May be Denied
- Moderation Time
- Music Fanart Rules
User avatar
Dybal
Veteran
Veteran
Posts: 49
Joined: Fri Jul 11, 2014 3:00 pm

Re: Local HTML page to test spinning your cdArt

Post by Dybal »

zorensen wrote:(I would hire you btw :P)
You must not have looked at my initial code then. ;) I updated yesterday to the current version.

Speaking of which I should explain a few things since I didn't comment the source. Surprisingly the values in .speed controls how fast the disc spins. Time is in seconds for how long it takes to complete a single revolution. This means larger times cause the disc to spin slower and smaller times faster.
If you are trying to work on a smaller resolution you may optionally comment/uncomment the other values in .scale. Values being 1000px (100%), also the default, 750px (75%) and 500px (50%).

If you are being especially particular you can slide your mouse cursor up against your edges to help detect even minute wobbles. :geek:
User avatar
zorensen
Admin
Admin
Posts: 116
Joined: Wed May 07, 2014 9:02 pm
Location: Norway
Contact:

Re: Local HTML page to test spinning your cdArt

Post by zorensen »

Again, great work buddy! :)
I am a web developer myself so I understand the code very well, but it will most certainly be very useful for other users of the forum ;)

Thanks for sharing!
"If you can't explain it simply, you don't understand it well enough." Albert Einstein

- Getting started
- Navigating Fanart.tv
- Why Your Image May be Denied
- Moderation Time
- Music Fanart Rules
Post Reply