ADT Posted December 12, 2017 Share Posted December 12, 2017 It only snows in the html box? Link to comment Share on other sites More sharing options...
sclough Posted December 12, 2017 Share Posted December 12, 2017 (edited) You could try this: <script> jQuery(document).ready(function($){ var wA = [], sA = [10,11,12], tA = [2,4,6,8,10,12,14], fA = ['❄', '❅', '❆']; function r(a) {return a[Math.floor(Math.random() * a.length)]} for (var i = 0; i < $(window).innerWidth(); i++) {wA.push(i)} for (var i = 0; i < 15; i++) {$('<div class="s-fl" style="position: fixed; color: #fff; top: -25px; left: '+r(wA)+'px; font-size: 20px;">'+r(fA)+'</div>').appendTo('body')} $('.s-fl').each(function(){ var el = $(this) setTimeout(function(){ el.animate({'top' : '100%'}, r(sA) * 1000, function(){ $(this).css('top', -20); setInterval(function(){ el.animate({'top' : '100%'}, r(sA) * 1000, function(){ $(this).css('top', -20); })}, r(tA) * 1000); }) }, r(tA) * 1000); }); }); </script> This is just a quick snippet I wrote last year. I think it should work for the whole platform if you add it to your main school dashboard. I've not tested it too much in Frog though as it was designed to be something that just goes on websites. Edited December 12, 2017 by sclough 1 Link to comment Share on other sites More sharing options...
ADT Posted December 12, 2017 Share Posted December 12, 2017 3 minutes ago, sclough said: You could try this: <script> jQuery(document).ready(function($){ var wA = [], sA = [10,11,12], tA = [2,4,6,8,10,12,14], fA = ['❄', '❅', '❆']; function r(a) {return a[Math.floor(Math.random() * a.length)]} for (var i = 0; i < $(window).innerWidth(); i++) {wA.push(i)} for (var i = 0; i < 15; i++) {$('<div class="s-fl" style="position: fixed; color: #fff; top: -25px; left: '+r(wA)+'px; font-size: 20px;">'+r(fA)+'</div>').appendTo('body')} $('.s-fl').each(function(){ var el = $(this) setTimeout(function(){ el.animate({'top' : '100%'}, r(sA) * 1000, function(){ $(this).css('top', -20); setInterval(function(){ el.animate({'top' : '100%'}, r(sA) * 1000, function(){ $(this).css('top', -20); })}, r(tA) * 1000); }) }, r(tA) * 1000); }); }); </script> This is just a quick snippet I wrote last year. I think it should work for the whole platform if you add it to your main school dashboard. I've not tested it too much in Frog though as it was designed to be something that just goes on websites. We have a winner!!!! Now to make it only work on one dashboard!!! Hmmmmmmm!! 1 Link to comment Share on other sites More sharing options...
Graham Quince Posted December 12, 2017 Share Posted December 12, 2017 7 minutes ago, ADT said: It only snows in the html box? It doesn't. Add more content and it snows in the background across all of it Link to comment Share on other sites More sharing options...
ADT Posted December 12, 2017 Share Posted December 12, 2017 1 minute ago, Graham Quince said: It doesn't. Add more content and it snows in the background across all of it But it only snows inside of the layout box!!! Not across the whole page!! @sclough code snows all over!! Link to comment Share on other sites More sharing options...
sclough Posted December 12, 2017 Share Posted December 12, 2017 (edited) @ADT Here's some updated code: <script> var wA = [], sA = [10,11,12], tA = [2,4,6,8,10,12,14], fA = ['❄', '❅', '❆']; function r(a) {return a[Math.floor(Math.random() * a.length)]} for (var i = 0; i < $(window).innerWidth(); i++) {wA.push(i)} for (var i = 0; i < 15; i++) {$('<div class="s-fl" style="position: fixed; color: #fff; top: -20px; left: '+r(wA)+'px; font-size: 20px;">'+r(fA)+'</div>').appendTo(this.element.closest('.app-sites'))} $('.s-fl').each(function(){ var el = $(this) setTimeout(function(){ el.animate({'top' : '100%'}, r(sA) * 1000, function(){ $(this).css('top', -20); setInterval(function(){ el.animate({'top' : '100%'}, r(sA) * 1000, function(){ $(this).css('top', -20); })}, r(tA) * 1000); }) }, r(tA) * 1000); }); </script> This should only apply the snow to the site it's on now Edited December 12, 2017 by sclough Link to comment Share on other sites More sharing options...
Nathan Posted December 12, 2017 Share Posted December 12, 2017 @sclough This is great! Thanks so much for sharing Is there anyway to get this onto the login page as well for a little festive spirit? Link to comment Share on other sites More sharing options...
sclough Posted December 12, 2017 Share Posted December 12, 2017 Thanks Unfortunately there's no way to get it onto the loading screen. You can't really modify that in any way. Link to comment Share on other sites More sharing options...
Nathan Posted December 12, 2017 Share Posted December 12, 2017 1 minute ago, sclough said: Thanks Unfortunately there's no way to get it onto the loading screen. You can't really modify that in any way. No Bother, Thought it might be worth asking. Regards Nathan Link to comment Share on other sites More sharing options...
Sean_M Posted November 30, 2018 Share Posted November 30, 2018 (edited) On 12/12/2017 at 10:05, sclough said: @ADT Here's some updated code: <script> var wA = [], sA = [10,11,12], tA = [2,4,6,8,10,12,14], fA = ['❄', '❅', '❆']; function r(a) {return a[Math.floor(Math.random() * a.length)]} for (var i = 0; i < $(window).innerWidth(); i++) {wA.push(i)} for (var i = 0; i < 15; i++) {$('<div class="s-fl" style="position: fixed; color: #fff; top: -20px; left: '+r(wA)+'px; font-size: 20px;">'+r(fA)+'</div>').appendTo(this.element.closest('.app-sites'))} $('.s-fl').each(function(){ var el = $(this) setTimeout(function(){ el.animate({'top' : '100%'}, r(sA) * 1000, function(){ $(this).css('top', -20); setInterval(function(){ el.animate({'top' : '100%'}, r(sA) * 1000, function(){ $(this).css('top', -20); })}, r(tA) * 1000); }) }, r(tA) * 1000); }); </script> This should only apply the snow to the site it's on now Great Code. I'm looking into adding a little bit of sway to the snowflakes as they drop. Anyone on the (snow) ball who could help? Thanks Edited November 30, 2018 by Sean_M Link to comment Share on other sites More sharing options...
adamw Posted November 30, 2018 Share Posted November 30, 2018 5 hours ago, Sean_M said: Great Code. I'm looking into adding a little bit of sway to the snowflakes as they drop. Anyone on the (snow) ball who could help? Thanks You've just reminded me of some code I did last year when I was trying to make is snow on the platform. I'll paste it here in case anyone wants to use it. <canvas id ="snow-canvas" style="position: fixed; top: 0; left: 0; pointer-events: none;"> </canvas> <script> var canvas = document.getElementById('snow-canvas'); var ctx = canvas.getContext('2d'); var widgets = this.element.closest('.app-sites').find('.widget-content'); var surfaces = []; for (var i = 0; i < widgets.length; i++) { var w = $(widgets[i]); var surf = { start_x: w.offset().left, end_x: w.offset().left + w.innerWidth(), y: w.offset().top } surfaces.push(surf); } canvas.width = window.innerWidth; canvas.height = window.innerHeight; var max_particles = 2000; var jitter_magnitude = 5; var generator_speed = 2; var particles = []; window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 30); }; })(); function render() { if (particles.length < max_particles) { for (var i = 0; i < generator_speed; i++) { particles.push(generateParticle()); } } for (var i = 0; i < particles.length; i++) { if (particles[i].lifespan % 3 == 0 && !particles[i].landed) { var jitter_x = Math.random(); if (jitter_x > 0.5) { jitter_x = jitter_x * -1; } particles[i].x += jitter_x; } if (!particles[i].landed) { particles[i].y += particles[i].speed; } particles[i].lifespan -= 1; for(var j = 0; j < surfaces.length; j++) { if ( particles[i].x >= surfaces[j].start_x && particles[i].x <= surfaces[j].end_x && particles[i].y < surfaces[j].y && (particles[i].y + 5 >= surfaces[j].y) && (particles[i].y + 5 < surfaces[j].y + 5) ) { var landed = Math.floor(Math.random() * 100) + 1; if (landed < 25) { particles[i].landed = true; } } } } animate(); requestAnimFrame(function() { render(); }); } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'white'; for (var i = 0; i < particles.length; i++) { ctx.fillRect(particles[i].x,particles[i].y,1,1); if (particles[i].y > window.innerHeight + 10 || particles[i].lifespan < 0) { particles.splice(i, 1); } } } function generateParticle() { return { x: Math.floor(Math.random() * window.innerWidth) + 1, y: Math.floor(Math.random() * -100) + 1, speed: Math.random() + 1, lifespan: 500, landed: false } } render(); </script> Stick that in a html widget and cross your fingers. It renders tiny speck-like particles of snow and even builds up on top of widgets on the screen. It's not been optimized, so I wouldn't recommend putting it live, but it's a good starter. I was planning on getting the snow to stick together as it builds up - but I've not gotten around to it yet :p Link to comment Share on other sites More sharing options...
ADT Posted December 20, 2019 Share Posted December 20, 2019 O boy.... has anyone tried using this code this year??? Edge doesn't like it!! @Graham Quince @adamw Link to comment Share on other sites More sharing options...
adamw Posted December 20, 2019 Share Posted December 20, 2019 1 minute ago, ADT said: O boy.... has anyone tried using this code this year??? Edge doesn't like it!! @Graham Quince @adamw Hah, I'd forgotten I'd made that. Yeah, it was just a starter for ten! Link to comment Share on other sites More sharing options...
ADT Posted December 20, 2019 Share Posted December 20, 2019 6 minutes ago, adamw said: Hah, I'd forgotten I'd made that. Yeah, it was just a starter for ten! Well your code... and the other one don't seam to react well in Edge..... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now