First before everything else, think of how many images you may want to be shown in your slider.
In my code's example I will be doing a slider on four images.
The effect will be a 'push-in' like effect in the direction of right to left.
Question: Why are there 5 URLs provided in the background?
Answer: If look through each image, the first and last image are actually just the same. The first image is duplicated and placed in the last part for a smoother transition effect between the fourth image and the first image.
Question: How to add another image?
Answer: Simply place a comma(,) and url(link.png) -[, url(link.png)] code in the background area in the masthead element. But keep in mind that the first and the last image must be the same if you want a smoother transition. Also, make sure to add another coordinate set in the background-positions in your masthead and keyframes elements.
Question: Can I change transition direction?
Answer: Yep, you can. Just change all the positive values to negative and all the negative values to positive for left to right direction. And instead of subtracting, you add.
Top to bottom and bottom to top transition means you're gonna be using the height, so substitute all widths in the formulas to heights, place the values in the y-coordinates and make sure all x-coordinates are zero.
Top to bottom transition sample initial position code:
background-position: 0px 0px, 0px -590px, 0px -1180px, 0px -1770px, 0px -2360px;
For the next sets of codes you just add the height to the values
For bottom to top transition just make all the negatives in the top to bottom position sample code, positive. And subtract the height in the values for the next sets.
legend: first image, second image, third image, fourth image, fifth image
background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;
background-position: first image x and y coordinates, second image x and y coordinates...so on and so forth..
As explained in the background category in the properties master list, 0px 0px, means left top in words.
The flow of the background-position is the same all throughout the code.
Putting a comma between coordinates would mean that the set of coordinates is specifically for the corresponding image in the same order as it. Therefore, first set is for the first image, second set is for the second image, so on, so forth.
NOTES:
A.)In the keyframes, since the first image and last image is the same, doesn't mean keyframe 0% and 100% is the same. The flow for the x-coordinate values of 100% will be opposite the flow of 0%
0%{background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
----insert 25%, 50% and 75% here (will be shown in code)
100%{background-position: -3280px 0px, -2460px 0px, -14640px 0px, -820px 0px, 0px 0px;}
B.)The coordinates of the first image should always be 0px 0px. The x-coordinates of the preceding coordinates will depend on your masthead size.
lalala unicorn's made-up guide formula for the x-coordinates for 0%:
(0*width)px 0px, (1*width)px 0px, (2*width)px 0px, (3*width)px 0px, (4*width)px 0px
The formula continues until the last image. So, more images means more math! :D
For the next sets of coordinates(in 25%, 50% and so on), you just subtract the width to each.
lalala unicorn's made-up guide formula for the x-coordinates for 0%:
(0*width)px 0px, (1*width)px 0px, (2*width)px 0px, (3*width)px 0px, (4*width)px 0px
The formula continues until the last image. So, more images means more math! :D
For the next sets of coordinates(in 25%, 50% and so on), you just subtract the width to each.
C.)The more images the more percentages. In this example there are a total of five images involved, including the repeated image. Therefore, there are five different sets of keyframe percentage, namely, 0%-25%-50%-75%-100%. To get the percentages you just have to follow the formula below.
n=total number of images
100/(n-1) for the first percentage. 2*[100/(n-1)] for the second percentage.....until you reach 100%
You subtract one because the initializing percentage will always be 0%.
/*code start*/
#xg_masthead
{
overflow: hidden;
margin-top: 10px;
margin-left:-170px!important;
height:590px;
width:820px;
background: url(http://i706.photobucket.com/albums/ww68/natsumeluka/masthead_zpsb913a39f.jpg), url(http://i706.photobucket.com/albums/ww68/natsumeluka/1_zps0ff2699c.jpg),
url(http://i706.photobucket.com/albums/ww68/natsumeluka/masthead_zpsec37522f.jpg), url(http://i706.photobucket.com/albums/ww68/natsumeluka/2_zpse16f576a.jpg), url(http://i706.photobucket.com/albums/ww68/natsumeluka/masthead_zpsb913a39f.jpg);
background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;
background-repeat: no-repeat;
border: 3px solid white;
-moz-box-shadow: 3px 4px 5px -2px #000;
-webkit-box-shadow: 3px 4px 5px -2px #000;
box-shadow: 3px 4px 5px -2px #000;
-webkit-animation: slider 15s infinite;
-moz-animation: slider 15s infinite;
-ms-animation: slider 15s infinite;
-o-animation: slider 15s infinite;
animation: slider 15s infinite;
}
@keyframes slider{
0% {background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
25% {background-position: -820px 0px, 0px 0px, 820px 0px, 1640px 0px, 2460px 0px;}
50% {background-position: -1640px 0px, -820px 0px, 0px 0px, 820px 0px, 1640px 0px;}
75% {background-position: -2460px 0px, -1640px 0px, -820px 0px, 0px 0px, 820px 0;}
100% {background-position: -3280px 0px, -2460px 0px, -1640px 0px, -820px 0px, 0px 0px;}
}
@-moz-keyframes slider {
0% {background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
25% {background-position: -820px 0px, 0px 0px, 820px 0px, 1640px 0px, 2460px 0px;}
50% {background-position: -1640px 0px, -820px 0px, 0px 0px, 820px 0px, 1640px 0px;}
75% {background-position: -2460px 0px, -1640px 0px, -820px 0px, 0px 0px, 820px 0;}
100% {background-position: -3280px 0px, -2460px 0px, -1640px 0px, -820px 0px, 0px 0px;}
}
@-webkit-keyframes slider{
0% {background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
25% {background-position: -820px 0px, 0px 0px, 820px 0px, 1640px 0px, 2460px 0px;}
50% {background-position: -1640px 0px, -820px 0px, 0px 0px, 820px 0px, 1640px 0px;}
75% {background-position: -2460px 0px, -1640px 0px, -820px 0px, 0px 0px, 820px 0;}
100% {background-position: -3280px 0px, -2460px 0px, -1640px 0px, -820px 0px, 0px 0px;}
}
@-ms-keyframes slider{
0% {background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
25% {background-position: -820px 0px, 0px 0px, 820px 0px, 1640px 0px, 2460px 0px;}
50% {background-position: -1640px 0px, -820px 0px, 0px 0px, 820px 0px, 1640px 0px;}
75% {background-position: -2460px 0px, -1640px 0px, -820px 0px, 0px 0px, 820px 0;}
100% {background-position: -3280px 0px, -2460px 0px, -1640px 0px, -820px 0px, 0px 0px;}
}
@-o-keyframes slider{
0% {background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
25% {background-position: -820px 0px, 0px 0px, 820px 0px, 1640px 0px, 2460px 0px;}
50% {background-position: -1640px 0px, -820px 0px, 0px 0px, 820px 0px, 1640px 0px;}
75% {background-position: -2460px 0px, -1640px 0px, -820px 0px, 0px 0px, 820px 0;}
100% {background-position: -3280px 0px, -2460px 0px, -1640px 0px, -820px 0px, 0px 0px;}
}
------------------------------
