MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Animated rainbow color gradient for the default clock module

    Scheduled Pinned Locked Moved Showcase
    6 Posts 2 Posters 4.9k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G Offline
      ganget
      last edited by

      I wanted to introduce some more color to my MagicMirror so i made a animated rainbow color gradient which i used to spice up my default clock module. Here is a gif with the result:
      0_1549222544023_Animated rainbow color gradient.gif
      The code

      .clock-time-only-color {
      	background-image: linear-gradient(to left, #ff0000,#ff4000,#ff8000,#ffbf00,#ffff00,#bfff00,#80ff00,#40ff00,#00ff00,#00ff40,#00ff80,#00ffbf,#00ffff,#00bfff,#0080ff,#0040ff,#0000ff,#4000ff,#8000ff,#bf00ff,#ff00ff,#ff00bf,#ff0080,#ff0040,#ff0000);
      	-webkit-background-clip:  text;
      	-webkit-animation: animate 60s linear infinite;
      	background-size: 1000%;
      	color: transparent;
      	
      }
      @-webkit-keyframes animate{
      	0%	{background-position: 0% 500%;}
      	100%	{background-position: 500% 1000%;}
      

      If somebody has any idea of improving the image quality for the animation i’m really interested!

      1 Reply Last reply Reply Quote 2
      • S Offline
        Smotx
        last edited by

        hi,

        in custom.css ?

        G 1 Reply Last reply Reply Quote 0
        • G Offline
          ganget @Smotx
          last edited by

          @Smotx Jup in custom.css.
          ps. I have two clock modules, one with time only and the other with date only ;)

          1 Reply Last reply Reply Quote 0
          • S Offline
            Smotx
            last edited by

            I have set on custom.css but no result on MM :(.

            body {
            	margin: 5px;
               height: calc(100% - 10px);
               width: calc(100% - 10px);
               background: #000;
               color: #FA72A8;
            }
            .dimmed {
             color: #BCDDFF;
            }
            .normal {
             color: #D4FDED;
            }
            .clock .time {
               font-size: 98px;
            }
            .clock .seconds {
               color: #985F8E;
            }
            .clock .date {
               color: #F0C8DA;
            }
            .clock-time-only-color {
               background-image: linear-gradient(to left, #ff0000,#ff4000,#ff8000,#ffbf00,#ffff00,#bfff00,#80ff00,#40ff00,#00ff00,#00ff40,#00ff80,#00ffbf,#00ffff,#00bfff,#0080ff,#0040ff,#0000ff,#4000ff,#8000ff,#bf00ff,#ff00ff,#ff00bf,#ff0080,#ff0040,#ff0000);
               -webkit-background-clip:  text;
               -webkit-animation: animate 60s linear infinite;
               background-size: 1000%;
               color: transparent;
               
            }
            @-webkit-keyframes animate {
               0%	{background-position: 0% 500%;}
               100%	{background-position: 500% 1000%;}
            }
            .region.upper.third {
             top: 38%;
            }
            
            .region.middle.center {
             top: 48%;
            }
            
            .region.lower.third {
             top: 60%;
            }
            
            1 Reply Last reply Reply Quote 0
            • G Offline
              ganget
              last edited by

              @Smotx
              This line below in your custom.css has to match the module class in your config.js

              .clock-time-only-color
              

              My 2e clock mudule inside config.js looks like

              {
               module: "clock",
                position: "top_center",
                classes: "clock-time-only",  //this line
                  config: {
                  timeFormat: 24,
                  showPeriod: true,
                  displaySeconds: false
                  }
              

              If you have any more questions let me know :winking_face:

              S 1 Reply Last reply Reply Quote 0
              • S Offline
                Smotx @ganget
                last edited by

                @ganget said in Animated rainbow color gradient for the default clock module:

                {
                module: “clock”,
                position: “top_center”,
                classes: “clock-time-only”, //this line
                config: {
                timeFormat: 24,
                showPeriod: true,
                displaySeconds: false
                }

                Ok but it’s not ok on mine :(.

                {
                			module: "updatenotification",
                			position: "top_bar"
                		},
                		{
                			module: "clock",
                			position: "top_left",
                			classes: "clock-time-only"
                		},
                
                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy