I'm trying to create a background image which changes every few seconds with an animation so the next image slides in from the right at the same time as the other image slides out.
Currently I have a code without animation; it works fine, however the images take ages to load. Is this just because my image files are too large? Is there a way to make them load faster?
My current code is:
HTML:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
var header = $('body');
var backgrounds = new Array(
'url(DSC_0007.jpg)'
, 'url(DSC_01110.jpg)'
, 'url(DSC_0277.jpg)'
, 'url(DSC_0050.jpg)'
);
var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
</script>
CSS:
body{
background: url(DSC_0007.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm very new to coding so would appreciate any help, thanks in advance!
You can use CSS animation.
img#bg1 {
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
animation: background1 60s ease 0s infinite;
}
img#bg2 {
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
animation: background2 60s ease 0s infinite;
margin-left: -100%;
}
img#bg3 {
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
animation: background3 60s ease 0s infinite;
margin-left: -100%;
}
img#bg4 {
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
animation: background4 60s ease 0s infinite;
margin-left: -100%;
}
#keyframes background1 {
0% { margin-left: -0%; }
20% { margin-left: -0%; }
25% { margin-left: 100%; }
26% { margin-left: -100%; }
95% { margin-left: -100%; z-index: 1; }
100% { margin-left: -0%; z-index: 1; }
}
#keyframes background2 {
0% { margin-left: -100%; }
20% { margin-left: -100%; }
25% { margin-left: -0%; }
45% { margin-left: -0%; }
50% { margin-left: 100%; }
100% { margin-left: -0%; }
}
#keyframes background3 {
0% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -0%; }
70% { margin-left: -0%; }
75% { margin-left: 100%; }
100% { margin-left: -0%; }
}
#keyframes background4 {
0% { margin-left: -100%; }
70% { margin-left: -100%; }
75% { margin-left: -0%; }
95% { margin-left: -0%; }
100% { margin-left: 100%; }
}
<img id="bg1" src="http://download-wallpaper.net/images/nature-background/nature-background-24.jpg">
<img id="bg2" src="http://wallpapercave.com/wp/pwQMS6f.jpg">
<img id="bg3" src="http://all4desktop.com/data_images/original/4236532-background-images.jpg">
<img id="bg4" src="http://wallpaper-gallery.net/images/background-desktop-wallpaper-hd/background-desktop-wallpaper-hd-9.jpg">
#JamesDouglas has answered to your first question. But Regarding your second question, In your JS, you have set the slide change time to "5000" milliseconds, that's why the slides are taking ages to change. Change it to 1000 milliseconds, The slides will change faster than before. Hope this helps.
setInterval(nextBackground, 1000);
Related
I have slideshow on my page, but I have small bug in animation and I can't find it.
I use slideshow according to this tutorial: https://www.youtube.com/watch?v=TzAshjkhFQw .
But I want to have only 3 slides not 4.
First 3 slides are ok, but instead of the fourth there is an empty background. I want only 3 slides and after that repeat slideshow.
/* Slider */
.slider {
display: block;
height: 100%;
width: 100%;
z-index: -1;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
border-bottom: 10px solid rgb(121, 0, 0);
}
.slider > * {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
}
.slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(img/slide1.jpg);
background-size: cover;
background-position: center;
}
.slide:nth-child(2) {
left: 100%;
animation-delay: 2s;
background-image: url(img/slide2.png);
background-size: cover;
background-position: center;
}
.slide:nth-child(3) {
left: 100%;
animation-delay: 5s;
background-image: url(img/slide3.jpg);
background-size: cover;
background-position: center;
}
.slide p {
font-size: 2rem;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff;
}
#keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
5% { left: 0%;}
25% { left: 0%;}
30% { left: -100%; width: 100%; opacity: 1;}
30.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 0;}
}
<div class="slider">
<div class="slide">
<p>Slide1</p>
</div>
<div class="slide">
<p>Slide2</p>
</div>
<div class="slide">
<p>Slide3</p>
</div>
</div>
Thank you in advance for your advice!
You need to change the percentages in the animations as well as the timings on the individual slides
#keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
6.667% { left: 0%;}
33.334% { left: 0%;}
40% { left: -100%; width: 100%; opacity: 1;}
40.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 1;}
}
.slide:nth-child(2) {
animation-delay: 3s;
}
.slide:nth-child(3) {
animation-delay: 7s;
}
The animation was initially designed for 4 slides in 12 seconds, i.e. one slide every 3 seconds. If you want to change that to one slide every 4 seconds, you need to space the animations further apart (change the animation delay), and also change the animation so that the slide is visible for a longer time (multiply each percentage by 4/3).
This way of animating slides seems really inflexible however, so you might want to look at some other approach, which allows you to add or remove slides more easily.
There are two images, first is the boat, second the plane. The desired result is: Boat animates from left to right, at that time the plane is hidden. When the boat reaches the middle of the screen it disappears and the plane appears. This change should happen smoothly.
.image1 {
width: 259px;
height: 259px;
display: block;
position: absolute;
bottom: 135px;
margin: auto;
#include transition(all 1.2s);
background-size: contain;
-webkit-animation: helicopter-move-one 19s linear infinite;
animation: helicopter-move-one 19s linear infinite;
opacity: 1;
}
#-webkit-keyframes helicopter-move-one {
0% {
left: -300px;
}
60% {
opacity: 0;
}
100% {
left: 110%;
}
}
#keyframes helicopter-move-one {
0% {
left: -300px;
display: block;
}
59% {
display: none;
}
60% {
display: none;
}
100% {
left: 110%;
}
}
<div class="outer">
<div class="image1"><img src="" alt="boat"></div>
<div class="image2"><img src="" alt="plane"></div>
</div>
Since I don't have your images I'm using dogs. In this case "The desired result is: adult dog animates from left to right, at that time the puppy is hidden. When adult dog reaches the middle of the screen it disappears and the puppy appears. This change should happen smoothly." Please note that display is not animatable. You need to animate the opacity instead.
img {
width: 150px;
height: 150px;
}
[class ^="image"] {
width: 150px;
height: 150px;
display: block;
position: absolute;
left: 0;
right: 0;
background-size: contain;
}
.image1 {
z-index: 2;
animation: daAnimation1 19s linear infinite;
}
.image2 {
z-index: 1;
margin: auto;
left: 0;
right: 0;
opacity: 0;
animation: daAnimation2 19s linear infinite;
}
#keyframes daAnimation1 {
0% {
left: -150px;
opacity: 1;
}
45% {
left: calc(50vw - 75px);
opacity: 1;
}
50% {
left: calc(50vw - 75px);
opacity: 0;
}
100% {
left: 110%;
opacity: 0;
}
}
#keyframes daAnimation2 {
0% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="outer">
<div class="image1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="adult dog"></div>
<div class="image2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" alt="puppy"></div>
</div>
I hope this answers your question.
UPDATE:this is an answer to #Danish comment (see below)
img {
width: 150px;
height: 150px;
}
[class ^="image"] {
position:absolute;
background-size: contain;
}
.image1 {
z-index: 2;
opacity: 1;
animation: daAnimation1 19s linear infinite;
}
.image2 {
z-index: 1;
opacity: 1;
}
.outer{
width: 150px;
height: 150px;
display: block;
position: absolute;
animation: OuterAnimation 19s linear infinite;
}
#keyframes OuterAnimation{
0% {
left: -150px;
}
100% {
left: 110%;
}
}
#keyframes daAnimation1 {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="outer">
<div class="image1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="adult dog"></div>
<div class="image2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" alt="puppy"></div>
</div>
So I know very little about coding and was trying to make a html and css only slider. I was able to create a really basic slideshow with three images. However, the code places a white image after the third for some weird reason. Can anyone tell me what I did wrong? Why is there a white page after the last image? Also if possible, how can I make it so that after the last image it doesn't look choppy when it cuts back to the first?
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
#slider {
overflow: hidden;
width: 60%;
margin: 0 auto;
}
#slider figure img {
width: 20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 15s infinite slider;
}
<div id="slider">
<figure>
<img src="http://thewallpaper.co/wp-content/uploads/2016/03/fire-beach-widescreen-high-definition-wallpaper-pictures-download-full-free-download-wallpaper-high-resolution-colorful-2048x1367-736x459.jpg">
<img src="http://thewallpaper.co/wp-content/uploads/2016/03/awesome-malaysiwide-hdesktop-backgrounphotos-windows-desktop-images-mac-wallpapers-colorful-2048x1367-736x459.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/bf/2e/c5/bf2ec5d03e6ddb65bbff4c98ae367a36.jpg">
</figure>
</div>
</body>
</html>
Since you only have 3 images if you put left: -300%; the last image is out of the container.
Here is the fix:
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: 0;
}
95% {
left: 0;
}
100% {
left: 0;
}
}
#slider {
overflow: hidden;
width: 60%;
margin: 0 auto;
}
#slider figure img {
width: 20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 15s infinite slider;
}
<div id="slider">
<figure>
<img src="http://thewallpaper.co/wp-content/uploads/2016/03/fire-beach-widescreen-high-definition-wallpaper-pictures-download-full-free-download-wallpaper-high-resolution-colorful-2048x1367-736x459.jpg">
<img src="http://thewallpaper.co/wp-content/uploads/2016/03/awesome-malaysiwide-hdesktop-backgrounphotos-windows-desktop-images-mac-wallpapers-colorful-2048x1367-736x459.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/bf/2e/c5/bf2ec5d03e6ddb65bbff4c98ae367a36.jpg">
</figure>
</div>
Note that when you are on the last image - the next slide (to the first one) will not be from the right to the left. To get that visual effect you will have to use javascript.
Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction.
This is my css
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
}
50% {
left: 100%;
}
100% {
left: 0%;
width: 100%
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
position: relative;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
And my html
<div class="loader">
<div class="bar"></div>
</div>
And a jsfiddle with the code
Can someone tell me what I'm doing wrong?
It is because you have a heavy break between 49% and 50%.
49% {
width: 100%;
}
50% {
left: 100%;
}
Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect:
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
left: 0%
}
50% {
left: 100%;
}
100% {
left: 0%;
width: 100%
}
}
Snippet
body {margin: 0; padding: 0;}
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
left: 0%
}
50% {
left: 100%;
width: 0;
}
100% {
left: 0%;
width: 100%
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
position: absolute;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
<div class="loader">
<div class="bar"></div>
</div>
Fiddle: http://jsfiddle.net/praveenscience/06w7zwwm/
If you need a pulsating effect, you need to use two extremes:
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
Snippet
body {margin: 0; padding: 0; overflow: hidden;}
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
width: 100%;
position: absolute;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
<div class="loader">
<div class="bar"></div>
</div>
I have slightly changed your code, managed to make it work. Here's what I've changed:
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
Added overflow: hidden; to .loader
Added width: 100%; to .loader .bar
http://jsfiddle.net/wbyzy9jL/5/
I am trying make responsive png sequences.
My tried code is here. What is wrong with code?
1. if i removed background-size :100%; it shows image until and unless it is invisible.
2. It is not responsive. (if i comment background-size :100%)
CSS
.eye {
position: relative;
width: 70%;
margin: -10% auto 0 auto; /* positioning tweak */
}
.pngseq{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url('http://arnoculus.com/img/eye-sprite.png') no-repeat 0 0%;
background-size: 100%;
animation: play 3s steps(58) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
HTML
<div class="eye">
<div class="pngseq">
</div>
</div>
JSFIDDLE
You have several mistakes...
Here is your code working
.eye {
position: relative;
width: 70%;
height: 800px;
background-color: red;
margin: -10% auto 0 auto; /* positioning tweak */
}
.pngseq{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url('http://arnoculus.com/img/eye-sprite.png') no-repeat 0 0%;
background-size: 5800%;
animation: play 3s steps(57) infinite;
}
#keyframes play {
from { background-position: 0px 0px; }
to { background-position: 100% 0px; }
}
<div class="eye">
<div class="pngseq">
</div>
</div>
It is shaking a bit, maybe the original image isn't accurate, or maybe working with percentages at this sizes has some rounding error; I don't know for sure.