Jump to content
clangstaff

Snow on platform

Recommended Posts

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

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

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

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