겨울 눈 테마 컴포넌트 ❄️

이 테마 컴포넌트는 포럼에 애니메이션 눈 효과를 추가합니다.

:christmas_tree: 경고: 애니메이션은 브라우저 CPU 사용량을 증가시킵니다 :santa:

:eye: 데모

:link: 저장소

자바스크립트 모드 (@cjk77 님이 여기에서 공유한 방식):

CSS 모드 (여기에서 수정)

37개의 좋아요

감사합니다 - 이제 눈도 내립니다 :smiley:

설치 방법:

  1. /admin/customize/themes로 이동하세요.
  2. Components를 선택하고 Install을 추가하세요.
  3. 링크를 붙여넣으세요: https://github.com/davidtaylorhq/discourse-snow-theme.git
  4. admin/customize/themes로 돌아가서 해당 테마를 찾으세요.
  5. 테마를 클릭하면 테마를 커스터마이즈할 수 있습니다.
  6. 아래로 스크롤하세요.
  7. 새 컴포넌트를 테마에 추가하세요.

그러면 눈이 내리기 시작합니다 :snowflake:

10개의 좋아요

Firefox와 Opera를 사용하는 몇몇 사용자에게는 이 기능이 작동하지 않습니다(js-mode로 설정되어 있음). 그런데 해당 코드의 Codepen 예제는 정상적으로 작동합니다. Chrome에서는 문제가 없습니다. 혹시 아이디어가 있으신가요?

ETA: 두 사용자 모두 css mode에서는 정상 작동한다고 확인했습니다.

1개의 좋아요

크롬 전용 컴포넌트인 것 같습니다. 파이어폭스에서 JS 모드로 실행하면 아무것도 보이지 않고, CSS 모드로 실행하면 화면을 덮는 끊기는 눈송이들이 가득 차서 사실상 사용할 수 없습니다.

3개의 좋아요

이제 Firefox에서 js-mode가 작동하도록 업데이트되었습니다. Opera는 테스트해 보지 않았지만, 동일한 수정 사항이 그곳에서도 도움이 될 것으로 추정됩니다.

14개의 좋아요

두 사용자 모두에서 이제 제대로 작동하는 것을 확인했습니다. Firefox와 Opera 모두에서요. 수정해 주셔서 감사합니다.

5개의 좋아요

나는 오페라를 사용하는데,

겉보기에는 괜찮아 보였지만 데이비드가 지적했듯이


CPU 사용량이 너무 높아,

실행하지 않을 때는 1%인데 실행하면 39%까지 올라가네.

안타깝게도 포기해야 했어 :pensive:

6개의 좋아요

눈 대신 랜덤한 불꽃놀이를 만들 수 있는 방법이 있을까요?

그리고 눈 효과로 CPU 사용량이 전혀 증가하지 않았습니다. 데스크톱과 휴대폰에서 모두 사용해 봤는데, 우리 포럼 전체가 좋아했고 CPU 사용량에 대한 불만은 하나도 없었습니다.

10개의 좋아요

안녕하세요! 정말 마음에 듭니다. 사랑스럽고 생동감 넘치는 디자인이에요. 다만, 보드 옆의 여백 공간(좌우)에만 나타나거나 보드 뒤로 가려지게 만들 수 있을까요? 그러면 텍스트 위에 눈이 내리지 않아서 읽기에도 편할 것 같습니다.

4개의 좋아요

최신 discourse 릴리스에서는 잘 작동하는 것 같습니다…

2개의 좋아요

이 테마 컴포넌트가 정말 마음에 드는데, “점”(혹은 "점"이라고 불러야 할까요?)을 실제 눈 아이콘으로 변경할 수 있는 방법이 있을까요?

1개의 좋아요

눈이 덜 눈살을 찌푸리게 하도록 속도를 더 느리게 할 수 있는 방법이 있을까요? 좀 더 느긋한 눈처럼요. 아니면 사용자가 직접 눈을 끄도록 해서, 좋아하는 사람은 즐기면서 눈 때문에 불편을 겪는 사람은 끌 수 있게 하면 어떨까요?

1개의 좋아요

CSS 버전인가요, 아니면 JS 버전인가요?

JS에서 CSS로 전환했습니다! 하지만 둘 중 어느 쪽이든 더 쉬운 쪽으로 시도해볼 수 있습니다. @famousamos.1 참고 바랍니다

3개의 좋아요

@dennisjbr 님이 대신 처리해 주실 거예요. 먼저 물어봤어야 했는데, 할 일이 너무 많아서요. 저희 사이트를 도와주시는 분이세요.

3개의 좋아요

CSS 버전은 변경하기가 더 쉽지만, 그 효과는 동일하지 않습니다. :thinking:

CSS 버전을 사용해도 괜찮고 낙하 속도를 늦추고 싶다면, 이 CSS를 테마나 새로운 테마 컴포넌트에 추가하고 값을 필요에 맞게 조정하세요. 값이 높을수록 속도가 느려집니다.

#snow {
    animation: snow 60s linear infinite;
}
6개의 좋아요

정말 감사합니다

3개의 좋아요

사이트에 다시 눈이 왔어요 :slight_smile:
동작은 하지만 이 오류가 발생합니다

@frold 님, 보고해 주셔서 감사합니다. 방금 수정 사항을 적용하여 테마 컴포넌트를 업데이트하시면 해결될 것입니다.

참고로, whos-online 오류도 이미 수정되었을 가능성이 높습니다. 해당 플러그인의 최신 버전을 사용 중이신가요?

1개의 좋아요

이 기능을 정말 좋아하지만, 사용자 불만이 나오고 있어요. 사용자가 직접 비활성화할 수 있는 옵션이 있으면 좋겠어요.