React


Logo Component


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

class指定は無視されてしまう、data-reactidが付加される


Reactで作成された要素

<div id="logoComponent" style="font-size: 50px; text-shadow: rgb(147, 147, 147) 4px 4px 0px;">
  <div data-reactid=".1">
    <span data-reactid=".1.0" style="position: relative; color: rgb(255, 0, 0);">k</span>
    <span data-reactid=".1.1" style="position: relative; color: rgb(0, 255, 0);">o</span>
    <span data-reactid=".1.2" style="position: relative; color: rgb(255, 215, 0);">y</span>
    <span data-reactid=".1.3" style="position: relative; color: rgb(0, 0, 255); top: -7px;">a</span>
    <span data-reactid=".1.4" style="position: relative; color: rgb(0, 255, 0); top: -20px;">m</span>
    <span data-reactid=".1.5" style="position: relative; color: rgb(0, 255, 255); top: -7px;">a</span>
    <span data-reactid=".1.6" style="position: relative; color: rgb(255, 0, 255);">t</span>
    <span data-reactid=".1.7" style="position: relative; color: rgb(255, 255, 0); top: -20px;">c</span>
    <span data-reactid=".1.8" style="position: relative; color: rgb(153, 153, 153);">h</span>
    <span data-reactid=".1.9" style="position: relative; color: rgb(0, 0, 0); top: -10px;">.</span>
    <span data-reactid=".1.a" style="position: relative; color: rgb(204, 204, 204); top: 0px;">c</span>
    <span data-reactid=".1.b" style="position: relative; color: rgb(13, 212, 43); top: -10px;">o</span>
    <span data-reactid=".1.c" style="position: relative; color: rgb(242, 44, 22);">m</span>
  </div>
</div>      

Javascript

var Logo = React.createClass({
  render: function() {

    return (
      <div>  
        <span>k</span>
        <span>o</span>
        <span>y</span>
        <span>a</span>
        <span>m</span>
        <span>a</span>
        <span>t</span>
        <span>c</span>
        <span>h</span>
        <span>.</span>
        <span>c</span>
        <span>o</span>
        <span>m</span>
      </div>    
      )
  }
});

React.render(
  <Logo />,
  document.getElementById('logoComponent')
);

$("#logoComponent span").css("position","relative");

$("#logoComponent").css("font-size","50px");
$("#logoComponent").css("text-shadow",
                         "4px 4px 0px #939393");

$('#logoComponent div span:nth-child(1)').css("color","#f00");
$('#logoComponent div span:nth-child(2)').css("color","#0f0");
$('#logoComponent div span:nth-child(3)').css("color","gold");
$('#logoComponent div span:nth-child(4)').css("color","#00f");
$('#logoComponent div span:nth-child(5)').css("color","#0f0");
$('#logoComponent div span:nth-child(6)').css("color","#0ff");
$('#logoComponent div span:nth-child(7)').css("color","#f0f");
$('#logoComponent div span:nth-child(8)').css("color","#ff0");
$('#logoComponent div span:nth-child(9)').css("color","#999");
$('#logoComponent div span:nth-child(10)').css("color","#000");
$('#logoComponent div span:nth-child(11)').css("color","#ccc");
$('#logoComponent div span:nth-child(12)').css("color","#0DD42B");
$('#logoComponent div span:nth-child(13)').css("color","#F22C16");

$('#logoComponent div span:nth-child(4)').css("top","-7px");
$('#logoComponent div span:nth-child(5)').css("top","-20px");
$('#logoComponent div span:nth-child(6)').css("top","-7px");
$('#logoComponent div span:nth-child(7)').css("top","-20px");
$('#logoComponent div span:nth-child(8)').css("top","-10px");
$('#logoComponent div span:nth-child(12)').css("top","-10px");

$('#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"});
  }
);