SlackのEmojiアイコンでスロットを作ってCSSスプライトを学ぶ

Googleのトップアイコンや、Twitterのいいねボタンのアイコン、SlackのEmojiなどで、CSSスプライトがつかわれている。複数のアイコンを1枚の画像にすることで、読み込み回数を減らしパフォーマンス向上を図る手法だ。

ということで、CSSスプライトの勉強も兼ねて、SlackのEmoji画像を利用してスロットをつくろうと思う。

background-imageとbackground-positionについて

1枚の画像から表示したい部分だけを表示するためには、background-imageプロパティとbackground-positionプロパティを使う。

• background-image
• 要素に対して背景画像を設定する
• ex. background-image: url(http://example.com/img/icon-set.png);
• background-position
• background-originを基準に、背景画像の位置をセットする
• ex. background-position: 10px 10px;

background-imageに背景画像を設定し、width, heightで表示範囲（窓みたいなイメージ）を指定する。あとは、background-positionで背景画像の位置をずらして、窓から表示されるように調整する。

その他のbackground系プロパティについては、以下の記事にまとめているので参考にしてほしい。

Slack's Emojiスロットをつくる

CSSスプライトについてひと通り学んだので、実際にSlackのEmoji画像をつかってスロットを作ってみる。
Emoji画像は41x41のアイコンから成っているので、単純にX軸、Y軸ともに41分割すればよい。
時間経過とともにbackground-positionを(0, 0)→(0, 2.5)→(0, 5)→...→(100, 95)→(100, 97.5)→(100, 100)に変化させていく。

<!-- index.html -->
<div id="slot"></div>
<button id="start" class="btn btn-start">Start</button>
<button id="stop" class="btn btn-stop">Stop</button>

/* style.css */
#slot {
  margin: 10px;
  width: 60px;
  height: 60px;
  background: url(https://cdx.slack-edge.com/bfaba/img/emoji_2016_06_08/sheet_apple_64_indexed_256colors.png);
}

.btn {
  width: 80px;
  height: 30px;
}

// script.js
const slot = document.getElementById('slot');
let x = 0;
let y = 0;

let slotTimer = null;

const start = document.getElementById('start');
start.addEventListener('click', () => {
  if (slotTimer !== null) return;
  slotTimer = setInterval(() => {
    slot.style.backgroundPositionX = x + '%';
    slot.style.backgroundPositionY = y + '%';

    if (y < 100) {
      y += 2.5;
    } else {
      y = 0;
      
      if (x < 100) {
        x += 2.5;
      } else {
        x = 0;
      }
    }
  }, 10);
});

const stop = document.getElementById('stop');
stop.addEventListener('click', () => {
  clearInterval(slotTimer);
  slotTimer = null;
});

※ Slackの画像を直接参照しているので、画像消えるかも。



以上

written by @bc_rikko