안녕하세요,
Discourse 헤더 아래에 추가할 수 있는 크리스마스 애니메이션 조명을 소개합니다.
이것은 Toby의 Codepen 크리스마스 조명 구현을 기반으로 합니다: https://codepen.io/tobyj/pen/QjvEex
Discourse에 맞게 코드를 조금 수정했습니다.
실제 적용 모습을 여기서 확인해 보세요: https://forum.monocycle.info/ (1월에 제거할 예정입니다)
스크린샷:
모바일 환경 (고정 헤더를 따라가지 않습니다):
다크 테마 사용 시:
Discourse에 추가하는 방법:
- 관리자 패널 → 커스터마이징 → 현재 테마 선택 → 사용자 정의 CSS/HTML로 이동하세요.
- CSS 탭에 다음 코드를 추가하세요:
/* Christmas Lights
Copyright (c) 2019 by Toby (https://codepen.io/tobyj/pen/QjvEex)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
$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 */
.mobile-view .lightrope {
margin-top: -36px;
}
- 헤더 후(After header) 탭에 다음 코드를 추가하세요:
<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><li></li><li></li><li></li><li></li>
</ul>
(4K 모니터의 전체 폭을 조명이 차지하도록 하려면 <li></li> 태그를 더 추가할 수 있습니다. 현재는 2k 모니터에 맞춰져 있습니다)
저장하고 즐기세요!
조명의 외관을 변경하려면 SCSS 코드 상단의 다음 변수를 수정하세요:
$globe-width: 12px;
$globe-height: 15px;
$globe-spacing: 40px;
$globe-spread: 3px;
$light-off-opacity: 0.4;
$speed: 0.5;
