Jump to content
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
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...