Jump to content

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


K.Ermit

Recommended Posts

  • K.Ermit changed the title to How do I make my Frog festive?
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

  • 10 months later...

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 changed the title to How do I make my Frog festive? - (now includes Winter, Autumn)
  • 4 weeks later...

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:

seasons.gif

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>

 

glitter.PNG

  • Thanks 1
Link to comment
Share on other sites

  • 4 weeks later...
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

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

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

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

  • 4 months later...

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

  • 3 weeks later...
  • 7 months later...
16 hours ago, gbligh said:

@Graham Quince I've added the lights, but they seem to stretch again giving the site a scroll bar at the bottom. I changed the first line of code too.

Not sure why it's different for you, but for your theme, position:fixed worked better:

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



<style>
    .ui-theme-pageicon1-container {overflow-x: hidden;}
body {	
    background: #000;
    }
    
 .lightrope {
	 text-align: center;
	 white-space: nowrap;
	 overflow: hidden;
     position: fixed;
     top: 157px;
     left: 0px;
     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>

 

I've put it on the student dashboard

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...