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>
Related
I have an HTML box, where a gradient background color animates. Gradient background includes 3 colors now. But I want to include all available colors.
How can we do that?
This is how I am doing right now.
background: linear-gradient(57deg, #fdd266, #c33c7a, #595ba8);
background-size: 600% 600%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
height: 140px;
border-bottom: none;
Can you try as below
.box {
position: absolute;
left: 50%;
top: 50%;
background: linear-gradient(-45deg, #fdd266, #c33c7a, #595ba8);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 9rem;
width:9rem;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<div class="box">
here is your box
</div>
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'm creating a crossfade fullscreen slideshow on my webpage with HTML and CSS, however it's not working well.
I could create crossfading on background images, but there is a problem.
In first loading, there are white flickers between each images.
I don't want to avoid white flickers.
How can I fix them?
I've wrote with HTML and CSS to create a crossfade slideshow.
<body>
<div class="slideshow">
</div>
</body>
body {
margin: 0;
padding: 0;
}
.slideshow {
height: 100vh;
weight: 100%;
background-image: url('../images/1.jpg');
background-size: cover;
animation: slide 24s infinite;
}
#keyframes slide {
25% {
background-image: url('../images/2.jpg');
background-size: cover;
}
50% {
background-image: url('../images/3.jpg');
background-size: cover;
}
75% {
background-image: url('../images/4.jpg');
background-size: cover;
}
}
I don't need white flickers and apply a beautiful crossfade slideshow.
Flickers happen because the browser paints a new image, probably.
Try creating individual <div>s for each slide, position them absolute, and simply fade each of them away.
<body>
<div class="slideshow">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
<div class="slide slide-4"></div>
</div>
</body>
.slideshow {
position: relative;
width: 100vw; height: 100vh;
}
.slide {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0; /* makes it full size */
opacity: 0;
transition: opacity 1s;
background-size: cover;
background-position: center;
}
.slide.active {
opacity: 1;
}
With CSS only:
#keyframes slide-1 {
0% , 40% , 100% { opacity: 0; }
20% { opacity: 1; }
}
#keyframes slide-2 {
0% , 20% , 60% , 100% { opacity: 0; }
40% { opacity: 1; }
}
#keyframes slide-3 {
0% , 40% , 80% , 100% { opacity: 0; }
60% { opacity: 1; }
}
#keyframes slide-4 {
0% , 60% , 100% { opacity: 0; }
80% { opacity: 1; }
}
.slide-1 { animation: slide-1 24s infinite; background-image: url('../images/1.jpg'); }
.slide-2 { animation: slide-2 24s infinite; background-image: url('../images/2.jpg'); }
.slide-3 { animation: slide-3 24s infinite; background-image: url('../images/3.jpg'); }
.slide-4 { animation: slide-4 24s infinite; background-image: url('../images/4.jpg'); }
Or with JS:
setInterval(function(){
var current = document.querySelector('.slide.active');
if (current.nextElementSibling) {
current.nextElementSibling.classList.add('active');
} else {
current.parentElement.firstElementChild.classList.add('active');
};
current.classList.remove('active');
}, 6000);
I have a background image for animation.
How can i do endless animation ?
(If animation goes right side of page , i want to see it in appear in left side of page)
The original code from David Walsh - CSS Background Animations
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 560px;
height: 400px;
background-image: url(https://davidwalsh.name/demo/bg-clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
<div id="animate-area"></div>
I posted this because you said left to right.
You can use something like this.
#horizontal-scroll {
width: 1439px;
height: 1170px;
background: black url(https://assets.periscope.tv/images/map.svg);
-webkit-animation: backgroundScroll 50s linear infinite;
animation: backgroundScroll 50s linear infinite;
}
#-webkit-keyframes backgroundScroll {
from {
background-position: -1439px 0;
}
to {
background-position: 0 0;
}
}
#keyframes backgroundScroll {
from {
background-position: -1439px 0;
}
to {
background-position: 0 0;
}
}
<div id="horizontal-scroll"></div>
#keyframes customname
{
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
classname
{
background-image: url(Url of tyour file);
width: width of the file;
height: Height of the file;
background-position: 0px 0px;
background-repeat: repeat-x; //Repeating through X axis only
animation: customname 40s linear infinite;
}