Jump to content
Karaethon

script to fade bg color on page

Recommended Posts

In general if I know how to do something I want to do I can code it in a language I'm less than fluent in, if I am fluent in a language I can figure out how to code something I want to do but don't know very well how to do it, but this time I have almost no clue how to do what I want to do and very limited fluency in JS. 

I want a script that will slowly fade from one color (red, green, blue, white, black) to a neutral color (grey) and then fade into one of the randomly selected other 4 colors. Then repeat. Forever. So like Rd>gy>wt>bu>gy>bk etc.

I have no clue what to do, if you can help I will be grateful for all time.

 

Oh, and I need to make sure the text color is always contrasting so it can be read, so I need to adjust that too?

Edited by Karaethon
Addendum

Share this post


Link to post
Share on other sites

Example

<style type='text/css'>
    body {
        width: 100%;
        height: 100%;
        background-color: #eee;
        animation: bgfade 15s infinite;
    }
    @keyframes bgfade {
        0%, 100% {
            background-color: red;
            color: white;
        }
        20% {
            background-color: gray;
            color: black;
        }
        40% {
            background-color: blue;
            color: white;
        }
        60% {
            background-color: white;
            color: black;
        }
        80% {
            background-color: green;
            color: white;
        }
    }
</style>

 

Share this post


Link to post
Share on other sites

Thank you for your help. I ended up with this (which is a lot like what I just noticed you posted) I was able to drop the shifts to grey that I thought I would need for good color blending but didn't need after testing.

	    body {
  width: 100%;
  height: 100%;
  animation: pulse 60s infinite;
    overflow-y:auto;
}
	@keyframes pulse {
  0% {
    background-color: #ffffff;
  }
    10%{
        color: #ff0000;
    }
    20%{
        background-color: #0000ff;
    }
    30%{
        color: #00ff00;
    }
    40%{
        background-color: #000000;
    }
    50%{
        color: #ffffff;
    }
    60%{
        background-color: #ff0000;
    }
    70%{
        color: #0000ff;
    }
    80%{
        background-color: #00ff00;
    }
    90%{
        color: #000000;
    }
    100% {
    background-color: #ffffff;
  }
}
	
Edited by Karaethon
Typos

Share this post


Link to post
Share on other sites

I really like this keyframes animation stuff, I even came up with, and coded, a heartbeat for my image on my page, is there a way to put in a delay between intervals so i can change the heart rate without having to adjust the percentages every time i adjust the cycle length?

Share this post


Link to post
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.   Restore formatting

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

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.