Рандомное переливание заголовков в виджете

XenForo Рандомное переливание заголовков в виджете

Совместимость с XenForo
  1. 2.2.x
Делаем модификацию в шаблоне PAGE_CONTAINER.
Найти:
Код:
</header>
Заменить:
Код:
$0

$(document).ready(function() {
$('.p-body-sidebar .block .block-container h3.block-minorHeader').each(function() {
var html = $(this).text(); // Получаем текст для текущего элемента
var ret = "";
var rando = 0;

// Разбиваем текст на символы и добавляем случайные классы
$.each(html.split(''), function(k, v) {
rando = Math.floor(Math.random() * 7) + 1; // Генерация случайного числа от 1 до 7
ret += '' + v + ''; // Формируем новый HTML
});

// Заменяем содержимое текущего элемента на новый HTML
$(this).html(ret);
});
});
Далее добавляем в шаблон extra.less, выбираем регулярное выражение:
Найти:
Код:
/^.*$/s
Заменить:
Код:
$0
@import url(https://fonts.googleapis.com/css?family=Fredericka+the+Great|Frijole);

.block-container .block-minorHeader {
  font-family: "Fredericka the Great", "Frijole";
  /*text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1em;*/
}
.lights-1 {
  animation: twinkle 1s infinite;
}

.lights-2 {
  animation: twinkle 2s infinite;
}

.lights-3 {
  animation: twinkle 3s infinite;
}

.lights-4 {
  animation: twinkle 4s infinite;
}

.lights-5 {
  animation: twinkle 5s infinite;
}

.lights-6 {
  animation: twinkle 6s infinite;
}

.lights-7 {
  animation: twinkle 7s infinite;
}

@keyframes twinkle {
  0%, 100% {
    color: #ffbfcf;
    /*text-shadow: 0 0 15px #ff0040, 0 0 25px #ff0040;*/
  }
  20% {
    color: #e2bfff;
    /*text-shadow: 0 0 15px #8c00ff, 0 0 25px #8c00ff;*/
  }
  40% {
    color: #bfe9ff;
    /*text-shadow: 0 0 15px #00a6ff, 0 0 25px #00a6ff;*/
  }
  60% {
    color: #bfffc9;
    /*text-shadow: 0 0 15px #00ff26, 0 0 25px #00ff26;*/
  }
  80% {
    color: #fffbbf;
    /*text-shadow: 0 0 15px #ffee00, 0 0 25px #ffee00;*/
  }
}
Получаем такой результат:
dsf33 (1).gif



Рандомное переливание заголовков в виджете
Рандомное переливание заголовков в виджете
Просмотры
12
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0
  • Теги Теги
    xenforo
  • Ещё ресурсы от Groot

    Поделиться этим ресурсом

    Назад
    Верх