Hi All,

I’ve just finished my first module which allows the user to have animated backgrounds, done purely with CSS. there are 16 to choose from, and full examples to the animations on my Codepen.

I have done testing, and the module has PLENTY of room for improvements and has been set up for the future so it can be expanded upon, with more in-depth theme settings (taking from MichMich’s snow module, but not used yet).

I struggled a bit to get my head around creating a module, so thanks to @sdetweil for pointing me in the right direction.

This module may not be of use for those with a Mirror, but I am using as a digital display board, so it suits my purpose.

This is my first module, and first Github repository, so always room for improvements.

Tested on:
Raspberry Pi4 2GB, Horizontal.

I can’t guarantee results on anything older or vertical.

NOTE: Some animations may be processer heavy, so if you use, please view the Github readme.

Anyhoo, here’s the Github repo: https://github.com/404ryannotfound/MMM-CSSBackgrounds

@Stoffbeuteluwe, sorry for the issue, do you mean for the whole lot? in MMM-CSSBackgrounds.css ,

html {
  height: 100%;
  background-color:#090a0f;
 /* for images with gradient overlay use: (adjust the gradient ".08" for lighter use lower i.e: 0.3 / or darker go higher i.e: 0.9) */
 /*
  background: radial-gradient(ellipse at bottom, rgba(17, 29, 43, 0.8), rgba(9, 10, 15, 0.8)), url('path_to_your_image');
  background-repeat:no-repeat;
  background-size:cover;
  */
  background: radial-gradient(ellipse at bottom, rgba(17, 29, 43, 1), rgba(9, 10, 15, 1));
  overflow: hidden;
}

put background-color:#090a0f; AFTER overflow: hidden;
and just change to whatever color you want.

I also left css in there in case someone wants to use Images.

@Peter-Leemon

heya,
I just got off the phone from Mulfords, he has a 1200 occut here in perth, will sell a 550 x 320 for $10

looks like they have places in each state: https://www.mulfordplastics.com.au/contact-us/

Worth a call…

@Peter-Leemon
Hey, I just got an online quote from here: https://www.plasticwholesale.com.au/
I’m in Perth, but they have a few other places.

The quote for cut (550mm x 320mm) is $34.72, so a bit cheaper, AND you can get the exact cut you want.\Worth a thought, plus you could probably go in there and test an offcut (or even see if they have offcuts for sale).

I looked on Evilbay for two way tinting, so that’s possibly an option if you just put onto standard cheap perspex.

UPDATE… They have minimum charge for Bulk… DOH… She mentioned to contact Mulford
https://www.mulfordplastics.com.au/

Hey Peter, good find, I’ll go down and look, pretty expensive though for what it is.

If you can peel back the tape to preview, get your Mobile phone, change settings to dark and display something simple like a notepad file.

I’ll try to get down to my local and do the same.

… any updates on this? I was hoping to get rid of my standard avatar ¯_(ツ)_/¯

Hi All,

I’ve just finished my first module which allows the user to have animated backgrounds, done purely with CSS. there are 16 to choose from, and full examples to the animations on my Codepen.

I have done testing, and the module has PLENTY of room for improvements and has been set up for the future so it can be expanded upon, with more in-depth theme settings (taking from MichMich’s snow module, but not used yet).

I struggled a bit to get my head around creating a module, so thanks to @sdetweil for pointing me in the right direction.

This module may not be of use for those with a Mirror, but I am using as a digital display board, so it suits my purpose.

This is my first module, and first Github repository, so always room for improvements.

Tested on:
Raspberry Pi4 2GB, Horizontal.

I can’t guarantee results on anything older or vertical.

NOTE: Some animations may be processer heavy, so if you use, please view the Github readme.

Anyhoo, here’s the Github repo: https://github.com/404ryannotfound/MMM-CSSBackgrounds

@sdetweil oh that’s perfect, thanks so much!

@sdetweil
Thanks Sam, I’ll play around with it tomorrow more, I saw the Dark Sky does similar, so will start reviewing that.
https://github.com/jclarke0000/MMM-DarkSkyForecast/blob/master/MMM-DarkSkyForecast.js

Hopefully I can still pass JS code to target the html like:

body.classList.add(themeSettings.effectPrefix);
html.classList.add(themeSettings.effectPrefix);

Hi All,
I’m totally new to Magic Mirror (as in last week), but I thought I’d attempt to make a module anyhow.
My background is Web & Multimedia, but not a full-on programmer so I’m having issues getting it to work.

I decided to create an Animated CSS background module, which will allow the user to select from a bunch of different themes. These are CSS only, requiring no Javascript or dependencies. I know this is meant to be a Mirror, so perhaps background animations may not show, but I want to use it as a screen. How it works (or is meant to):

User selects a theme
The class is added to the html tags
the .njk template displays code based on what theme is selected

Issues:
Whenever I add the

getDom: function() { }

It breaks

I also don’t think I set up the .njk template if statements correctly. As long as I don’t add the getDom it will load my CSS and display the hello world text (I was using top_center to test the text)…

I’ve read the Documentation, viewed many examples, but can’t figure out why it’s not working.

If anyone has any time to assist, I’d be forever grateful and can add as a contributor.
here’s what I’ve done so far on Github, this is my first real Github repository, so still learning how to use:

https://github.com/404ryannotfound/MMM-CSSBackgrounds

If I can get it working locally, I’ll be able to clean up and refine the CSS. I’m working on the assumption the browser that runs on the Raspberry Pi will be able to render the animations ok, and I’ve toned them back considerably.

Thanks in advance!
Regards,
Ryan