Winter snow theme component ❄

This theme component adds some animated snow to your forum.

:christmas_tree: Warning: the animations will increase browser CPU usage :santa:

:eye: Demo

:link: Repository

Javascript mode (shared by @cjk77 here):

CSS Mode (adapted from here)

「いいね!」 37

Thanks - now with snow :smiley:

Installation:

Go to: /admin/customize/themes
Choose Compontes - add Install.
Paste in the link: https://github.com/davidtaylorhq/discourse-snow-theme.git
Go back to admin/customize/themes and find your theme.
Click it and you can customize your theme.
Scroll down
Add the new component to your theme.

And your have :snowflake:

「いいね!」 10

I’ve got a couple of users using Firefox and Opera where this isn’t working (configured with js-mode), but the codepen example of the code does work. Works fine in Chrome. Any ideas?

ETA: Both users have confirmed that css mode works for them

「いいね!」 1

It seems to be a Chrome-only component. On Firefox, with JS-mode, there’s nothing, and with CSS mode there’s a wall of jerky snow flakes that covers the screen, so it’s not really usable.

「いいね!」 3

It is now updated so that js-mode works for Firefox. I haven’t tested Opera, but I suspect the same fix will help there as well.

「いいね!」 14

Can confirm it’s now working for both of my users, Firefox and Opera. Thanks for the fix.

「いいね!」 5

I use Opera,

looked great but as David noted

image

image
the CPU is too much,

1% without up to 39% with,

Sadly had to go :pensive:

「いいね!」 6

is there a way to make this have random fireworks instead of snow?

and my CPU never increased with the snow, used it on desktops and phones, my entire forum loved it, and not one complaint about CPU usage

「いいね!」 10

Hi! I love this, it’s adorable and really brings things to life. I’m wondering, however, if it’s possible to make it appear only to the right and left/in the unused space beside the board (or go behind it)? That way it doesn’t snow all over the text and make reading difficult.

「いいね!」 4

Seems to work fine with the latest discourse release…

「いいね!」 2

Pretty love this theme component, but is there a way that change the “point” (or should I say “dot”?) to real snow icon?

「いいね!」 1

雪をもう少し遅くして、それほど邪魔にならないようにする方法はありますか?怠惰な雪のような?または、ユーザーが自分で雪をオフにできるようにして、一部の人がそれを楽しむことができるようにし、問題を引き起こす他の人がそれをオフにできるようにする方法はありますか?

「いいね!」 1

CSS版とJS版のどちらをご利用ですか?

JSからCSSに切り替えました!どちらでも試せますが、やりやすい方で大丈夫です。@famousamos.1 参考までに

「いいね!」 3

@dennisjbr に依頼しました。最初に彼に尋ねるべきでしたが、私のやることリストは膨大です。彼は私たちのサイトを手伝ってくれます。

「いいね!」 3

CSSバージョンの方が変更は簡単ですが、同じ効果ではありません。:thinking:

CSSバージョンで問題なく、落下速度を遅くしたい場合は、このCSSをテーマまたは新しいテーマコンポーネントに追加し、必要に応じて値を調整してください。値が高いほど遅くなります。

#snow {
    animation: snow 60s linear infinite;
}
「いいね!」 6

どうもありがとうございます

「いいね!」 3