Jump to content
Important Notice:
Due to further security updates and ongoing integration strategies following the latest release all schools using SIMS, WCBS or Progresso MIS systems will need to upgrade to the latest MIS extractor available here. All other schools using UK based MIS providers will be required to move to Groupcall XOD prior to the start of the next academic year. Please contact our service desk team who will help guide you through the process on 01422 395939 or via support@frogeducation.com.
clangstaff

Snow on platform

Recommended Posts

It only snows in the html box?

Share this post


Link to post
Share on other sites

You could try this:

<script>

jQuery(document).ready(function($){

  var wA = [],
      sA = [10,11,12],
      tA = [2,4,6,8,10,12,14],
      fA = ['&#10052;', '&#10053;', '&#10054;'];

  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 by sclough
  • Like 1

Share this post


Link to post
Share on other sites
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 = ['&#10052;', '&#10053;', '&#10054;'];

  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!!

  • Like 1

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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!! :P

Share this post


Link to post
Share on other sites

@ADT Here's some updated code:

<script>

var wA = [],
    sA = [10,11,12],
    tA = [2,4,6,8,10,12,14],
    fA = ['&#10052;', '&#10053;', '&#10054;'];

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 by sclough

Share this post


Link to post
Share on other sites

@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?

Share this post


Link to post
Share on other sites

Thanks :)

Unfortunately there's no way to get it onto the loading screen. You can't really modify that in any way.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

 

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 = ['&#10052;', '&#10053;', '&#10054;'];

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 by Sean_M

Share this post


Link to post
Share on other sites
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

snow.PNG

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
Looks like you're enjoying the discussion, why don't you sign up?

×