Jump to content
clangstaff

Snow on platform

By clangstaff, in Coding

Recommended Posts

clangstaff Contributor

clangstaff

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

 

Link to comment
Share on other sites
krisdan Newbie

krisdan

Posted
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
Link to comment
Share on other sites
ADT Mentor

ADT

Posted
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

Link to comment
Share on other sites
Graham Quince Grand Frogger

Graham Quince

Posted
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

 

Link to comment
Share on other sites
Corinne Contributor

Corinne

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

Link to comment
Share on other sites
Graham Quince Grand Frogger

Graham Quince

Posted
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

Link to comment
Share on other sites
ADT Mentor

ADT

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

Link to comment
Share on other sites
ADT Mentor

ADT

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

Link to comment
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...