投稿記事

Reactコンポーネント-ロゴ

11 Jun 2015


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

マウス・オーバーしたときの動きは微妙に違いますが…


Reactで作成された要素

<div id="logoComponent" style="font-size: 50px; text-shadow: rgb(147, 147, 147) 4px 4px 0px;">
  <div data-reactid=".0">
    <span data-reactid=".0.0" style="position: relative; color: rgb(255, 0, 0);">k</span>
    <span data-reactid=".0.1" style="position: relative; color: rgb(0, 255, 0);">o</span>
    <span data-reactid=".0.2" style="position: relative; color: rgb(255, 215, 0);">y</span>
    <span data-reactid=".0.3" style="position: relative; color: rgb(0, 0, 255); top: -7px;">a</span>
    <span data-reactid=".0.4" style="position: relative; color: rgb(0, 255, 0); top: -20px;">m</span>
    <span data-reactid=".0.5" style="position: relative; color: rgb(0, 255, 255); top: -7px;">a</span>
    <span data-reactid=".0.6" style="position: relative; color: rgb(255, 0, 255);">t</span>
    <span data-reactid=".0.7" style="position: relative; color: rgb(255, 255, 0); top: -20px;">c</span>
    <span data-reactid=".0.8" style="position: relative; color: rgb(153, 153, 153);">h</span>
    <span data-reactid=".0.9" style="position: relative; color: rgb(0, 0, 0); top: -10px;">.</span>
    <span data-reactid=".0.a" style="position: relative; color: rgb(204, 204, 204); top: 0px;">c</span>
    <span data-reactid=".0.b" style="position: relative; color: rgb(13, 212, 43); top: -10px;">o</span>
    <span data-reactid=".0.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");

$('[data-reactid=".0.0"]').css("color","#f00");
$('[data-reactid=".0.1"]').css("color","#0f0");
$('[data-reactid=".0.2"]').css("color","gold");
$('[data-reactid=".0.3"]').css("color","#00f");
$('[data-reactid=".0.4"]').css("color","#0f0");
$('[data-reactid=".0.5"]').css("color","#0ff");
$('[data-reactid=".0.6"]').css("color","#f0f");
$('[data-reactid=".0.7"]').css("color","#ff0");
$('[data-reactid=".0.8"]').css("color","#999");
$('[data-reactid=".0.9"]').css("color","#000");
$('[data-reactid=".0.a"]').css("color","#ccc");
$('[data-reactid=".0.b"]').css("color","#0DD42B");
$('[data-reactid=".0.c"]').css("color","#F22C16");

$('[data-reactid=".0.3"]').css("top","-7px");
$('[data-reactid=".0.4"]').css("top","-20px");
$('[data-reactid=".0.5"]').css("top","-7px");
$('[data-reactid=".0.7"]').css("top","-20px");
$('[data-reactid=".0.9"]').css("top","-10px");
$('[data-reactid=".0.b"]').css("top","-10px");

$('[data-reactid=".0.0"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('[data-reactid=".0.1"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('[data-reactid=".0.2"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('[data-reactid=".0.3"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-7px"});
  }
);
$('[data-reactid=".0.4"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-20px"});
  }
);
$('[data-reactid=".0.5"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-7px"});
  }
);
$('[data-reactid=".0.6"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('[data-reactid=".0.7"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-20px"});
  }
);
$('[data-reactid=".0.8"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('[data-reactid=".0.9"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-10px"});
  }
);
$('[data-reactid=".0.a"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);
$('[data-reactid=".0.b"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"-10px"});
  }
);
$('[data-reactid=".0.c"]').hover(
  function(){
    $(this).animate({"top":"5px"});
  },
  function(){
    $(this).animate({"top":"0px"});
  }
);