gsamaras gsamaras - 12 days ago 6
CSS Question

How to make casino-like increment of a letter?

I need to convert (when the user does something):

adcb


to (the next letter of every letter):

bedc


Currently I am just going with and overwrite the character.

Remember the Pkmn Game Corner?

enter image description here

Wouldn't it be cool if we could simulate that movement of the character (in the pic, change from 7 to Pikachu)?

PS - I have no idea on how to approach this...

Answer

This can be achieved with CSS animations to move the letter around, updating the letter when it is not visible.

jsfiddle

HTML:

<div id="reels">
  <div>A</div>
  <div>L</div>
  <div>E</div>
  <div>X</div>
</div>
<button id="slide">Slide</button>

CSS:

#reels > div {
  width: 20px;
  height:30px;
  overflow:hidden;
  padding:3px;
  display:inline-block;
}

#reels > div.reel-change {
  animation: slideReel 1s 1;
}

@keyframes slideReel {
  0% {
      transform: translateY(0);
  }
  49% {
      transform: translateY(-30px);
  }
  50% {
      transform: translateY(30px);
  }
  100 % {
      transform: translateY(0px);
  }
}

#reels {
  margin-bottom:10px;
}

JavaScript:

$(function() {
    $('#slide').click(function() {
    var delay = 0;
    var reels = $('#reels').children().each(function() {
        var reel = this;
        setTimeout(function() {
        $(reel).toggleClass("reel-change");
      }, delay);
      setTimeout(function() {
        changeLetter(reel);
      }, delay + 500);
      setTimeout(function() {
        $(reel).toggleClass("reel-change");
      }, delay + 1000);
      delay += 500;
    });
  });
});

function changeLetter(el) {
      el.innerHTML = incrementChar(el.innerHTML);
}

var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
function incrementChar(c) {
    var index = alphabet.indexOf(c);
    return alphabet[index + 1] || alphabet[0];
}

Edit: Seeing as it's a good reason for doing it based on your above comments, I made it a bit prettier!!

https://jsfiddle.net/bigalreturns/ctuujz3j/2/