SCSS

by lunar1a

HTML

<div class="main">
				<h2 class="intro">Разработано в Изи</h2>
		</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  
  button {
    background: $blue-darker;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }
  
  &:hover {
    background: $blue-darker;
    color: #fff;
    margin-top: 40px;
    width: 200px;
  }
  
  &:hover button {
    background: #fff;
    color: #000;
  }
}

JavaScript

$(document).ready(function() {
  $(".intro").flipping_text({
    tickerTime: 50,
    tickerCount: 5,
    customRandomChar: "!@#$%^&*"
  });
});

! function($) {
  var defaults = {
    tickerTime: 10,
    customRandomChar: false,
    tickerCount: 10,
    opacityEffect: true,
    resetOnChange: false
  };
  function Timer(callback, delay) {
    var timerId, start, remaining = delay;
    this.pause = function() {
      window.clearTimeout(timerId);
      remaining -= new Date() - start;
    };
    this.resume = function() {
      start = new Date();
      timerId = window.setTimeout(callback, remaining);
    };
    this.resume();
  }
  $.fn.flipping_text = function(options) {
    var els = this;
    resetAll = function(els) {
      els.each(function(index) {
        $(this).css({
          opacity: 1,
          visibility: "visible"
        }).text($(this).data("ft-text"));
      });
    }
    return this.each(function(index) {
      if ($(this).data("delay") !== undefined) {
        var data_delay = $(this).data("delay") + 0;
      } else {
        var data_delay = 0;
      }
      var settings = $.extend({}, defaults, options),
        el = $(this),
        count = el.text().length;

      function randString() {

        var text = el.text(),
          char_pos = 0;
        if (settings.customRandomChar != false) {
          var random_char = settings.customRandomChar;
        } else {
          var random_char = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        }
        el.attr("data-ft-text", text).html("");
        for (var i = 0; i < count; i++) {
          el.append("<span data-ft-bk='" + text.charAt(i) + "' class='ft_char" + i + "'></span>");
          var timeout = new Timer(function() {
            char_pos = char_pos + 1;
            var j_count = 0;

            if (onblur == true) {
              return false;
            } else {
              for (var j = 0; j < settings.tickerCount; j++) {

                var el2 =...