Magnet letters tentative with JQuery and CSS3

Who doesn’t love mag­netic let­ters on a fridge?
I saw some­thing like that a while ago, and tried to repli­cate the same effects in my own, messy way. It was a good occa­sion to test the css3 rotate prop­erty.

The demo

It’s here: http://media.dkpn.jp/css/20110112-magnetletters/
It has been tested with Fire­fox, Safari and Chrome on Mac OSX. It is still a work in progress: char­ac­ters are–almost–monospaced for now. Col­ors and rota­tions are ran­dom­ized every­time the page is refreshed.

The CSS

I used some extra rules for the lay­out, but the actu­ally 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: League­Gothic;
    src: url(’../fonts/LeagueGothic.otf’);
}
#white­board {
back­ground: url(../images/whiteboard1.jpg) no-repeat 50% 50%;
margin-top:40px; padding-top:120px; height:365px;}
.mag­net {
font-family: ‘League­Gothic’, arial, serif;
mar­gin:0; margin-left:10px; margin-right:10px;
text-transform: upper­case; font-size:80px;
dis­play: block; text-align: cen­ter;
min-height:100px; posi­tion: rel­a­tive;
mar­gin:0 auto;
}

/* let­ters col­ors */

.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
$(doc­u­ment).ready(
  func­tion(){  
    $(’.mag­net’).each(func­tion() {
    var mString = $(this).html();
    var mLength = mString.length;
    $(this).empty();
    for (i=0;i<mLength;i++) {
      var ran­dom­Color = Math.floor(Math.ran­dom()*3)
      var ran­domDeg = Math.floor(Math.ran­dom()*11)-5;
      var posX = i*30;
      if (mString[i] == “m” || mString[i] == “M”) {
        posX -= 5;
      };
      var mAn­gle = ;
      mAn­gle += ‘-webkit-transform: rotate(‘+ran­domDeg+‘deg); ‘;
      mAn­gle += ‘-moz-transform: rotate(‘+ran­domDeg+‘deg); ‘;
      mAn­gle += ‘trans­form: rotate(‘+ran­domDeg+‘deg); ‘;
      mAn­gle += ‘posi­tion: absolute; ‘;
      mAn­gle += ‘left:’+posX+‘px; ‘;
      $(this).append(’<span class=“mPiece col’+ran­dom­Color+’” style=“‘+mAn­gle+’”>’+mString[i]+’</span>’);  
    };
    charW = posX+30;
    $(this).width(charW);
  });
});

I used the font League Gothic, from The League of Move­able 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 opti­mized (not even talk­ing about fea­tures like track­ing or mul­ti­ple lines), and any remark/suggestion is of course welcome…

Post a Comment

Your email is never shared. Required fields are marked *

*
*