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);
Related
I am trying to change photos with a fade like animation but they just switch between themselves,
any idea how to fix it or what I am doing wrong? thank you in advance.
CSS:
.slider{
width: 300px;
height: 400px;
background: url("images/flip1.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide 20s ease-in-out;
}
#keyframes slide{
25%{
background: url("images/flip2.png");
background-size: 300px 300px;
background-repeat: no-repeat;
}
50%{
background: url("images/flip3.png");
background-size: 300px 300px;
background-repeat: no-repeat;
}
75%{
background: url("images/flip4.png");
background-size: 300px 300px;
background-repeat: no-repeat;
}
100%{
background: url("images/flip1.png");
background-size: 300px 300px;
background-repeat: no-repeat;
}
}
html:
I think it could help you.
.slide-container {
position: relative;
}
.slide1 {
width: 300px;
height: 400px;
background: red url("images/flip1.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide1 20s ease-in-out;
position: relative;
}
.slide2 {
width: 300px;
height: 400px;
background: blue url("images/flip2.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide2 20s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.slide3 {
width: 300px;
height: 400px;
background: green url("images/flip3.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide3 20s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.slide4 {
width: 300px;
height: 400px;
background: yellow url("images/flip4.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide4 20s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#keyframes slide1 {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
25% {
opacity: 0;
}
95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes slide2 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
25% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes slide3 {
0% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
70% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes slide4 {
0% {
opacity: 0;
}
70% {
opacity: 0;
}
75% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="slide-container">
<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>
<div class="slide4"></div>
</div>
Use prefixes for other browsers
-webkit-animation: 4s linear 0s infinite alternate move_eye;
-moz-animation: 4s linear 0s infinite alternate move_eye;
-o-animation: 4s linear 0s infinite alternate move_eye;
animation: 4s linear 0s infinite alternate move_eye;
https://developer.mozilla.org/ru/docs/Web/CSS/animation
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>
I am trying to add a background animation that will move from right to left and will loop cleanly. So far the animation works from right to left using keyframes but after 30s it stops and starts all over again. It doesn’t look very clean and smooth. Is there any alternative solution for this?
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("/media/background.svg");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 30s;
animation-iteration-count: infinite;
}
#keyframes slide {
0% { background-position: 0 0; }
100% { background-position: -4000px 0; }
}
Change the 50% keyframe to be the 100% keyframe, and set the end background position to -100vw.
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("https://picsum.photos/1200/1200");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}
And the same idea with animation-timing-function: linear:
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("https://picsum.photos/1200/1200");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}
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 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;
}