Jump to content

Snow on platform


clangstaff

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 comment
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 comment
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 comment
Share on other sites

  • 11 months later...

 

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 comment
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 comment
Share on other sites

  • 1 year later...

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
×
×
  • Create New...