Jump to content
K.Ermit

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

By K.Ermit, in Common Questions

Recommended Posts

Recommended

Posted by Graham Quince,

We certainly can help you decorate your Frog.  Although you will need the HTML widget.  Click here to find out more about that. Festive Options (All the items here link to posts in this thread) Falling Snow and Christmas Lights (this post) Falling Snow with a slight outline (good for sites with white backgrounds) Flying Santa Glitter / Sparkling text Falling leaves Jubilee Bunting     Falling Snow To add animated snow t

We've added Jubilee bunting to the festive Frog ideas

Recommended by Graham Quince

0 reactions

Go to this post
  • Featured Comment
Graham Quince Grand Frogger

Graham Quince

Posted
  • Featured Comment
Posted

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

Festive Options

(All the items here link to posts in this thread)

 

 

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

Link to comment
Share on other sites
Sean_M Contributor

Sean_M

Posted
Posted (edited)
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
Graham Quince Grand Frogger

Graham Quince

Posted
Posted

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
Graham Quince Grand Frogger

Graham Quince

Posted
Posted

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
Graham Quince Grand Frogger

Graham Quince

Posted
Posted

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
Graham Quince Grand Frogger

Graham Quince

Posted
Posted
16 hours ago, gbligh said:

Is there a way to get the lights to stop automatically based on the width of the screen? The current code makes the lights go off the page which means you then get a scroll bar at the bottom of the platform @Graham Quince

Hi @gbligh

You need to change the theme name on the top line.  

change: 

.ui-theme-basicnavigation-wrapmain {overflow-x: hidden;}

to this: 

.ui-theme-pageicon1-wrapmain {overflow-x: hidden;}

 

Link to comment
Share on other sites
gbligh Community Regular

gbligh

Posted
Posted
4 minutes ago, Graham Quince said:

Hi @gbligh

You need to change the theme name on the top line.  

change: 

.ui-theme-basicnavigation-wrapmain {overflow-x: hidden;}

to this: 

.ui-theme-pageicon1-wrapmain {overflow-x: hidden;}

 

Just gave this a go and it's still giving me more than I need

Link to comment
Share on other sites
Graham Quince Grand Frogger

Graham Quince

Posted
Posted

Falling snow with outline

On 16/12/2021 at 09:03, ann said:

As our dashboard has a lot of white the snow flakes disappear. So I was looking to see if we could put in some that had a shadow or darker outline but I cannot see where the flakes are defined in the code. Can you help please @Graham Quince

Hi @ann

Try this variation: 

<script>
/* snow flakes */
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="text-shadow: 2px 2px black; 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>

I've added a text-shadow to each snow flake: 

text-shadow: 2px 2px black;

 

Link to comment
Share on other sites
ADT Mentor

ADT

Posted
Posted
On 13/12/2021 at 13:28, Graham Quince said:

Just had a quick look on your platform and I couldn't spot the code.  Have you removed it?

Its not often @gbligh has a point ?....  but he's right it does seam stretch past the page edge...  even with your extra bit of code! 

 

image.png

Link to comment
Share on other sites
Graham Quince Grand Frogger

Graham Quince

Posted
Posted

Great idea @Sue Busher 

I've taken a crack at this, based on @Sean_M's christmas lights

JUBILEE BUNTING

 

 

bunting.PNG

https://concept-demo.frogos.net/bunting

The hardest bit was getting an image - in the end I made this one myself by cropping a royalty-free image:

pennant.png

  

<style>
    .ui-theme-basicnavigation-wrapmain {overflow-x: hidden;}
body {	
    background: #000;
    }

 .bunting {
	 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;
}
 .bunting li {
	 position: relative;
	 list-style: none;
	 margin: 0;
	 padding: 0;
	 display: block;
	 width: 59px;
	 height: 75px;
	 margin: 20px;
	 display: inline-block;
	 background-image: url('IMAGE_FILE_URL_GOES_HERE');
}

 .bunting li:after {
	 content: "";
	 top: -12px;
	 left: 54px;
	 position: absolute;
	 width: 52px;
	 height: 18.6666666667px;
	 border-bottom: solid #222 2px;
	 border-radius: 50%;
}
 .bunting li:last-child:after {
	 content: none;
}
 .bunting li:first-child {
	 margin-left: -40px;
}

</style>

<ul class="bunting">
  <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>

 

Things to Note:

  • This code is set to work on the default clouds theme.  Just swap in the theme class at the top to prevent scrollbars
  • Upload the pennant.png file to a text widget (easiest way to get the URL) and replace the placeholder code in the section .bunting li section background-image: url()

 

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

×
Go to topic listing
×
×
  • Create New...