Jump to content
K.Ermit

How do I make my Frog festive? - (now includes Winter, Autumn)

Recommended Posts

Seasons Greetings!  We certainly can help you decorate your Frog.  Although you will need the HTML widget.  Click here to find out more about that.

Falling Snow

To add animated snow to your school dashboards, copy this code and paste it into an HTML widget on your first dashboard:

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

 

Christmas Lights

To add flickering lights across your FrogBar, we can thank @Sean_M and @pconkie :

<style>
    .ui-theme-basicnavigation-wrapmain {overflow-x: hidden;}
body {	
    background: #000;
    }
    
 .lightrope {
	 text-align: center;
	 white-space: nowrap;
	 overflow: hidden;
     position: absolute;
     top: -65px;
     left: -660px;
	 z-index: 1;
	 margin: 0 0 0 0;
	 padding: 0;
	 pointer-events: none;
	 width: auto;
}
 .lightrope li {
	 position: relative;
	 animation-fill-mode: both;
	 animation-iteration-count: infinite;
	 list-style: none;
	 margin: 0;
	 padding: 0;
	 display: block;
	 width: 12px;
	 height: 28px;
	 border-radius: 50%;
	 margin: 20px;
	 display: inline-block;
	 background: rgba(12, 236, 65, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(12, 236, 65, 1);
	 animation-name: flash-1;
	 animation-duration: 2s;
}
 .lightrope li:nth-child(2n+1) {
	 background: rgba(255, 236, 122, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 122, 0.5);
	 animation-name: flash-2;
	 animation-duration: 0.4s;
}
 .lightrope li:nth-child(4n+2) {
	 background: rgba(220, 0, 77, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(220, 0, 77, 1);
	 animation-name: flash-3;
	 animation-duration: 1.1s;
}
 .lightrope li:nth-child(odd) {
	 animation-duration: 1.8s;
}
 .lightrope li:nth-child(3n+1) {
	 animation-duration: 1.4s;
}
 .lightrope li:before {
	 content: "";
	 position: absolute;
	 background: #222;
	 width: 10px;
	 height: 9.3333333333px;
	 border-radius: 3px;
	 top: -4.6666666667px;
	 left: 1px;
}
 .lightrope li:after {
	 content: "";
	 top: -14px;
	 left: 9px;
	 position: absolute;
	 width: 52px;
	 height: 18.6666666667px;
	 border-bottom: solid #222 2px;
	 border-radius: 50%;
}
 .lightrope li:last-child:after {
	 content: none;
}
 .lightrope li:first-child {
	 margin-left: -40px;
}
 @keyframes flash-1 {
	 0%, 100% {
		 background: rgba(12, 236, 65, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(12, 236, 65, 1);
	}
	 50% {
		 background: rgba(12, 236, 65, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(12, 236, 65, 0.2);
	}
}
 @keyframes flash-2 {
	 0%, 100% {
		 background: rgba(255, 236, 122, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 122, 1);
	}
	 50% {
		 background: rgba(255, 236, 122, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 122, 0.2);
	}
}
 @keyframes flash-3 {
	 0%, 100% {
		 background: rgba(220, 0, 77, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(220, 0, 77, 1);
	}
	 50% {
		 background: rgba(220, 0, 77, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(220, 0, 77, 0.2);
	}
}
 
</style>

<ul class="lightrope">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

 

xmas intranet.png

Edited by Graham Quince
Updated with Sean's latest code
Link to comment
Share on other sites

Graham Quince
This post was recognized by Graham Quince!

Sean_M was awarded the badge 'Superstar' and 3 points.

I've made some improvements to the code as there were some inconsistencies with parts, like colours. Plus I've added more lights to cover larger screens and made it so a horizontal scrollbar doesn't appear when the content goes off the page

@Graham Quince - for info

 

Edited by Graham Quince
Moved the code to the top post to avoid confusion
  • Thanks 1
Link to comment
Share on other sites

Just in time for autumn, I've adapted @Sean_M's code for falling leaves:

<script>

var widthArray = [],
    sA = [10,11,12],
    timeArray = [2,4,6,8,10,12,14],
    sizeArray = [20,30,40],
    coloursArray = ['#B31218','#FFB900','#A29A0F','#E28204','#D83708'],
    leafArray = ['&#127809;', '&#127810;', '<i class="fa fa-pagelines"></i>','<i class="fa fa-leaf"></i>'];

function randomise(arraytoUse) {
    return arraytoUse[Math.floor(Math.random() * arraytoUse.length)];
}
for (var i = 0; i < $(window).innerWidth(); i++) {
    widthArray.push(i)
};
for (var i = 0; i < 15; i++) {
    $('<div class="leaf" style="position: fixed; color: '+randomise(coloursArray)+'; top: -20px; left: '+randomise(widthArray)+'px; font-size: '+randomise(sizeArray)+'px;">'+randomise(leafArray)+'</div>').appendTo(
        this.element.closest('.app-sites')
    )
};

$('.leaf').each(function(){
    var el = $(this)
    setTimeout(function(){
        el.animate({'top' : '100%'}, randomise(sA) * 1000, function(){
            $(this).css('top', -20);
            setInterval(function(){
                el.animate({'top' : '100%'}, randomise(sA) * 1000, function(){
                    $(this).css('top', -20);
                })}, randomise(timeArray) * 1000);
        })
    }, randomise(timeArray) * 1000);
});

</script>

 

Link to comment
Share on other sites

Flying Santa

 

If anyone would like a Flying Santa for the Dashboards, then I found and adjusted the code below.

To use, you'll need to upload a gif to somewhere on the same site, I prefer to use a Text widget for this, as you can right-click on the image and get the URL.  Once you've copied the URL, you can hide the widget and add it to the code, like so:

  • background: url('WEB_ADDRESS_OF_SANTA_GIF');
    becomes: 
  • background: url('/app/file/asset/A273372C200303B6297B8F7901942B050783045C6F3B715C');

flying santa.PNG

 

 

<!-- 
GIF from https://www.animatedimages.org/cat-santa-claus-359.htm
-->

<style>
    .ui-theme-basicnavigation-wrapmain {
        overflow-x: hidden;
    }
    .santa {
        background: url('WEB_ADDRESS_OF_SANTA_GIF');
        animation-name: sleigh;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        width: 350px;
        height: 120px;
        position: fixed;
        z-index: 1;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    }

    /* The animation code */
    @keyframes sleigh {
        0% {
            left: -550px;
            top: 0px;
        }
        33% {
            top: 500px;
        }  
        66% {
            top: 100px;
        }
        100% {
            left: calc(100vw + 350px);
            top: 0px;
        }
    }

</style>
<div class="santa"></div>

I used this GIF: https://www.animatedimages.org/cat-santa-claus-359.htm

 

Feedback from the team though was this was particularly distracting, if you alter the line to change the value of 10vw, you can increase the distance Santa flies so he is off screen longer.

left: calc(100vw + 350px);

 

 

 

 

Link to comment
Share on other sites

Glitter Text

A less distracting option for the festive season is:

glitter.PNG

Hard to depict in a screenshot, but the white dots twinkle / sparkle.

To change the message, simply adapt the line:

<h1 class="christmas">Seasons Greetings!</h1>

 

Here's the full code:

<style>
@import url(https://fonts.googleapis.com/css?family=Mountains+of+Christmas:700);
    
.christmas-blue {
    color: #035ee2;
	background: -webkit-linear-gradient(transparent, transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/blue_glitter.gif) repeat;
	background: -o-linear-gradient(transparent, transparent) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	margin: 0;
	padding: 0;

	font-weight: 900;
	width: 100%;
	text-align: center;
	letter-spacing: 1px;
	z-index: 999999;
	-webkit-background-clip: text;
}

.christmas-gold {
	color: #D81E1E;
    color: gold;
	background: -webkit-linear-gradient(transparent, transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/gold_glitter.gif) repeat;
	background: -o-linear-gradient(transparent, transparent) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	margin: 0;
	padding: 0;

	font-weight: 900;
	width: 100%;
	text-align: center;
	letter-spacing: 1px;
	z-index: 999999;
	-webkit-background-clip: text;
}



.christmas {
    font-size: 100px;
    line-height: 100px;
    text-align: center;
    color: #000000;
	font-family: 'Mountains of Christmas', cursive;
}
</style>

<h1 class="christmas">Seasons Greetings!</h1>


<script>
var christmasText = arguments[0].find('.christmas');
function glitterLetters() {
    christmasArray = christmasText.text().split('');
    christmasText.empty();
    for (var i = 0; i < christmasArray.length; i++) {
        christmasText.append(
            '<span class="christmas-' + (i % 2 == 0 ? 'gold' : 'blue') + '">' + christmasArray[i] + '</span>'
        )
    }
}
glitterLetters();

</script>

 

  • Thanks 1
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.



×
×
  • Create New...