I am using a nice CSS3 slider for a slideshow in our canteen. The slider is awesome but it has a bug and the developer seems to be no longer active.
If you add more than 6 items to the slideshow it overlaps and I can't find the issue. Anybody has any ideas?
Here's the fiddle
<body id="page">
<ul class="cb-slideshow">
<ul>
<!-- Background Images muessen via CSS gesetzt werden! -->
<li><span>Image 01</span><div class="slide">{{SP7}}</div></li>
<li><span>Image 02</span><div class="slide">{{SP2}}</div></li>
<li><span>Image 08</span><div class="slide">{{SP10}}</div></li>
<li><span>Image 04</span><div class="slide">{{SP4}}</div></li>
<li><span>Image 05</span><div class="slide">{{SP8}}</div></li>
<li><span>Image 06</span><div class="slide">{{SP6}}</div></li>
</ul>
</ul>
</body>
I reduced the CSS to a minimum. The Source is from here.
For Example, if I try with 9 elements I try these timings but it overlaps:
.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 180s linear infinite 0s;
-moz-animation: imageAnimation 180s linear infinite 0s;
-o-animation: imageAnimation 180s linear infinite 0s;
-ms-animation: imageAnimation 180s linear infinite 0s;
animation: imageAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 40px;
right:5px;
width: 90%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 180s linear infinite 0s;
-moz-animation: titleAnimation 180s linear infinite 0s;
-o-animation: titleAnimation 180s linear infinite 0s;
-ms-animation: titleAnimation 180s linear infinite 0s;
animation: titleAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
padding: 10px 10px;
margin: 20px;
line-height: 60px;
color: #ffffff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide {
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
padding: 10px 10px;
margin: 20px;
line-height: 60px;
color: #ffffff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h1 {
right:5px;
margin:25px;
font-size:80px;
color: #E2001A;
font-family: 'Bree Serif', serif;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h2 {
right:5px;
margin:25px;
font-size:80px;
color: #FFFFFF;
font-family: 'Bree Serif', serif;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.cb-slideshow li:nth-child(1) span { background-image: url(assets/images/background/em.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(assets/images/background/Madden-NFL-15-Game-HD-Wallpaper.jpg);
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(assets/images/background/xmas.jpg);
-webkit-animation-delay: 40s;
-moz-animation-delay: 40s;
-o-animation-delay: 40s;
-ms-animation-delay: 40s;
animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(assets/images/background/nextgen.jpg);
-webkit-animation-delay: 80s;
-moz-animation-delay: 80s;
-o-animation-delay: 80s;
-ms-animation-delay: 80s;
animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(assets/images/background/borussia.jpg);
-webkit-animation-delay: 100s;
-moz-animation-delay: 100s;
-o-animation-delay: 100s;
-ms-animation-delay: 100s;
animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
-webkit-animation-delay: 120s;
-moz-animation-delay: 120s;
-o-animation-delay: 120s;
-ms-animation-delay: 120s;
animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(assets/images/background/f1.jpg);
-webkit-animation-delay: 140s;
-moz-animation-delay: 140s;
-o-animation-delay: 140s;
-ms-animation-delay: 140s;
animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) span {
background-image: url(assets/images/background/superbowl.jpg);
-webkit-animation-delay: 160s;
-moz-animation-delay: 160s;
-o-animation-delay: 160s;
-ms-animation-delay: 160s;
animation-delay: 160s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 40s;
-moz-animation-delay: 40s;
-o-animation-delay: 40s;
-ms-animation-delay: 40s;
animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 80s;
-moz-animation-delay: 80s;
-o-animation-delay: 80s;
-ms-animation-delay: 80s;
animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 100s;
-moz-animation-delay: 100s;
-o-animation-delay: 100s;
-ms-animation-delay: 100s;
animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) div {
-webkit-animation-delay: 120s;
-moz-animation-delay: 120s;
-o-animation-delay: 120s;
-ms-animation-delay: 120s;
animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) div {
-webkit-animation-delay: 140s;
-moz-animation-delay: 140s;
-o-animation-delay: 140s;
-ms-animation-delay: 140s;
animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) div {
-webkit-animation-delay: 160s;
-moz-animation-delay: 160s;
-o-animation-delay: 160s;
-ms-animation-delay: 160s;
animation-delay: 160s;
}
The answer to your question is already present in the link that you'd provided in the question but I will try to explain it differently just in case you had problems understanding that.
Changing just animation-duration, animation-delay alone are not sufficient to make this animation work with more no. of elements. You'd have to modify the animation keyframe setting also like in the snippet provided below.
#keyframes imageAnimation {
0% {opacity: 0; animation-timing-function: ease-in;}
5% {opacity: 1; transform: scale(1.05); animation-timing-function: ease-out;}
11% {opacity: 1; transform: scale(1.1) rotate(3deg);}
16% {opacity: 0; transform: scale(1.1) rotate(3deg);}
100% {opacity: 0;}
}
#keyframes titleAnimation {
0% {opacity: 0; transform: translateX(200px);}
5% {opacity: 1; transform: translateX(0px);}
11% {opacity: 1; transform: translateX(0px);}
13% {opacity: 0; transform: translateX(-400px);}
25% {opacity: 0;}
100% {opacity: 0;}
}
.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(assets/images/background/pattern.png) 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;
backface-visibility: hidden;
animation: imageAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 40px;
right: 5px;
width: 90%;
text-align: center;
opacity: 0;
animation: titleAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
padding: 10px 10px;
margin: 20px;
line-height: 60px;
color: #ffffff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide {
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
padding: 10px 10px;
margin: 20px;
line-height: 60px;
color: #ffffff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h1 {
right: 5px;
margin: 25px;
font-size: 80px;
color: #E2001A;
font-family: 'Bree Serif', serif;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h2 {
right: 5px;
margin: 25px;
font-size: 80px;
color: #FFFFFF;
font-family: 'Bree Serif', serif;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.cb-slideshow li:nth-child(1) span {
background-image: url(assets/images/background/em.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(assets/images/background/Madden-NFL-15-Game-HD-Wallpaper.jpg);
animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(assets/images/background/xmas.jpg);
animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(assets/images/background/nextgen.jpg);
animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(assets/images/background/borussia.jpg);
animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(assets/images/background/f1.jpg);
animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) span {
background-image: url(assets/images/background/superbowl.jpg);
animation-delay: 160s;
}
.cb-slideshow li:nth-child(2) div {
animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) div {
animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) div {
animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) div {
animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) div {
animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) div {
animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) div {
animation-delay: 160s;
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
5% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
11% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
16% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% {
opacity: 0
}
}
#keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
5% {
opacity: 1;
transform: translateX(0px);
}
11% {
opacity: 1;
transform: translateX(0px);
}
13% {
opacity: 0;
transform: translateX(-400px);
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<ul class="cb-slideshow">
<ul>
<li><span>Image 01</span>
<div class="slide">{{SP1}}</div>
</li>
<li><span>Image 02</span>
<div class="slide">{{SP2}}</div>
</li>
<li><span>Image 03</span>
<div class="slide">{{SP3}}</div>
</li>
<li><span>Image 04</span>
<div class="slide">{{SP4}}</div>
</li>
<li><span>Image 05</span>
<div class="slide">{{SP5}}</div>
</li>
<li><span>Image 06</span>
<div class="slide">{{SP6}}</div>
</li>
<li><span>Image 07</span>
<div class="slide">{{SP7}}</div>
</li>
<li><span>Image 08</span>
<div class="slide">{{SP8}}</div>
</li>
<li><span>Image 09</span>
<div class="slide">{{SP9}}</div>
</li>
</ul>
</ul>
The following are key for infinite loop animations with multiple elements to work without overlapping:
The animation-duration on each element should be equal to the sum total of time required for all elements to complete their animation. For nine elements to animate (fade in, stay visible, fade out cycle) for 20s each the animation-duration on each element should be 9*20s = 180s.
Each element should animate only for that 20s duration, for the rest of the time they should stay idle in-order for them to not overlap with the previous or the next element. This can be achieved using the following two settings.
First is to make each element start their animation only after all the previous elements have completed their own animation. So, the first element would have no delay, the second would have delay of 20s (amount of time for 1st element's animation), the third would have a of 40s (time take for first two elements' animation) and so on for the subsequent elements.
Second is to make the elements remain idle for the remaining 160s (total animation duration - animation time for each element). This is needed because during that time the other elements are doing their animation.This is achieved by modifying the keyframe settings such that the amount of time taken for each element to fade-in and stay visible is roughly equal to the total animation duration divided by total no. of elements (which is nothing but 1/9th of 100%).
In the original animation you'd provided in question (for 6 elements), each element went from opacity: 0 at 0% to opacity: 1 at 8% and stayed as-is till 16% (which is 1/6th of 100%). Here, since you have 9 elements, the fade-out should start at 11% (which is roughly 1/9th of 100%). So, we change the keyframe settings to make the elements go from opacity: 0 at 0% to opacity: 1 at 5% and then stay with opacity: 1 till 11%. After that is slowly starts fading out till it reaches the 16% mark.
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.
Hi guys so i am playing around with this tutorial right now Link
And i created my backgrounds which work fine etc, now i want to add my new section right under that section but for some reason no section is appearing below it, its appearing above it, and i have no idea why :
HTML:
<ul class="cb-slideshow">
<li><span>Image 01</span>
<div></div>
</li>
<li><span>Image 02</span>
<div></div>
</li>
<li><span>Image 03</span>
<div></div>
</li>
<li><span>Image 04</span>
<div></div>
</li>
<li><span>Image 05</span>
<div></div>
</li>
<li><span>Image 06</span>
<div></div>
</li>
</ul>
<div class="aboutus">
<div class="container">
<h1>ABOUT US</h1>
</div>
</div>
CSS:
.aboutus {
height: 500px;
background-color: blue;
}
Style Sheet From tutorial :
.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(../images/pattern.png) 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: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-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: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(../images/6.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/5.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(../images/4.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(../images/3.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(../images/2.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(../images/1.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;
}
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { 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: 100px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}
So everything is working perfectly right now, i got the backtround images to load and the animations look beautiful etc, but i want to start my new section about us right under slideshow but for some reason its appearing ontop of it and its dispersing all the time is well and i have no clue why. I am also using bootstrap 3 with this demo page
Thanks
Remove display: fixed; from .cb-slideshow class. Because fixed section always viewed on top and other elements start above or below this section.
Here is the css properties which I changed in .cb-slideshow class:
.cb-slideshow,
.cb-slideshow:after {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
height: 662px;
display: block;
position: relative;
}
body, ul {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
ul {
list-style:none;
}
body{
background: #000;
font-weight: 400;
font-size: 15px;
color: #aa3e03;
overflow-y: scroll;
overflow-x: hidden;
}
h1 {
margin: 0
}
.container{
position: relative;
text-align: center;
}
.aboutus {
height: 500px;
background-color: blue;
padding-top: 20px;
color: #fff;
}
.cb-slideshow,
.cb-slideshow:after {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
height: 662px;
display: block;
position: relative;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) 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;
}
.cb-slideshow li:nth-child(1) span {
background-image: url('https://image.ibb.co/bFH276/1.jpg')
}
.cb-slideshow li:nth-child(2) span {
background-image: url('https://image.ibb.co/kHoELR/2.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('https://image.ibb.co/g7xVum/3.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('https://image.ibb.co/d81OEm/4.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('https://image.ibb.co/ejben6/5.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('https://image.ibb.co/gahKn6/6.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 }
}
<body id="page">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li>
<li><span>Image 02</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 04</span><div><h3>e·qua·nim·i·ty</h3></div></li>
<li><span>Image 05</span><div><h3>com·po·sure</h3></div></li>
<li><span>Image 06</span><div><h3>se·ren·i·ty</h3></div></li>
</ul>
<div class="aboutus">
<div class="container">
<h1> ABOUT US </h1>
</div>
</div>
</body>
UPDATE
I changed in .cb-slideshow class
.cb-slideshow,
.cb-slideshow:after{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
height: 662px;
display: block;
position: relative;
overflow: hidden;
}
body, ul {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
ul {
list-style:none;
}
body{
background: #000;
font-weight: 400;
font-size: 15px;
color: #aa3e03;
overflow-y: scroll;
overflow-x: hidden;
}
h1 {
margin: 0
}
.container{
position: relative;
text-align: center;
}
.aboutus {
height: 500px;
background-color: blue;
padding-top: 20px;
color: #fff;
}
.cb-slideshow,
.cb-slideshow:after {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
height: 662px;
display: block;
position: relative;
overflow: hidden;
}
.cb-slideshow:after {
content: '';
background: transparent url('https://image.ibb.co/d4Ls76/pattern.png') 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: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-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: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(1) span {
background-image: url('https://image.ibb.co/gahKn6/6.jpg')
}
.cb-slideshow li:nth-child(2) span {
background-image: url('https://image.ibb.co/ejben6/5.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('https://image.ibb.co/d81OEm/4.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('https://image.ibb.co/g7xVum/3.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('https://image.ibb.co/kHoELR/2.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('https://image.ibb.co/bFH276/1.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;
}
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { 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: 100px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js' type='text/javascript'></script>
</head>
<body id="page">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>se·ren·i·ty</h3></div></li>
<li><span>Image 02</span><div><h3>com·po·sure</h3></div></li>
<li><span>Image 03</span><div><h3>e·qua·nim·i·ty</h3></div></li>
<li><span>Image 04</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 05</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 06</span><div><h3>re·lax·a·tion</h3></div></li>
</ul>
<div class="aboutus">
<div class="container">
<h1> ABOUT US </h1>
</div>
</div>
</body>
This might resolve the issue:
.aboutus {
clear:both;
display:block
}
So I have created a rough nav bar at the top of the page, on top (I thought) of the picture slideshow, but for some reason the background color of the navigation bar fades to transparent as the slideshow changes images. How do I stop it from doing this, and set it to a fixed opacity? Thankyou.
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
.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(../../../images/pattern.png) 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: -10;
-webkit-backface-visibility: visible;
-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;
}
.cb-slideshow li div {
z-index: 3;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 30s linear infinite 0s;
-moz-animation: titleAnimation 30s linear infinite 0s;
-o-animation: titleAnimation 30s linear infinite 0s;
-ms-animation: titleAnimation 30s linear infinite 0s;
animation: titleAnimation 30s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
z-index: -7;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/image%201.jpg);
z-index: -7;
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/image%202.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
z-index: -7;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/image%203.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
z-index: -7;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/image%204.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
z-index: -7;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/image%205.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
z-index: -7;
}
.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;
z-index: -7;
}
.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;
z-index: -7;
}
.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;
z-index: -7;
}
.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;
z-index: -7;
}
/* 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
}
}
.logo {
position: relative;
width: 120px;
top: 30px;
float: left;
margin-left: 25px;
}
/* CSS Document */
a {
font-family: Arial;
text-decoration: none;
color: white;
font-size: 15px;
}
ul {
list-style-type: none;
}
li {
display: inline;
padding: 10px;
}
.list {
position: relative;
margin-top: 40px;
float: right;
}
.navbar {
background-color: black;
height: 100px;
width: 100%;
z-index: 6;
}
<div class="navbar">
<img class="logo" src="images/hk white.png" />
<ul class="list">
<a class="alist" href="index.html">
<li class="listli" id="home"><strong>HOME</strong>
</li>
</a><strong>
<a class="alist" href="products.html"><li class="listli" id="about">PRODUCTS</li></a>
<a class="alist" href="blog.html"><li class="listli" id="work">BLOG</li></a>
<a class="alist" href="contact.html"><li class="listli" id="contact">CONTACT</li></a>
</ul>
</div>
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>hon·our</h3></div></li>
<li><span>Image 02</span><div><h3>pas·sion</h3></div></li>
<li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 04</span><div><h3>re·spec·t</h3></div></li>
<li><span>Image 05</span><div><h3>cul·ture</h3></div></li>
</ul>
Let me know if you also need the JS file.
Hi
try to change this and it should work.
HTML
<li>
<span>
<img src="ImageHere"></span>
<div class="slides"><h3>hon·our</h3></div>
</li>
CSS
.cb-slideshow li .slides h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
z-index: 0;
position:absolute;
top:50%;
}
Fiddle demo here
I hope this helps
Please have a look at http://facelesstolegendary.com
I looked at several posts here and saw that I need to add the -webkit- prefix to my transforms, etc.
I did that, but it still does not work on iOS. It does work on my desktop browsers.
Here's the relevant code:
.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(pattern.png) 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;
-webkit-opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
-webkit-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;
-webkit-opacity: 0;
color: #fff;
animation: titleAnimation 36s linear infinite 0s;
-webkit-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;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(faceless.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(legendary.jpg);
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(faceless.jpg);
animation-delay: 12s;
-webkit-animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(legendary.jpg);
animation-delay: 18s;
-webkit-animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(faceless.jpg);
animation-delay: 24s;
-webkit-animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(legendary.jpg);
animation-delay: 30s;
-webkit-animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 12s;
-webkit-animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
animation-delay: 18s;
-webkit-animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
animation-delay: 24s;
-webkit-animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
animation-delay: 30s;
-webkit-animation-delay: 30s;
}
.no-cssanimations .cb-slideshow li span{
opacity: 1;
-webkit-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 }
}
#keyframes imageAnimation {
0% {
opacity: 0;
-webkit-opacity: 0;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-opacity: 1;
transform: scale(1.05);
-webkit-transform: scale(1.05);
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-opacity: 1;
transform: scale(1.1) rotate(3deg);
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-opacity: 0;
transform: scale(1.1) rotate(3deg);
-webkit-transform: scale(1.1) rotate(3deg);
}
100% {
opacity: 0
-webkit-opacity: 0
}
}
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
</div>
</li>
<li>
<span>Image 02</span>
<div>
</div>
</li>
<li>
<span>Image 03</span>
<div>
</div>
</li>
<li>
<span>Image 04</span>
<div>
</div>
</li>
<li>
<span>Image 05</span>
<div>
</div>
</li>
<li>
<span>Image 06</span>
<div>
</div>
</li>
</ul>
You need to prefix your #keyframes with -webkit-, and include the -webkit-prefixed animations and transitions there, instead of including them in your original #keyframes:
#keyframes imageAnimation {
0% {
opacity: 0;
-webkit-opacity: 0;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
becomes:
#-webkit-keyframes imageAnimation {
0% {
-webkit-opacity: 0;
-webkit-animation-timing-function: ease-in;
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
and so on.
Did you use -webkit-overflow-scrolling: touch; elsewhere? Try to delete it.
I have a full page image slideshow on the landing page with an href link on each image.
(http://shawsoofi.com/withinroots/)
The problem is the images all direct to the same link for some reason. I can't figure out why.
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>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>
CSS:
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.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;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../photo/sandwaves/5.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../photo/gratuit/4.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-position: 50% 75%;
background-image: url(../photo/feet/4.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(../photo/sandwaves/3.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(../photo/gratuit/2.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-position: 50% 75%;
background-image: url(../photo/feet/1.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 }
}
You have 6 overlapping <span>s, so the last one is in front, blocking all the others. Changing opacity doesn't change whether they block each other. The elements are still there.