So, I recently started learning HTML and CSS, and I believe I've gotten to a point where I'm relatively good at it, and so I tried to make my own website, as practice.
Didn't have a problem with anything (except maybe mobile responsiveness but that's for a different question). Anyways, I wanted a sort of slideshow background with around 6 pictures and for it to switch every 6 seconds, smoothly.
A friend helped me with this, since it's way out of my league in terms of #keyframes (after reading it I found it understandable but I don't think I would've understood it on my own).
And so the website I'm designing is in Hebrew (RTL direction language) and so I did a <html dir="rtl" like any normal person would, but when trying out mobile responsiveness after just finding out about how difficult it could be to set up, I tested it and I saw the background glitching out. I tried many different ways to identify the problem and after hours and hours of attempts to look for the problem, I found out that the RTL in the html is the problem. However, considering it's a website that is RTL and already has elements in it that are positioned to RTL, it could ruin everything. So that's where I come to you. Is there any way to fix this problem? Make it RTL? I tried adding direction to several of the CSS elements but nothing worked.
/* CSS codes */
/* this is there to show no fading animation when you load the page for the first time */
.background-start{
background-image: url(slideshow/slideshow1.jpg);
position: fixed;
background-attachment: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
.slideshow,
.slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
background-attachment: fixed;
opacity: 0;
z-index: 0;
-webkit-animation: imageAnimation 24s linear infinite 0s;
-moz-animation: imageAnimation 24s linear infinite 0s;
-o-animation: imageAnimation 24s linear infinite 0s;
-ms-animation: imageAnimation 24s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.slideshow li:nth-child(1) span {
background-image: url(slideshow/slideshow1.jpg);
}
.slideshow li:nth-child(2) span {
background-image: url(slideshow/slideshow2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url(slideshow/slideshow3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url(slideshow/slideshow4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
background-image: url(slideshow/slideshow5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.slideshow li:nth-child(6) span {
background-image: url(slideshow/slideshow6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
.image_container
{
position: relative;
height: 100vh;
z-index: -1;
}
<!-- HTML codes -->
<div class="image_container">
<div id="background-preload" class="background-start"></div>
<script>$('#background-preload').delay(5000).fadeOut('slow');</script>
<ul class="slideshow">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
Apologies if it's not enough code, I just figure that posting the entire HTML and CSS document would be useless as it's very long and has nothing to do with this.
Thanks!
Related
I am in the process of expanding my website and wanted to have an automatic slideshow in the header.
As a basis I used the tutorial from this website: https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
However, the problem is that the background image is not only displayed in the header, but on the whole page.
The question now is what I have to change so that the "cb-slideshow" element doesn't cover the whole website, but only the header.
Since I am still quite a beginner in the whole CSS area, I only tried to change the position to relative at the ".cb-slideshow li span", which of course didn't work.
<section id="home" class="tt-fullHeight" data-stellar-vertical-offset="50" data-stellar-background-ratio="0.2">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>JavaScript</h3></div></li>
<li><span>Image 02</span><div><h3>NGC-3432</h3></div></li>
<li><span>Image 03</span><div><h3></h3></div></li>
<li><span>Image 04</span><div><h3></h3></div></li>
<li><span>Image 05</span><div><h3></h3></div></li>
<li><span>Image 06</span><div><h3></h3></div></li>
</ul>
<div class="intro ">
<div class="intro-sub">Ich bin NAME</div>
<h1>TEXT</h1>
<p>TEXT</p>
<div class="social-icons">
<ul class="list-inline">
<li><i class="fab fa-twitter"></i></li>
<!-- I have removed the remaining icons for the clarity times -->
</ul>
</div> <!-- /.social-icons -->
</div>
<div class="mouse-icon">
<div class="wheel"></div>
</div>
</section>
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
/*background: transparent url(../../beta/assets/JS-captcha.jpg) repeat top left;*/
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
display:none;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../../beta/assets/JS-captcha.jpg);
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../../beta/assets/NGC-3432.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(/beta/assets/JS-captcha.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(/beta/assets/JS-captcha.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(/beta/assets/JS-captcha.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(/beta/assets/JS-captcha.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Animation for the title */
#-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
It was expected that the background would only be displayed and updated in the header. Currently, however, the background images are displayed across the entire Web site
I have now managed it by completely removing the "position: absolute;", thank you very much for your answers.
.classofthebackground{
width:100%; /if necessary based on the resolution of the image/
background-size: cover;
}
and also dont forget to use right position for the particular class
Try adding "overflow: hidden;" to your .cb-slideshow class.
Also, you've set a height and width of 100% so that will default to the browser width and height. Try reducing that size also.
The position relative attribute wont work, because it is relative to what?You should have another object that has the attribute of absolute.
There are 2 ways to do it:
1.You create a wrapper class around the slideshow, set the position to relative and the .cbslideshow to absolute regarding the wrapper class.This method is good if you have multiple images to show.
2.You set the .classofthebackground to width: 100% which will cover the header.Fast for a small amount of images.
Just a tip, don't use plain html and css with that.WAY too much work.Use bootstrap.You dont have to use css.Everything is premade for you to copy-paste and modify.
Good luck.
My background images are all too stretched width wise and I have tried countless things to try and make it work. I have changed width parameters, height parameter, looked on different sights for answers, and could not find anything that worked. The pictures are background images and are in an animation to fade through the images. I am using Google Chrome as the browser and pictures that I have on my desktop. I found some pictures online to add in the snippet.
#crossfade > img {
width:100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
<html>
<div id= 'crossfade'>
<img src="https://www.gstatic.com/webp/gallery/1.jpg">
<img src="https://www.gstatic.com/webp/gallery/2.jpg">
<img src="https://www.gstatic.com/webp/gallery/3.jpg">
<img src="https://www.gstatic.com/webp/gallery/4.jpg">
</div>
</html>
This is due to image aspect ratio. Instead of adding img element add a div element with a background-image. you can then play with the height, position accordingly. It will keep your aspect ration intact. Please see the below solution or run it in codepen https://codepen.io/salinaacharya/pen/PVowPz
<html>
<div id= 'crossfade'>
<div class="image-box" style="background-image: url(https://www.gstatic.com/webp/gallery/1.jpg)">
</div>
<div class="image-box" style="background-image: url(https://www.gstatic.com/webp/gallery/2.jpg)">
</div>
<div class="image-box" style="background-image:url(https://www.gstatic.com/webp/gallery/3.jpg)">
</div>
<div class="image-box" style="background-image:url(https://www.gstatic.com/webp/gallery/4.jpg)">
</div>
</div>
</html>
#crossfade > .image-box {
width:100%;
height:500px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
#crossfade > .image-box:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > .image-box:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > .image-box:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > .image-box:nth-child(5) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
You need to remove the property width or height from your #crossfade element in order the have a correct scaling, you can set min-width and min-height in order to achieve the full screen mode that you're looking for, although you might lose some of the image visibility.
#crossfade > img {
min-width: 100%;
min-height: 100%;
}
Try adding object-fit: cover to the image
#crossfade>img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: -1;
animation: imageAnimation 30s linear infinite 0s;
}
#crossfade>img:nth-child(2) {
animation-delay: 6s;
}
#crossfade>img:nth-child(3) {
animation-delay: 12s;
}
#crossfade>img:nth-child(4) {
animation-delay: 18s;
}
#crossfade>img:nth-child(5) {
animation-delay: 24s;
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
<div id='crossfade'>
<img src="https://www.gstatic.com/webp/gallery/1.jpg">
<img src="https://www.gstatic.com/webp/gallery/2.jpg">
<img src="https://www.gstatic.com/webp/gallery/3.jpg">
<img src="https://www.gstatic.com/webp/gallery/4.jpg">
</div>
HTML/CSS noob here. I currently have 5 images that overlay one another and fade in-and-out in 8 second intervals. In order to do this, I have set the images to have an absolute positioning. I am now in the process of creating this site dynamically so I would like to put these crossfading images within a div ("crossfade_container") so I can then center them as the browser size changes. Obviously, with the absolute positioning on the images itself will not allow for this dynamic positioning.
The following is my HTML:
<div class="crossfade_container">
<div id="crossfade">
<img src="Images/Michigan_1.png" />
<img src="Images/Miller_1.png" />
<img src="Images/OSU_Helmets.png" />
<img src="Images/Go_Blue.png" />
<img src="Images/OSU_UM.png" />
</div>
</div>
The following is my CSS to create crossfade between images:
#crossfade > img {
width: 695px;
height: 350px;
position: absolute;
top: 240px;
left: 441px;
color: transparent;
opacity: 0;
z-index: 0;
box-shadow: 2px 2px 2px silver;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-webkit-keyframes imageAnimation {
5% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
To this point, everything is how I would like it. It's the dynamic aspect of the code that is confusing me. Here is the following code I am using to no avail:
#media screen and (min-width : 481px) and (max-width: 695px) {
.crossfade_container {
display: block;
float: none;
background-color: red;
width: 480px;
height: 255px;
margin-left: auto;
margin-right: auto;
}
#crossfade > img {
width: 480px;
height: 235px;
position: relative;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
}
With this, ".crossfade_container" is exactly where I want it and by changing the position to "relative" within "#crossfade > img" only the first image in the series appears where I would like it. Now instead of the images being stacked on top of one another, they now appear in series going down the page - as if they are block elements (hope that makes sense).
Please help & let me know if I need to clarify anything. Thanks.
You could do it by using css position: relative; to .crossfade_container and position: absolute; to #crossfade > img
JSFiddle - DEMO
HTML:
<div class="crossfade_container">
<div id="crossfade">
<img src="Images/Michigan_1.png" style="background: red;">
<img src="Images/Miller_1.png" style="background: blue;">
<img src="Images/OSU_Helmets.png" style="background: pink;">
<img src="Images/Go_Blue.png" style="background: orange;">
<img src="Images/OSU_UM.png" style="background: black;">
</div>
</div>
CSS:
#crossfade > img {
width: 695px;
height: 350px;
position: absolute;
top: 50px;
left: 50px;
color: transparent;
opacity: 0;
z-index: 0;
box-shadow: 2px 2px 2px silver;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-webkit-keyframes imageAnimation {
5% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#media screen and (min-width : 481px) and (max-width: 695px) {
.crossfade_container {
position: relative;
display: block;
float: none;
background-color: red;
width: 480px;
height: 255px;
margin-left: auto;
margin-right: auto;
}
#crossfade > img {
width: 480px;
height: 235px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
}
For More Info:
Mozilla MDN CSS Position
I made a web page that has a slideshow of 6 images for the background. The problem is that I have a certain PNG logo that animates with the background as in the opacity animation is applied on the logo, but I want the logo to stay stable with no Animation.
My HTML Code:
<html>
<head>
<title>Creative Designs</title>
<link rel="shortcut icon" href="Images/Icon.ico">
<link rel="stylesheet" type="text/css" href="Css/Style1.css" />
</head>
<body bgcolor="black">
<div class="logo" align="center" "><img src="Images/Logo.png" alt="Header" /></div>
<ul class="slideshow">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
and My CSS Code:
ul{
margin:0;
padding:0;
}
.footer{
position: absolute;
bottom: 10;
left: 20;
}
.logo{
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
}
.slideshow li {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
opacity: 0;
z-index: 0;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.slideshow li:nth-child(1) {
background-image: url(../Images/Slideshow/1.jpg)
}
.slideshow li:nth-child(2) {
background-image: url(../Images/Slideshow/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) {
background-image: url(../Images/Slideshow/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) {
background-image: url(../Images/Slideshow/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.slideshow li:nth-child(5) {
background-image: url(../Images/Slideshow/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.slideshow li:nth-child(6) {
background-image: url(../Images/Slideshow/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; }
8% { opacity: 1; -webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0; -moz-animation-timing-function: ease-in; }
8% { opacity: 1; -moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0; -o-animation-timing-function: ease-in; }
8% { opacity: 1; -o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0; -ms-animation-timing-function: ease-in; }
8% { opacity: 1; -ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
I just got the Answer by changing the index of the slideshow images to -1 instead of 0.
.slideshow li {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
opacity: 0;
z-index: -1;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
I'm making a website with a full background image transition.
The problem is the animation, i can't make them work properly. I want them to fade from one to another without the black screen between the images. This is my website in live: http://testes-cmt.bl.ee
I've tried a lot of things, but i can't fix this problem, even when trying to change the time.
Does anyone knows how to fix this?
This is my code so far:
HTML:
<ul class="cb-slideshow">
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
</ul>
CSS:
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 32s linear infinite 0s;
-moz-animation: imageAnimation 32s linear infinite 0s;
-o-animation: imageAnimation 32s linear infinite 0s;
-ms-animation: imageAnimation 32s linear infinite 0s;
animation: imageAnimation 32s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 32s linear infinite 0s;
-moz-animation: titleAnimation 32s linear infinite 0s;
-o-animation: titleAnimation 32s linear infinite 0s;
-ms-animation: titleAnimation 32s linear infinite 0s;
animation: titleAnimation 32s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
The quickest way I found to make the transitions crossfade rather than go through black was to adjust the #keyframes to extend the opacity: 1 time:
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
30% { opacity: 1 }
40% { opacity: 0 }
100% { opacity: 0 }
}
Something like this JSFiddle.