Magnet letters tentative with JQuery and CSS3

Posted the 9th Feb. 2011.
Filed under Blog.
The RSS feed for comments is here.

Who does­n’t love mag­net­ic let­ters on a fridge kosten­lose spiele herun­ter­laden karten­spiele?
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­er­ty google chrome voor win­dows 7en.

The demo

It’s here: http://media.dkpn.jp/css/20110112-magnetletters/
It has been test­ed with Fire­fox, Safari and Chrome on Mac OSX doc­u­ments mac. 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­al­ly involved CSS part is quite short down­load net­flix movies does not work.

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-fam­i­ly: League­Goth­ic;
    src: url(‘../fonts/LeagueGothic.otf’);
}
#white­board {
back­ground: url(../images/whiteboard1.jpg) no-repeat 50% 50%;
mar­gin-top:40px; padding-top:120px; height:365px;}
.mag­net {
font-fam­i­ly: ‘League­Goth­ic’, ari­al, serif;
mar­gin:0; mar­gin-left:10px; mar­gin-right:10px;
text-trans­form: 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 colors */

.mPiece {col­or:#000;}
.col0 {col­or: #009fff;}
.col1 {col­or: #ff3c00;}
.col2 {col­or: #b83823;}

.col0 {
‑moz-text-shad­ow: 0 1px 0 #165981;
‑webkit-text-shad­ow: 0 1px 0 #165981;
‑o-text-shad­ow: 0 1px 0 #165981;
text-shad­ow: 0 1px 0 #165981;}
.col1 {
‑moz-text-shad­ow: 0 1px 0 #722812;
‑webkit-text-shad­ow: 0 1px 0 #722812;
‑o-text-shad­ow: 0 1px 0 #722812;
text-shad­ow: 0 1px 0 #722812;}
.col2 {-moz-text-shad­ow: 0 1px 0 #751f0e;
‑webkit-text-shad­ow: 0 1px 0 #751f0e;
‑o-text-shad­ow: 0 1px 0 #751f0e;
text-shad­ow: 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).emp­ty();
    for (i=0;i<mLength;i++) {
      var ran­dom­Col­or = 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-trans­form: rotate(‘+ran­domDeg+‘deg); ‘;
      mAn­gle += ‘-moz-trans­form: 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­Col­or+’ ” style=“ ‘+mAn­gle+’ ”>’+mString[i]+’</span>’);  
    };
    charW = posX+30;
    $(this).width(charW);
  });
});

I used the font League Goth­ic, from The League of Move­able Type, that we seems to see a lot these days :) , and which does­n’t work bad in this case ts3 down­load chip 64 bit deutsch kosten­los.

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 wel­come.. herun­ter­laden.

Post a Comment

Your email is never shared. Required fields are marked *

*
*

https://www.houseshowoff.com/