Magnet letters tentative with JQuery and CSS3

Who doesn’t love magnetic letters on a fridge?
I saw something like that a while ago, and tried to replicate the same effects in my own, messy way. It was a good occasion to test the css3 rotate property.

The demo

It’s here: http://media.dkpn.jp/css/20110112-magnetletters/
It has been tested with Firefox, Safari and Chrome on Mac OSX. It is still a work in progress: characters are–almost–monospaced for now. Colors and rotations are randomized everytime the page is refreshed.

The CSS

I used some extra rules for the layout, but the actually involved CSS part is quite short.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

@font-face {
font-family: LeagueGothic;
src: url(’../fonts/LeagueGothic.otf’);
}
#whiteboard {
background: url(../images/whiteboard1.jpg) no-repeat 50% 50%;
margin-top:40px; padding-top:120px; height:365px;}
.magnet {
font-family: ‘LeagueGothic’, arial, serif;
margin:0; margin-left:10px; margin-right:10px;
text-transform: uppercase; font-size:80px;
display: block; text-align: center;
min-height:100px; position: relative;
margin:0 auto;
}

/* letters colors */

.mPiece {color:#000;}
.col0 {color: #009fff;}
.col1 {color: #ff3c00;}
.col2 {color: #b83823;}

.col0 {
–moz–text-shadow: 0 1px 0 #165981;
–webkit–text-shadow: 0 1px 0 #165981;
–o–text-shadow: 0 1px 0 #165981;
text-shadow: 0 1px 0 #165981;}
.col1 {
–moz–text-shadow: 0 1px 0 #722812;
–webkit–text-shadow: 0 1px 0 #722812;
–o–text-shadow: 0 1px 0 #722812;
text-shadow: 0 1px 0 #722812;}
.col2 {–moz–text-shadow: 0 1px 0 #751f0e;
–webkit–text-shadow: 0 1px 0 #751f0e;
–o–text-shadow: 0 1px 0 #751f0e;
text-shadow: 0 1px 0 #751f0e;}

The Javascript

The lazy, Jquery way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(document).ready(
function(){
$(’.magnet’).each(function() {
var mString = $(this).html();
var mLength = mString.length;
$(this).empty();
for (i=0;i<mLength;i++) {
var randomColor = Math.floor(Math.random()*3)
var randomDeg = Math.floor(Math.random()*11)-5;
var posX = i*30;
if (mString[i] == “m” || mString[i] == “M”) {
posX -= 5;
};
var mAngle = ”;
mAngle += ‘-webkit-transform: rotate(‘+randomDeg+‘deg); ‘;
mAngle += ‘-moz-transform: rotate(‘+randomDeg+‘deg); ‘;
mAngle += ‘transform: rotate(‘+randomDeg+‘deg); ‘;
mAngle += ‘position: absolute; ‘;
mAngle += ‘left:’+posX+‘px; ‘;
$(this).append(’<span class=“mPiece col’+randomColor+’” style=“‘+mAngle+’”>’+mString[i]+’</span>’);
};
charW = posX+30;
$(this).width(charW);
});
});

I used the font League Gothic, from The League of Moveable Type, that we seems to see a lot these days :) , and which doesn’t work bad in this case.

I am sure the code could be optimized (not even talking about features like tracking or multiple lines), and any remark/suggestion is of course welcome…

Jérôme Sénaillat