Jump to content
K.Ermit

How do I make my Frog festive?

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

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

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

 

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