Snow on platform

[clangstaff 344]

@Graham Quince I thought I'd have a quick look at the snow code but this doesn't seem to be working for me when pasted in to a HTML widget on a site.

 

<style>
.snowflakes {
    position: absolute;
    left: 5%;
    top: -15px;
    width: 90%;
    overflow: visible;
}
.snowflake {
    position: absolute;
    color: #fff;
    -webkit-animation: falling 4.7s linear 0s infinite;
    -moz-animation: falling 4.7s linear 0s infinite;
    animation: falling 4.7s linear 0s infinite;
}
@-webkit-keyframes falling {
    0% {
        -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    }
    95% {
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
    }
}
@-moz-keyframes falling {
    0% {
        -moz-transform: translate3d(0, 0, 0) rotate(0deg);
    }
    95% {
        opacity: 0.8;
    }
    100% {
        -moz-transform: translate(0, 0) rotate(360deg);
    }
}
@keyframes falling {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    95% {
        opacity: 0.8;
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}
.uk_primary .os-titlebar .navbar-inner {
    background-color: #d62441!important;
    border-bottom: 3px solid #980000 !important
}
body.uk_primary .os-titlebar .navbar-search input {
    background-color: #980000 !important;
    border-color: #980000 !important;
}
</style>
<script>
var frogRevealingModule = (function() {
    var keyframeprefix = '',
        domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
        pfx = '',
        elm = document.createElement('div'),
        snowing = new $.Deferred();
    for (var i = 0; i < domPrefixes.length; i++) {
        if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
            pfx = domPrefixes[i];
            keyframeprefix = '-' + pfx.toLowerCase() + '-';
            break;
        }
    }
    var randInt = function(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
    };
    var findKeyframeAnimation = function(a) {
        var ss = document.styleSheets;
        for (var i = ss.length - 1; i >= 0; i--) {
            try {
                var s = ss[i],
                    rs = s.cssRules ? s.cssRules :
                    s.rules ? s.rules : [];
                for (var j = rs.length - 1; j >= 0; j--) {
                    if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a) {
                        return rs[j];
                    }
                }
                // Trying to interrogate a stylesheet from
                // another domain will throw a security error
            } catch (e) {}
        }
        return null;
    };
    $.fn.snow = function(options) {
        options = options || {};
        var me = this,
            count = options.flakeCount || 20,
            minDiameter = options.minDiameter || 20,
            maxDiameter = options.maxDiameter || 35,
            minOpacity = options.minOpacity || 50,
            maxOpacity = options.maxOpacity || 100,
            height = this.height(),
            flakes = [],
            keyframes = findKeyframeAnimation('falling'),
            characters = ['&#10052;', '&#10053;', '&#10054;', '*'];
        if (keyframes) {
            keyframes[(typeof keyframes.insertRule == 'function') ? 'insertRule' : 'appendRule'](
                '100% { ' + keyframeprefix + 'transform: translate3d(0,' +
                height + 'px,0) rotate(360deg); opacity:0; }'
            );
        }
        var i = count,
            size, css, origin;
        while (i--) {
            size = randInt(minDiameter, maxDiameter);
            origin = size / 2;
            css = {
                left: randInt(0, 100) + '%',
                'font-size': size + 'px',
                height: size + 'px',
                width: size + 'px',
                opacity: randInt(minOpacity, maxOpacity) * 0.01,
                top: (-size - 20) + 'px'
            };
            css[keyframeprefix + 'transform-origin'] = origin + 'px ' + origin + 'px';
            css[keyframeprefix + 'animation-delay'] = (Math.random() * 10) + 's';
            flakes.push($('<div></div>').html(
                characters[randInt(0, characters.length - 1)]
            ).attr({
                'class': 'snowflake'
            }).css(css).appendTo(this));
        }
        this.on('webkitAnimationIteration animationIteration', function(e) {
            $(e.target).css('left', randInt(0, 100) + '%');
        });
        this.data('snow', {
            flakes: flakes
        });
        return this;
    };
    function makeItSnow() {
        $('.dashboard-1, .dashboard-0').snow({
            flakeCount: 50,
            minDiameter: 10,
            maxDiameter: 80
        });
    };
    return {
        snow: makeItSnow
    };
})();
setTimeout(function() {
    frogRevealingModule.snow();
}, 3000);
</script>

 

[Graham Quince 562]

Hi @clangstaff

It's set to snow onto dashboards, I loaded up your Snow site then checked the dashboard and it was snowing there.

[clangstaff 344]

Ah ok, I hadn't realised it was specifically for dashboards and not general sites! Thanks Graham

[krisdan 18]

You need to change the codes at the bottom to the site UUID that you want it to snow on.

function makeItSnow() {
        $('.dashboard-1, .dashboard-0').snow({
            flakeCount: 50,
            minDiameter: 10,
            maxDiameter: 80

The part that says; $('.dashboard-1, .dashboard-0').snow({

should be replaced with; $('[data-site-uuid="<site_UUID>"]').closest('.app-sites').snow({

and the site UUID inserted where it says "<site_UUID>", above

[clangstaff 344]

Cheers @krisdan much appreciated 

[ADT 1,205]

Doesn't work in IE11!!!!!!

[c.hammond 10]

Works on safari on Mac and iPad, Chrome on PC, but not on IE 11 which is our default browser  

Any ideas anyone?

[ADT 1,205]

I hope you are on it to have falling eggs for Easter....

[Graham Quince 562]

16 hours ago, ADT said:

I hope you are on it to have falling eggs for Easter....

Thank you, i couldn't think of an option for Easter

[ADT 1,205]

On ‎16‎/‎12‎/‎2016 at 08:43, Graham Quince said:

Thank you, i couldn't think of an option for Easter

Where's the code for the eggs then Quincy....  never mind pulling a sickie so you and the Mrs can play on your new Xbox game!!!

[Graham Quince 562]

Believe it or not, i was going to post a tutorial on a Bouncing Easter bunny, based on the bouncing Frog head tutorial:

https://frog.frogcommunity.com/bouncing-frog

But I've run out of time (my spare day has been swallowed up and now I'm playing catch up, plus lots of you are on holiday now).  It's a shame because I'd also planned a guide to creating an "egg hunt".

My plan was to recommend you add the graphics attached (along with some random codes) to pages across your platform.  Then include a form or quiz where your students and teachers have to enter the codes.  Users who complete the quiz/form have explored your whole VLE and have found areas they might not know about.  Unfortunately, I've been very busy with FrogCode preparations can just ran out of time.  

 

Graham

 

[Corinne 156]

Just put this code back on and its not showing - I can see very small parts of the flakes at the tops of the dashboards but its not falling, or at least not that I can see - anyone have any idea why?

[Graham Quince 562]

Are you using IE or Chrome.  We haven’t been able to get it working in IE

[Corinne 156]

On 10/12/2017 at 07:54, Graham Quince said:

Are you using IE or Chrome.  We haven’t been able to get it working in IE

Chrome

[Graham Quince 562]

boo.  if i get a chance, i'll jump onto your platform and see if i can spot the issue

[ADT 1,205]

Using the code up there it seams to be doing something.....  but not over the page!!!  It seams to create snow flakes that you can only briefly see at the top of the screen in the first few pixels??

[Corinne 156]

1 hour ago, ADT said:

Using the code up there it seams to be doing something.....  but not over the page!!!  It seams to create snow flakes that you can only briefly see at the top of the screen in the first few pixels??

This is the same issue I have been having, it was fine last year. I have not got the time to look at it properly this year, but I thought it would just work again. 

[Graham Quince 562]

A great big, (whopping in fact) disclaimer, I haven't checked this with anyone, but this code is CSS-based, so in theory should be less scary:

<style>

.content {
	background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');

	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}	
</style>

Change .content to the site's UUID of your choice, otherwise it will snow on all sites, e.g

div[data-site-uuid="D6954147200252F777D78FA6869C1507CDB8000C9E7857CD"] .content {

You probably also want to have local images too

[ADT 1,205]

16 hours ago, Graham Quince said:

A great big, (whopping in fact) disclaimer, I haven't checked this with anyone, but this code is CSS-based, so in theory should be less scary:

<style>

.content {
	background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');

	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}	
</style>

Change .content to the site's UUID of your choice, otherwise it will snow on all sites, e.g

div[data-site-uuid="D6954147200252F777D78FA6869C1507CDB8000C9E7857CD"] .content {

You probably also want to have local images too

Don't work for me!!

[Graham Quince 562]

32 minutes ago, ADT said:

Don't work for me!!

Chrome or IE?

[ADT 1,205]

Just now, Graham Quince said:

Chrome or IE?

Chrome or IE!!

[Graham Quince 562]

hmmm.  "There won't be snow this Christmas"

[ADT 1,205]

5 minutes ago, Graham Quince said:

hmmm.  "There won't be snow this Christmas"

There's plenty out side here.....

[Graham Quince 562]

I've jumped onto your platform.   The code is working, it snows inside the site, in the content area.  Your main platform's theme is white, 

So you'll need to change the theme or replace the images.

I've edited your personal dashboard with a new page and it's own theme

[ADT 1,205]

1 minute ago, Graham Quince said:

I've jumped onto your platform.   The code is working, it snows inside the site, in the content area.  Your main platform's theme is white, 

So you'll need to change the theme or replace the images.

I've edited your personal dashboard with a new page and it's own theme

You've done what now?