Background animation looping smoothly

Background animation looping smoothly - javascript

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;
}
}

Related

CSS animation, just changes images with no animation

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

How should I go about animating a background gradient according to a value?

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>

How can I create fullscreen crossfading slideshow on background without white flicker?

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);

HTML5 Endless Background Animation

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;
}

Zoom when clicking on photo

On http://themes.getbootstrap.com/products/application I can click on a photo to zoom/enlarge the photo.
How can I obtain this functionality? I know the theme is meant to be bought but I don't want to buy it for just this feature.
I guess it's quite but maybe there already exists libraries to obtain this feature.

Theme use Zoom.js, you need to include the script and set data-action="zoom" at your image

You don't need javascript you can do this with CSS3 transitions.
See snippet
* {
margin: 0;
padding: 0;
}
.pic-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow:hidden;
}
figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
/*animation*/
animation: slideShow 24s linear infinite 0s;
-o-animation: slideShow 24s linear infinite 0s;
-moz-animation: slideShow 24s linear infinite 0s;
-webkit-animation: slideShow 24s linear infinite 0s;
}
.pic-1 {
opacity: 1;
z-index:-1;
background: url(http://www.rachelgallen.com/images/daisies.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-2 {
animation-delay: 6s;
-o-animation-delay: 6s;
-moz-animation-delay: 6s;
-webkit-animation-delay: 6s;
background: url(http://www.hdwallpapersllc.com/wp-content/uploads/2015/08/Beautiful-Wallpapers.jpg) no-repeat center center;
-webkit-background-size: cover; -moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-3 {
animation-delay: 12s;
-o-animation-delay: 12s;
-moz-animation-delay: 12s;
-webkit-animation-delay: 12s;
background: url(http://www.hdwallpaperbackgrounds.org/photo/1362384578166_[hdwallpaperbackgrounds.org].jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-4 {
animation-delay: 18s;
-o-animation-delay: 18s;
-moz-animation-delay: 18s;
-webkit-animation-delay: 18s;
background: url(https://www.colourbox.com/preview/3210731-spring-beautiful-red-tulip-flowers-nature-background.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* keyframes*/
#keyframes slideShow {
0% {
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
transform:scale(1.1);
-ms-transform:scale(1.1);
}
100% {
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
}
#-o-keyframes slideShow {
0% {
opacity: 0;
-o-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
-o-transform:scale(1.1);
}
100% {
opacity: 0;
-o-transform:scale(1);
}
}
#-moz-keyframes slideShow {
0% {
opacity: 0;
-moz-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
-moz-transform:scale(1.1);
}
100% {
opacity: 0;
-moz-transform:scale(1);
}
}
#-webkit-keyframes slideShow {
0% {
opacity: 0;
-webkit-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
-webkit-transform:scale(1.1);
}
100% {
opacity: 0;
-webkit-transform:scale(1);
}
}
<div class="pic-wrapper">
<figure class="pic-1"></figure>
<figure class="pic-2"></figure>
<figure class="pic-3"></figure>
<figure class="pic-4"></figure>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Background animation looping smoothly - javascript

Related

CSS animation, just changes images with no animation

How should I go about animating a background gradient according to a value?

How can I create fullscreen crossfading slideshow on background without white flicker?

HTML5 Endless Background Animation

Zoom when clicking on photo

Categories

Resources