React


Logo Component2


React.jsを使ってロゴを出力してみた(2)

hoverイベントを除いてReact.jsで出力した

「課題」:イベントの指定がてうまくいかなかったのでjqueryでずらずらと書いてしまいました

// ロゴ文字データ
var data = [
  {text: "k",color:"#f00",top:"0px"},
  {text: "o",color:"#0f0",top:"0px"},
  {text: "y",color:"gold",top:"0px"},
  {text: "a",color:"#00f",top:"-7px"},
  {text: "m",color:"#0f0",top:"-20px"},
  {text: "a",color:"#0ff",top:"-7px"},
  {text: "t",color:"#f0f",top:"-20px"},
  {text: "c",color:"#ff0",top:"-10px"},
  {text: "h",color:"#999",top:"0px"},
  {text: ".",color:"#000",top:"0px"},
  {text: "c",color:"#ccc",top:"0px"},
  {text: "o",color:"#0DD42B",top:"-10px"},
  {text: "m",color:"#F22C16",top:"0px"}
];

// ロゴクラス
var Logo = React.createClass({
  render: function() {
    return (
      <div className="letters">
        // ロゴで読み込んだdataをLettersへ変数dataとして受け渡す
        <Letters data={this.props.data} />
      </div>
    );
  }
});

// 文字クラス
var Letters = React.createClass({
  render: function() {
    // 1文字分を作成
    var letterNodes = this.props.data.map(function (letter) {
      //スタイル属性を組み立て
      var styles = {color:letter.color,top:letter.top};
      return (
        <span style={styles}> //スタイル属性を指定
          {letter.text}
        </span>
      );
    });
    return (
      <span className="logoLetter">
          {letterNodes} //1文字分の出力
      </span>
    );
  }
});

//ロゴデータを受け渡してロゴの描画
React.render(
  <Logo data={data}/>,
  document.getElementById('logoComponent')
);

/*  属性の指定 */
$("#logoComponent span").css("position","relative");
$("#logoComponent").css("font-size","50px");
$("#logoComponent").css("text-shadow", "4px 4px 0px #939393");

/* hover eventの定義*/
$('#logoComponent div span:nth-child(1)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('#logoComponent div span:nth-child(2)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('#logoComponent div span:nth-child(3)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('#logoComponent div span:nth-child(4)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-7px"});
  }
);
$('#logoComponent div span:nth-child(5)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-20px"});
  }
);
$('#logoComponent div span:nth-child(6)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-7px"});
  }
);
$('#logoComponent div span:nth-child(7)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('#logoComponent div span:nth-child(8)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-20px"});
  }
);
$('#logoComponent div span:nth-child(9)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('#logoComponent div span:nth-child(10)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-10px"});
  }
);
$('#logoComponent div span:nth-child(11)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('#logoComponent div span:nth-child(12)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-10px"});
  }
);
$('#logoComponent div span:nth-child(13)').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);