Scrabbler

by enesevans

HTML

<div id="scrabbler">
  <p class="prefix"></p>
  <ul>
    <li>YAZILIM</li>
    <li>PROGRAMLAMA</li>
    <li>NET BİLİŞİM</li>
    <li>WEB TASARIM</li>
    <li>GRAFİK VE ANİMASYON</li>
    <li>ENES ERDEM TÜFEKÇİ</li>
  </ul>
</div>

CSS

p {
  font-size: 30px;
}

#scrabbler {
  position: relative;
  margin: 0 auto;
  padding: 30px;
  top: 60px;
  display: inline-block;
  left: 50%;
  margin-left: -25%;
  width: 60%;
  border: 8px inset red;
}

#scrabbler ul {}

#scrabbler ul li {}

.randomwords {
  height: 42px;
  overflow: hidden;
  display: inline-block;
}

.hide {
  left: 100%;
  opacity: 0;
}

.show {
  left: 0;
  opacity: 1;
}

.randomwords span {
  position: relative;
  display: inline-block;
  /* border-bottom: 2px solid red;
    margin-right: 2px;*/
  width: 26px;
  height: 30px;
  font-family: Impacted;
  font-size: 30px;
  text-align: center;
  vertical-align: top;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.refresh {
  display: inline-block;
  cursor: pointer;
}

JavaScript

$.fn.scrabbler = function(options) {

      var settings = $.extend({
        'randwords_class': 'randomwords',
        'refreshtime': 5000
      }, options);

      var it = this,
        list = it.find('ul'),
        listi = list.children('li'),
        words = listi.map(function() {
          var $li = $(this);
          if ($li.is('LI')) return $li.html();
        }).get(),
        randwords_class = '.' + settings.randwords_class;

      function init() {
        setup();
        getword();
      }

      function getarrval(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
      }

      function setup() {

        list.remove();


        it.children('.prefix').append('<div class="' + settings.randwords_class + '">');
        $(it).append('<span class="refresh">Refresh</span>');
      }

      function getword() {
        $(randwords_class).empty();

        var wordarr = getarrval(words).split('');

        for (var i = 0, max = wordarr.length; i < max; i++) {
          $('<span>' + wordarr[i] + '</span>')
            .appendTo(randwords_class)
            .addClass('hide')
            .each(function() {
              var e = $(this);
              $(randwords_class).queue(function() {
                setTimeout(function() {
                  e.toggleClass('hide show');
                  $(randwords_class).dequeue();
                }, 50);
              });
            });
        }

      }

      init();

      $('.refresh').click(function() {
        getword();
      });

      window.setInterval(function() {
        getword();
      }, settings.refreshtime);
    }

    $('#scrabbler').scrabbler({
      'refreshtime': 2000
    });