So I'm new to HTML & CSS and I'm currently doing some research.
I am using this Template and I'm trying to change the background image every 5 seconds.
I already found out, that the background image is defined in the CSS.
#bg:after {
-moz-transform: scale(1.125);
-webkit-transform: scale(1.125);
-ms-transform: scale(1.125);
transform: scale(1.125);
-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
background-image: url("../../images/bg1.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
I would like to have multiple backgrounds that change every few seconds.
How is this possible?
Thanks.
Use this code to change the background color for every 5 seconds.
body {
-webkit-animation-name: bgcolor;
-webkit-animation-duration: 5s;
animation-name: bgcolor;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#-webkit-keyframes bgcolor {
0% {
background: radial-gradient(at 50% -20%, #16113B, #16113B) fixed;
}
14.3% {
background: radial-gradient(at 50% -20%, #9b00a1, #16113B) fixed;
}
28.6% {
background: radial-gradient(at 50% -20%, #0062a1, #16113B) fixed;
}
42.9% {
background: radial-gradient(at 50% -20%, #00a18e, #16113B) fixed;
}
57% {
background: radial-gradient(at 50% -20%, #00a144, #16113B) fixed;
}
71% {
background: radial-gradient(at 50% -20%, #a18200, #16113B) fixed;
}
85.6% {
background: radial-gradient(at 50% -20%, #a10000, #16113B) fixed;
}
100% {
background: radial-gradient(at 50% -20%, #a10000bd, #16113B) fixed;
}
}
#keyframes bgcolor {
0% {
background: radial-gradient(at 50% -20%, #16113B, #16113B) fixed;
}
14.3% {
background: radial-gradient(at 50% -20%, #9b00a1, #16113B) fixed;
}
28.6% {
background: radial-gradient(at 50% -20%, #0062a1, #16113B) fixed;
}
42.9% {
background: radial-gradient(at 50% -20%, #00a18e, #16113B) fixed;
}
57% {
background: radial-gradient(at 50% -20%, #00a144, #16113B) fixed;
}
71% {
background: radial-gradient(at 50% -20%, #a18200, #16113B) fixed;
}
85.6% {
background: radial-gradient(at 50% -20%, #a10000, #16113B) fixed;
}
100% {
background: radial-gradient(at 50% -20%, #a10000bd, #16113B) fixed;
}
}
function run(interval, frames) {
var int = 1;
function func() {
document.body.id = "b"+int;
int++;
if(int === frames) { int = 1; }
}
var swap = window.setInterval(func, interval);
}
run(1000, 10); //milliseconds, frames
#b1 { background: hsl(0, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%); }
#b3 { background: hsl(60, 50%, 50%); }
#b4 { background: hsl(90, 50%, 50%); }
#b5 { background: hsl(120, 50%, 50%); }
#b6 { background: hsl(150, 50%, 50%); }
#b7 { background: hsl(180, 50%, 50%); }
#b8 { background: hsl(210, 50%, 50%); }
#b9 { background: hsl(240, 50%, 50%); }
#b10 { background: hsl(270, 50%, 50%); }
Related
I'm trying to be able to toggle the background color from RGB to a solid color. I am using Change inner HTML to change the background color this is what I have however I'm having trouble getting it to work, I'm not sure what the problem is I have never done change inner HTML so I'm Kind of a beginner at this.
This is what I have so far
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;">
<div id="toggle">
<div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>
</div>
</body>
</html>
And this is what I have for css
.wrapper {
margin:0px;
height: 200%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(
124deg,
#ff2400,
#e81d1d,
#e8b71d,
#e3e81d,
#1de840,
#1ddde8,
#2b1de8,
#dd00f3,
#dd00f3
);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
#-webkit-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
#-moz-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
#-o-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
#keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
This is the javascript that I have so far
let rgb;
function tog(){
if(rgb = <div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>){
toggle.innerHTML = <button onclick="tog()">Toggle</button>;
}else{
toggle.innerHTML = <div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>;
}
}
Suppose the solid color we want is green.So let's create a class called solid-color :
.solid-color{
background: green;
}
Your syntax in JavaScript is wrong
Hope the following code will help you achieve your goal:
let wrapper = document.querySelector('.wrapper');
function tog() {
if (wrapper.classList.contains('solid-color')) {
wrapper.classList.remove('solid-color');
} else {
wrapper.classList.add('solid-color');
}
}
.wrapper {
margin: 0px;
height: 200%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient( 124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
.solid-color {
background: green;
}
#-webkit-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
#-moz-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
#-o-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
#keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
<div id="toggle">
<div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>
</div>
So I am creating a widget for streamlabs, currently I am trying to figure out how to animate the css "background: linear-gradient(#cf8888 -5%, #df4747 100%);" according to the % of the height from this div. The javascript already controls the height of the div according to the "goals" current.
Any suggestions where I should start to animate this BG?
IE example:
<div class="goal-start"></div>
#goal-start{
position: absolute;
background: linear-gradient(#cf8888 -5%, #df4747 100%);
width: 100%;
bottom: 0;
left: 0;
z-index: -1;
CSS
.goal-start{
width:100%;
height:100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab );
background-size: 400% 400%;
-webkit-animation: gradientBG 10s ease infinite;
animation: gradientBG 10s ease infinite;
}
#-webkit-keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
HTML code:
<div class="goal-start"></div>
I have an linear gradient animation for my website and I would like themes, so I am trying to use javascript to change the color's in the css,
I got it to do something but it freezes the animation when I do so.
function changeBackground() {
document.body.style.background = "linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)";
}
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
<a onclick="changeBackground()">Default</a>
<a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.
Change only the background-image not the whole background. Changing the background will override the background-size and will freeze the animation. Better define background-image in the CSS also to avoid other issues.
You can also get rid of the prefix versions and simplify the animation like below:
function changeBackground() {
document.body.style.backgroundImage = "linear-gradient(-45deg, blue,red)";
}
body {
width: 100wh;
height: 90vh;
color: #fff;
background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
}
#keyframes Gradient {
0%,100% {
background-position: left
}
50% {
background-position: right
}
}
<a onclick="changeBackground()">Default</a>
<a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.
You can check this answer to understand the simplification and to have more details in case you need different animations: https://stackoverflow.com/a/51734530/8620333
First, since your "a" tag acting as buttons and not as anchors you should use the button element.
Secondly, make a class with the desired background colors and fire it with the onclick event.
(by the way body width should be on vw and not as you wrote it)
function changeBackground() {
document.body.classList.add('changeBackground');
}
body {
width: 100vw;
height: 90vh;
color: #fff;
background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.changeBackground {
background-image: linear-gradient(-45deg, yellow, blue, red, green);
}
<button onclick="changeBackground()">Default</button>
***Just another approach.
Good Luck!
The Fix
This is because you are overriding the values of your animation. In CSS inline styles have a higher specificity than linked styles, and the background attribute is a shorthand that sets both background-image and background-position. The styles you're applying via JavaScript are setting new values with higher specificty than your animation keyframes. To fix this, set backgroundImage rather than background.
function changeBackground() {
document.body.style.backgroundImage = "linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)";
}
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
<a onclick="changeBackground()">Default</a>
<a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.
An Improved Approach
Better yet - use CSS classes to apply the change in styles rather than through JavaScript and avoid the specificity battle altogether. This how CSS is intended to be used.
Also worth mentioning a <button> is a more appropriate element to use for behavior, as anchors are for sending the user somewhere.
Though, if you're pulling the linear gradient values programmatically this may not be an option.
function setDefault() {
document.querySelector('body').setAttribute('class', '');
};
function clickHandler() {
document.querySelector('body').classList.add('fire');
};
body {
width: 100wh;
height: 90vh;
color: #fff;
background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
.fire {
background-image: linear-gradient(-45deg, #ff0000, #efefef, #ff0000, #efefef);
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
<button onclick="setDefault()" tyle="button">Default</buttopn>
<button onclick="clickHandler()" tyle="button">Fire</buttopn>
I have a animtaion for falling objects inside a div. I tested it in all browsers and its works properly but on IE it doesn't animate at all. I ask for your help, thank you!
It works for both Desktop Size and in Mobile devices, it works on Google Chrome, Mozilla, Edge, Safarri, Opera except on IE
here is my SCSS code:
.falling__Object span {
display: inline-block;
z-index: 10000;
-webkit-animation: falling__Object 10s infinite linear;
-moz-animation: falling__Object 10s infinite linear;
&.leaves {
width: 5vw;
background: url(../img/section-countdown/leaf.png);
background-repeat: no-repeat;
background-size: 75%;
/* margin: -280px 84px 54px -34px;
#media screen and (min-width: 320px) and (max-width:500px) {
width: 5vwvw;
}*/
}
&.snow {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/snow.gif");
background-size: 70%;
background-repeat: no-repeat;
}
&.green-leaf {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/green-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
&.spring {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/spring-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
}
.falling__Object span:nth-child(1n+5) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
}
.falling__Object span:nth-child(3n+2) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}
.falling__Object span:nth-child(2n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
}
.falling__Object span:nth-child(3n+10) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
}
.falling__Object span:nth-child(7n+2) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
}
.falling__Object span:nth-child(4n+5) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
}
.falling__Object span:nth-child(3n+7) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
}
#-webkit-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
#-moz-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
and here is the script:
function getSeason() {
var currentMonth = new Date().getMonth() + 1;
if (currentMonth === 12 || currentMonth === 1 || currentMonth === 2) {
$(".falling__Object span").addClass("snow");
} else if (currentMonth >= 3 && currentMonth <= 5) {
$(".falling__Object span").addClass("spring");
} else if (currentMonth >= 6 && currentMonth <= 8) {
$(".falling__Object span").addClass("green-leaf");
} else if (currentMonth >= 9 && currentMonth <= 11) {
$(".falling__Object span").addClass("leaves");
}
return ""
}
Use the css properties compatible with ie11 (the un-prefixed) for animation, transform & keyframes
.falling__Object span {
display: inline-block;
z-index: 10000;
-webkit-animation: falling__Object 10s infinite linear;
-moz-animation: falling__Object 10s infinite linear;
animation: falling__Object 10s infinite linear;
&.leaves {
width: 5vw;
background: url(../img/section-countdown/leaf.png);
background-repeat: no-repeat;
background-size: 75%;
/* margin: -280px 84px 54px -34px;
#media screen and (min-width: 320px) and (max-width:500px) {
width: 5vwvw;
}*/
}
&.snow {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/snow.gif");
background-size: 70%;
background-repeat: no-repeat;
}
&.green-leaf {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/green-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
&.spring {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/spring-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
}
.falling__Object span:nth-child(1n+5) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.falling__Object span:nth-child(3n+2) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.falling__Object span:nth-child(2n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.falling__Object span:nth-child(3n+10) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
animation-delay: 2.7s;
}
.falling__Object span:nth-child(7n+2) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}
.falling__Object span:nth-child(4n+5) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
animation-delay: 5.5s;
}
.falling__Object span:nth-child(3n+7) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
animation-delay: 8s;
}
#-webkit-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
transform: translate(150px, 800px) rotateZ(360deg);
}
}
#-moz-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
transform: translate(150px, 800px) rotateZ(360deg);
}
}
#keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
transform: translate(150px, 800px) rotateZ(360deg);
}
}
I have got the scrolling clouds but I need a dawn/dusk and day/night cycle by detecting the system clock. I'm not sure how to detect system time with html or css.
I tried transitions with a delay but its not working.
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
#clouds {
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
width: 200px;
height: 60px;
background-color: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}
.x1 {
left: -250px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
-webkit-animation: moveclouds 120s linear infinite;
-moz-animation: moveclouds 120s linear infinite;
-o-animation: moveclouds 120s linear infinite;
}
.x2 {
right: 70px;
top: -100px;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7;
-webkit-animation: moveclouds 140s linear infinite;
-moz-animation: moveclouds 140s linear infinite;
-o-animation: moveclouds 140s linear infinite;
}
.x3 {
left: -550px;
top: -200px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
opacity: 0.8;
-webkit-animation: moveclouds 150s linear infinite;
-moz-animation: moveclouds 150s linear infinite;
-o-animation: moveclouds 150s linear infinite;
}
.x4 {
left: 400px;
top: -250px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.75;
-webkit-animation: moveclouds 100s linear infinite;
-moz-animation: moveclouds 100s linear infinite;
-o-animation: moveclouds 100s linear infinite;
}
.x5 {
left: -750px;
top: -250px;
-webkit-transform: scale(0.47);
-moz-transform: scale(0.47);
transform: scale(0.47);
opacity: 0.8;
-webkit-animation: moveclouds 110s linear infinite;
-moz-animation: moveclouds 110s linear infinite;
-o-animation: moveclouds 110s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
What I'm trying to achieve:
At 5.30PM (as on local system): transition from #c9dbe9 to #E0DE3F
At 6.30PM : transition from #E0DE3F to #323232
At 5.30AM : transition from #323232 to #E0DE3F
At 7.00AM : transition from #E0DE3F to #c9dbe9
Please check out the demo above, a similar demo would be greatly appreciated, a single transition detecting the system time would be enough, I'll take care of the rest.
Also, is it possible to loop the cloud animation again before all the clouds have floated past the screen? There's a gap where the animation waits till all the clouds have floated past the screen, before starting up again.
Try this
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
var time=h+':'+m
if(h == 17){
if(m > 30){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
}
else if(h > 17){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
else if(h == 18){
if(m > 30 ){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #323232 0%, #fff 100%)'
})
}
}
else if(h > 18){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #323232 0%, #fff 100%)'
})
}
else if(h == 5){
if(m >= 30){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
}
else if(h > 5 && h < 17){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
else if(h == 6){
if(m >= 30){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%)'
})
}
}
else if(h >6 && h < 17){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%)'
})
}
*{ margin: 0; padding: 0;}
body {
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
width: 200px; height: 60px;
background-color: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.x1 {
left: -250px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
-webkit-animation: moveclouds 120s linear infinite;
-moz-animation: moveclouds 120s linear infinite;
-o-animation: moveclouds 120s linear infinite;
}
.x2 {
right:70px; top:-100px;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7;
-webkit-animation: moveclouds 140s linear infinite;
-moz-animation: moveclouds 140s linear infinite;
-o-animation: moveclouds 140s linear infinite;
}
.x3 {
left: -550px; top: -200px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
opacity: 0.8;
-webkit-animation: moveclouds 150s linear infinite;
-moz-animation: moveclouds 150s linear infinite;
-o-animation: moveclouds 150s linear infinite;
}
.x4 {
left: 400px; top: -250px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.75;
-webkit-animation: moveclouds 100s linear infinite;
-moz-animation: moveclouds 100s linear infinite;
-o-animation: moveclouds 100s linear infinite;
}
.x5 {
left: -750px; top: -250px;
-webkit-transform: scale(0.47);
-moz-transform: scale(0.47);
transform: scale(0.47);
opacity: 0.8;
-webkit-animation: moveclouds 110s linear infinite;
-moz-animation: moveclouds 110s linear infinite;
-o-animation: moveclouds 110s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
You can set a standard CSS animation, and then sync it with the clock using animation delay.
The delay that you need to set is equal, in negative, to the amount of time that has elapsed.
Since showing this on a day basis is quite boring, I have set an example that cycles in one minute, so it is using the seconds. To show that it is accurate, I am showing also the current second on the demo
window.onload = function () {
var date = new Date();
var sec = - date.getSeconds();
var ele = document.getElementById ("test");
ele.style.animationDelay = sec + 's';
setInterval ( function () {
var date = new Date();
var ele = document.getElementById ("time");
ele.innerText = date.getSeconds();
}, 1000);
}
#test {
background: radial-gradient(circle at 4% 4%, yellow 30px, transparent 25px),
radial-gradient(circle at 4% 92%, white 30px, transparent 25px),
linear-gradient(to top, black 0%, gray 20%, orange 40%, orange 60%, lightblue 80%, blue 100%);
background-size: 2000% 2000%;
background-repeat: no-repeat;
background-position: 0% 0%;
height: 200px;
width: 300px;
animation: anim 30s infinite alternate;
}
#keyframes anim {
0% {background-position: 0% 100%;}
100% {background-position: 0% 0%;}
}
#time {
width: 200px;
height: 100px;
left: 400px;
position: absolute;
top: 0px;
font-size: 60px;
}
<div id="test"></div>
<div id="time"></div>
The second 0 is midnight, and the second 30 is noon.
And there is the sun and the moon, too ...