• 閲覧数: 2674
  • 8
  • C.120x80.5ab0f37c8ee52870f2ba7624067baef8

作品説明

Facebookが流行ってるらしいですね。

ところで最近Facebookにちょっとした変更があったらしく、ログインすると「今どんな気持ち?」ときかれるようになったらしいです。
それがどんな恐怖体験なのかは気になるけどこわくてログインできないという方のために、Facebookにログインしなくても同様の気持ちを味わえる装置を作りました。
実物は見たことありませんが、Facebookの世界をかなり正確に表現できたと思います。

※ブラウザさえあれば見れると思いますが、FirefoxとChromeでしか動作確認してません。ご了承ください。

レシピ

<!DOCTYPE html> 
<html>
<head
  <meta charset="utf-8" />
  <title>facebook.com/jp</title>
  <style>
    html,body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #000;
      width: 100%;
      position: relative;
    }
    #logo {
      position: absolute;
      opacity: 0.7;
      display: block;
    }
    p {
      position: absolute;
      white-space: pre;
    }
  </style>
</head
<body>
  <!-- icon by http://findicons.com/icon/236338/facebook_button?id=352169 -->
  <img id="logo" src="data:image/png;base64,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" />

  <script>
    window.requestAnimationFrame = (function() {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function(f) { return window.setTimeout(f, 1000 / 60); };
    }());
    var container = document.body;
    container.style.minHeight = window.innerHeight + "px";
    var logo = document.querySelector('#logo');
    var likeButton = document.createElement('img');
    likeButton.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAAYCAYAAAC/SnD0AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wMCAMtLyDRavUAAAP4SURBVFjD7ZlbTBxVGMd/M7PD7gJll0XAlpsQ0daQ0hA1WItiTJRgiY+tSHxp+iC+GNNoNPrgi0nVpE9WE1ISY1O8pOXBYqmpaWtDrSikpS0gKSjXhe0u7C57mWUv40shu91duruF6sP8nyZn/nPmnN+c+b5zEVRVVR0uhQW7F68SRFNi5RhkSopzMeXqEXxKUL017aTIbEAniRqdJAqFI9icCo+WmRGGx+2qJU+vAUsR3KI7gOjxBzVgKUoniXj8QTRaGei+oDW3H+eND7o1aKnqncNnuXLi4P+iEyvBMJ2nBjJ61u1RcHuUBwNtdPI2AHand13fxMwSv12dSrnedP0A4VCE0XFbRv347sx1fjh7Y/Ohdf8yTENdWUreBfsyV0esceVOt5+jXVdQ1cz94YjKxT//pvfyGA6nD/uSD1WF369N03lygO5zN1ECoXXbp8+SMGTpNh9ax8lBPjvUFBPbmtuPc/jYpThvtkEmHI7ElZvzjIiiSO+lvzL2i4KAxxPAqM8i32xkJRji4y/OMTZp59m6CgA+Pfbrun2RdRI6nZReFr1X3Fr9DaMVHcuir+tbO3jvQEOM12iQcSWJGW0tu3j38zM8/3QV2QY5bb8gwCuN21lwePi5b4wjX/fxVms9j5TkA/B45UMMDluZnXdR8rApyTRCQhSFjRtpo5O32ddUw76mmjVA6Qb/HIOMazkxhNzsLJ6pLadvcDJjP8D4lAO/EuL9g41rwFZVXWFhesGdfNTIAjpJ2Njfc87mYs7myjizFRduiVnTdp4aiIlLu+squBwFIV1//9A03/dep7qiAIvZGPd+g15GCSRfU8uSlPbkXscmSyeJmHINTFmdyDqJGasTIerDVpbmM2V1oqogCOn5/5ldoqvnGm/ur+f0hVEA/P4gR77pQwmEEATw+ldo27srafssJiOCIGwsNFEQiaiR+wLX8sJ2vvq2nwJzNi/veeyu+gUOHXguI3/5VhMftr+Ix6sQupM8+m/OUFVqYX/zTjy+Fd7+5DQneobYVmyiyJIT17aa6uL0B8K9DNHA6ls7AGioK+PVxh3sebIixlux1ZywjvractzeAMueAE/tLI27v6OqMCO/JIkUmIy4lhVCoTAAT1QV8eP5ERxLPiZmF3m9pZb8PCMz866E0Lp6hghHIrS/Vp8yNKH/hlWt2paXUvb86WjbnThi5fwft7g4MBkD7MuP9v4nKwL7ko/BkVle2l0NQDAUwWZfJt+cvZaVN0oTc+71oWlKDE3b5XjQuxwaNE2pQ5Mlkcjdq2ZNCRUKR8gxyIiVpSbmF/1r8xxNyYHZnAolxbkIq0d48w4vPr92hJdM2UaZ0sJcTFv0/AsJS8tvuiI+DgAAAABJRU5ErkJggg==";

    function facebook(){
      var diff = ((Math.random() * 12) - 6);
      logo.style.top = (window.innerHeight / 2) - 21 + diff + "px";
      logo.style.left = (window.innerWidth / 2) - 61 + diff + "px";
      requestAnimationFrame(facebook);
    }
    facebook();

    function ask() {
      var msg = document.createElement('span');
      msg.innerHTML = "今どんな気持ち?";
      msg.style.fontSize = "10pt";
      msg.style.color = "hsl("+(Math.random() * 360)+", 100%, 80%)";
      msg._data = {
        rate: ~~(Math.random() * 3) + 1,
        loopCount: 0
      };
      container.appendChild(msg);
      animation(msg);
    }
    function animation(msg) {
      var size = +msg.style.fontSize.match(/[0-9]+/)[0];
      msg.style.fontSize = (size + msg._data.rate) + "pt";
      msg._data.loopCount += 1;
      if(size > 200 || msg._data.loopCount > 150) {
        msg.parentNode.removeChild(msg);
        return ;
      };
      requestAnimationFrame(function(){ animation(msg); });
    }
    
    function like(){
      var img = likeButton.cloneNode();
      img.style.position = "absolute";
      img.style.top = (Math.random() * window.innerHeight) + "px";
      img.style.left = (Math.random() * window.innerWidth) + "px";
      img.style.opacity = "0.5";
      container.appendChild(img);
      setTimeout(function(){
        img.parentNode.removeChild(img);
      }, 300);
    }
    setInterval(like, 300);
    setInterval(like, 300);
    setInterval(like, 300);
    setInterval(ask, 500);
  </script>
</body></html

コメント (0件)

コメントはまだありません