I found a java script with a falling snow effect, and I was wondering, is it possible to put this script in the theme? I tried to insert where I put CSS, but the site bugged lol, is there another place I can insert it or does discourse not accept these types of scripts?
Can you insert any kind of javascript code in the head?
And when there is HTML code combined with CSS, do I put it in normal CSS or combined CSS???
Can you show the code you want to insert so we can understand better what you want to achieve?
html is
<div class="snow"></div> 176 times
and CSS is
body {
height: 100vh;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow: hidden;
filter: drop-shadow(0 0 10px white);
}
@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
@return $random_range;
}
.snow {
$total: 200;
position: absolute;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
@for $i from 1 through $total {
$random-x: random(1000000) * 0.0001vw;
$random-offset: random_range(-100000, 100000) * 0.0001vw;
$random-x-end: $random-x + $random-offset;
$random-x-end-yoyo: $random-x + ($random-offset / 2);
$random-yoyo-time: random_range(30000, 80000) / 100000;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random(10000) * 0.0001;
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;
&:nth-child(#{$i}) {
opacity: random(10000) * 0.0001;
transform: translate($random-x, -10px) scale($random-scale);
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
}
@keyframes fall-#{$i} {
#{percentage($random-yoyo-time)} {
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
}
to {
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
}
}
}
}
<script src="https://sites.google.com/site/novoefeitoneve/home/novoefeitoneve/snowstorm.js"></script>
I had tried to use this javascript, but it didn’t work
I wouldn’t recommend linking an external javascript if you don’t know how reliable it is. If the remote script change, it could break your forum.
I suggest you create a new theme component in your admin panel instead. Name it something like “snowflake effect”.
Edit this new theme component.
-
In the Head tab, copy-paste the javascript code inside a
<script>HTML tag. -
In the CSS tab, paste the CSS code, without the
height: 100vh;part inbody {. -
In the Footer tab, paste 176 times
<div class="snow"></div>. -
Enjoy your snow.
Note that this effect was created by someone in their own HTML environment, isn’t “Discourse-compatible” out of the box and thus it may cause issues on your forum.
I found this snow effect and I really liked it, but it only works on desktop, on mobile it doesn’t, why? Will I have to activate something on the mobile to work?
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain2']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain3']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain4']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>
I will see about that, thanks
1 Like
I installed it but nothing happened 
Honestly, taking a snowing effect randomly on the Internet and trying to make it work on Discourse isn’t a necessarely easy task.
Discourse has its own constraints, and most javascript from the wild that you want to include in Discourse needs to be modified and adapted to these constraints.
I tried yesterday and in the current state, the effect is quite… Subtle. It surely could be improved, but again, that’s some work.
I also agree with the others, if you want to add customizations to your website (you seem to be very involved in it and read Meta a lot), you should start by the beginning and understand the basics of HTML, CSS and javascript.
I think free help here for such customizations will be limited.
1 Like
Thanks for clarifying my doubts, one thing I didn’t understand is that the effects work on the site for desktop, but not for cell phones, why is it???