Jump to content
clangstaff

Snow on platform

By clangstaff, in Coding

Recommended Posts

clangstaff    345

clangstaff
Posted

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

 

Share this post

Link to post
Share on other sites

krisdan    18

krisdan
Posted

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

  • Like 2

Share this post

Link to post
Share on other sites

ADT    1,249

ADT
Posted

Doesn't work in IE11!!!!!! :S

Share this post

Link to post
Share on other sites

ADT    1,249

ADT
Posted

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

  • Like 1

Share this post

Link to post
Share on other sites

ADT    1,249

ADT
Posted
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!!! :P

Share this post

Link to post
Share on other sites

Graham Quince    597

Graham Quince
Posted

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

Rabbit-01.png.aa467e2d79db1bd1404e95f8c34cd288.pngEgg-02.png.8bf3b952f4f9a36b1962878c4f51fa00.png

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

 

Share this post

Link to post
Share on other sites

Corinne    156

Corinne
Posted

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?

Share this post

Link to post
Share on other sites

Corinne    156

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

Share this post

Link to post
Share on other sites

ADT    1,249

ADT
Posted

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

Share this post

Link to post
Share on other sites

Corinne    156

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

Share this post

Link to post
Share on other sites

Graham Quince    597

Graham Quince
Posted

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

Share this post

Link to post
Share on other sites

ADT    1,249

ADT
Posted
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!! :$

Share this post

Link to post
Share on other sites

ADT    1,249

ADT
Posted
Just now, Graham Quince said:

Chrome or IE?

Chrome or IE!!

Share this post

Link to post
Share on other sites

ADT    1,249

ADT
Posted
5 minutes ago, Graham Quince said:

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

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

Share this post

Link to post
Share on other sites

Graham Quince    597

Graham Quince
Posted

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

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

Share this post

Link to post
Share on other sites

ADT    1,249

ADT
Posted
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,  xD

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?

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.

×
Go To Topic Listing
×
×
  • Create New...