Привет,
Вот несколько анимированных рождественских гирлянд, которые можно добавить под заголовок Discourse.
Это реализация «Рождественских гирлянд» Тоби с Codepen: https://codepen.io/tobyj/pen/QjvEex
Я немного доработал код, чтобы он подходил для Discourse.
Посмотрите, как это работает здесь: https://forum.monocycle.info/ (я уберу их в январе)
Скриншоты:
На мобильных устройствах (они не будут следовать за фиксированным заголовком):
С тёмной темой:
Как добавить это в Discourse:
- Перейдите в панель администратора → настройка → выберите вашу текущую тему → пользовательский CSS/HTML
- Добавьте этот код во вкладку CSS:
/* Рождественские гирлянды
Авторские права (c) 2019 Toby (https://codepen.io/tobyj/pen/QjvEex)
Настоящим предоставляется бесплатная лицензия любому лицу, получившему копию этого программного обеспечения и связанных с ним документов документации (далее «Программное обеспечение»), на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного обеспечения, а также разрешать лицам, которым предоставляется Программное обеспечение, делать это при соблюдении следующих условий:
Уведомление об авторских правах и данное разрешение должны быть включены во все копии или существенные части Программного обеспечения.
*/
$globe-width: 12px;
$globe-height: 15px;
$globe-spacing: 40px;
$globe-spread: 3px;
$light-off-opacity: 0.4;
$speed: 0.5;
.lightrope {
text-align: center;
white-space: nowrap;
overflow: hidden;
position: absolute;
left: 0;
z-index: 1;
margin: -54px 0 0 0;
padding: 0;
pointer-events: none;
width: 100%;
li {
position: relative;
animation-fill-mode: both;
animation-iteration-count:infinite;
list-style: none;
margin: 0;
padding: 0;
display: block;
width: $globe-width;
height: $globe-height;
border-radius: 50%;
margin: $globe-spacing/2;
display: inline-block;
background: rgba(0,247,165,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);
animation-name: flash-1;
animation-duration: 2s;
&:nth-child(2n+1) {
background: rgba(0,255,255,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.5);
animation-name: flash-2;
animation-duration: 0.4s;
}
&:nth-child(4n+2) {
background: rgba(247,0,148,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);
animation-name: flash-3;
animation-duration: 1.1s / $speed;
}
&:nth-child(odd) {
animation-duration: 1.8s / $speed;
}
&:nth-child(3n+1) {
animation-duration: 1.4s / $speed;
}
&:before {
content: "";
position: absolute;
background: #222;
width: ($globe-width - 2);
height: $globe-height/3;
border-radius: 3px;
top: (0 - ($globe-height/6));
left: 1px;
}
&:after {
content: "";
top: (0 - $globe-height/2);
left: $globe-width - 3;
position: absolute;
width: $globe-spacing + 12;
height: ($globe-height/3 * 2);
border-bottom: solid #222 2px;
border-radius: 50%;
}
&:last-child:after {
content: none;
}
&:first-child {
margin-left: -$globe-spacing/2-$globe-width;
}
}
}
@keyframes flash-1 {
0%, 100% { background: rgba(0,247,165,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);}
50% { background: rgba(0,247,165,$light-off-opacity);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,0.2);}
}
@keyframes flash-2 {
0%, 100% { background: rgba(0,255,255,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,1);}
50% { background: rgba(0,255,255,$light-off-opacity);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.2);}
}
@keyframes flash-3 {
0%, 100% { background: rgba(247,0,148,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);}
50% { background: rgba(247,0,148,$light-off-opacity);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,0.2);}
}
/* мобильная версия */
.mobile-view .lightrope {
margin-top: -36px;
}
- Добавьте этот код во вкладку «После заголовка»:
<ul class="lightrope">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
(Вы можете добавить ещё несколько тегов <li></li>, если хотите, чтобы гирлянды занимали всю ширину монитора 4K. В настоящее время они подходят для монитора 2K)
Сохраните и наслаждайтесь!
Если вы хотите изменить внешний вид гирлянд, отредактируйте эти переменные в начале кода SCSS:
$globe-width: 12px;
$globe-height: 15px;
$globe-spacing: 40px;
$globe-spread: 3px;
$light-off-opacity: 0.4;
$speed: 0.5;
