CSS Text carousel with fixed text - html

Question

I am trying to recreate a effect found on this page
I searched the web and found something and try to adjust it. But i can't figure out how to align that the text to look like in the example.
I am trying to modify the example but if there is a better practice that u can show me that's even better.
Some help to find documentation about it would be apprenticed to.
html,
body {
font-family: 'Droid Serif', serif;
}
.slider {
height: 320px;
width: 680px;
margin-left: 50px;
overflow: visible;
position: 0%;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
}
.slider li.anim1 {
-moz-animation: cycle 15s linear infinite;
-webkit-animation: cycle 15s linear infinite;
animation: cycle 15s linear infinite;
}
.slider li.anim2 {
-moz-animation: cycle2 15s linear infinite;
-webkit-animation: cycle2 15s linear infinite;
animation: cycle2 15s linear infinite;
}
.slider li.anim3 {
-moz-animation: cycle3 15s linear infinite;
-webkit-animation: cycle3 15s linear infinite;
animation: cycle3 15s linear infinite;
}
.slider li.anim4 {
-moz-animation: cycle4 15s linear infinite;
-webkit-animation: cycle4 15s linear infinite;
animation: cycle4 15s linear infinite;
}
.slider li.anim5 {
-moz-animation: cycle5 15s linear infinite;
-webkit-animation: cycle5 15s linear infinite;
animation: cycle5 15s linear infinite;
}
.slider:hover li {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#-moz-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
#-moz-keyframes cycle2 {
0% {
top: -325px;
opacity: 0;
}
16% {
top: -325px;
opacity: 0;
}
20% {
top: 0px;
opacity: 1;
}
24% {
top: 0px;
opacity: 1;
}
36% {
top: 0px;
opacity: 1;
z-index: 0;
}
40% {
top: 325px;
opacity: 0;
z-index: 0;
}
41% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-moz-keyframes cycle3 {
0% {
top: -325px;
opacity: 0;
}
36% {
top: -325px;
opacity: 0;
}
40% {
top: 0px;
opacity: 1;
}
44% {
top: 0px;
opacity: 1;
}
56% {
top: 0px;
opacity: 1;
}
60% {
top: 325px;
opacity: 0;
z-index: 0;
}
61% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-moz-keyframes cycle4 {
0% {
top: -325px;
opacity: 0;
}
56% {
top: -325px;
opacity: 0;
}
60% {
top: 0px;
opacity: 1;
}
64% {
top: 0px;
opacity: 1;
}
76% {
top: 0px;
opacity: 1;
z-index: 0;
}
80% {
top: 325px;
opacity: 0;
z-index: 0;
}
81% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-moz-keyframes cycle5 {
0% {
top: -325px;
opacity: 0;
}
76% {
top: -325px;
opacity: 0;
}
80% {
top: 0px;
opacity: 1;
}
84% {
top: 0px;
opacity: 1;
}
96% {
top: 0px;
opacity: 1;
z-index: 0;
}
100% {
top: 325px;
opacity: 0;
z-index: 0;
}
}
#-webkit-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
50% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
#-webkit-keyframes cycle2 {
0% {
top: -325px;
opacity: 0;
}
16% {
top: -325px;
opacity: 0;
}
20% {
top: 0px;
opacity: 1;
}
24% {
top: 0px;
opacity: 1;
}
36% {
top: 0px;
opacity: 1;
z-index: 0;
}
40% {
top: 325px;
opacity: 0;
z-index: 0;
}
41% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-webkit-keyframes cycle3 {
0% {
top: -325px;
opacity: 0;
}
36% {
top: -325px;
opacity: 0;
}
40% {
top: 0px;
opacity: 1;
}
44% {
top: 0px;
opacity: 1;
}
56% {
top: 0px;
opacity: 1;
z-index: 0;
}
60% {
top: 325px;
opacity: 0;
z-index: 0;
}
61% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-webkit-keyframes cycle4 {
0% {
top: -325px;
opacity: 0;
}
56% {
top: -325px;
opacity: 0;
}
60% {
top: 0px;
opacity: 1;
}
64% {
top: 0px;
opacity: 1;
}
76% {
top: 0px;
opacity: 1;
z-index: 0;
}
80% {
top: 325px;
opacity: 0;
z-index: 0;
}
81% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-webkit-keyframes cycle5 {
0% {
top: -325px;
opacity: 0;
}
76% {
top: -325px;
opacity: 0;
}
80% {
top: 0px;
opacity: 1;
}
84% {
top: 0px;
opacity: 1;
}
96% {
top: 0px;
opacity: 1;
z-index: 0;
}
100% {
top: 325px;
opacity: 0;
z-index: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<meta charset='utf-8' />
<title>
infinite loop carousel(vertical)
</title>
<style>
</style>
</head>
<body>
<p>review
<span>
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">PDF's</div>
</li>
<li class="anim2">
<div class="quote">Prints</div>
</li>
<li class="anim3">
<div class="quote">Pictures</div>
</li>
<li class="anim4">
<div class="quote">colors</div>
</li>
<li class="anim5">
<div class="quote">testtest</div>
</li>
</ul>
</div>
</div>
</div>
</span></p>
</body>
</html>

Answer 1

Why don't you just position absolute the review text on the left side of the slider ? ( that would be one option )
Also you had some span tags and unclosed tags in your html. Please verify it it first
html,
body {
font-family: 'Droid Serif', serif;
}
.leftText {
position:absolute;
left:0;
}
.slider {
height: 320px;
width: 680px;
margin-left: 50px;
overflow: visible;
position: 0%;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
}
.slider li.anim1 {
-moz-animation: cycle 15s linear infinite;
-webkit-animation: cycle 15s linear infinite;
animation: cycle 15s linear infinite;
}
.slider li.anim2 {
-moz-animation: cycle2 15s linear infinite;
-webkit-animation: cycle2 15s linear infinite;
animation: cycle2 15s linear infinite;
}
.slider li.anim3 {
-moz-animation: cycle3 15s linear infinite;
-webkit-animation: cycle3 15s linear infinite;
animation: cycle3 15s linear infinite;
}
.slider li.anim4 {
-moz-animation: cycle4 15s linear infinite;
-webkit-animation: cycle4 15s linear infinite;
animation: cycle4 15s linear infinite;
}
.slider li.anim5 {
-moz-animation: cycle5 15s linear infinite;
-webkit-animation: cycle5 15s linear infinite;
animation: cycle5 15s linear infinite;
}
.slider:hover li {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#-moz-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
#-moz-keyframes cycle2 {
0% {
top: -325px;
opacity: 0;
}
16% {
top: -325px;
opacity: 0;
}
20% {
top: 0px;
opacity: 1;
}
24% {
top: 0px;
opacity: 1;
}
36% {
top: 0px;
opacity: 1;
z-index: 0;
}
40% {
top: 325px;
opacity: 0;
z-index: 0;
}
41% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-moz-keyframes cycle3 {
0% {
top: -325px;
opacity: 0;
}
36% {
top: -325px;
opacity: 0;
}
40% {
top: 0px;
opacity: 1;
}
44% {
top: 0px;
opacity: 1;
}
56% {
top: 0px;
opacity: 1;
}
60% {
top: 325px;
opacity: 0;
z-index: 0;
}
61% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-moz-keyframes cycle4 {
0% {
top: -325px;
opacity: 0;
}
56% {
top: -325px;
opacity: 0;
}
60% {
top: 0px;
opacity: 1;
}
64% {
top: 0px;
opacity: 1;
}
76% {
top: 0px;
opacity: 1;
z-index: 0;
}
80% {
top: 325px;
opacity: 0;
z-index: 0;
}
81% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-moz-keyframes cycle5 {
0% {
top: -325px;
opacity: 0;
}
76% {
top: -325px;
opacity: 0;
}
80% {
top: 0px;
opacity: 1;
}
84% {
top: 0px;
opacity: 1;
}
96% {
top: 0px;
opacity: 1;
z-index: 0;
}
100% {
top: 325px;
opacity: 0;
z-index: 0;
}
}
#-webkit-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
50% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
#-webkit-keyframes cycle2 {
0% {
top: -325px;
opacity: 0;
}
16% {
top: -325px;
opacity: 0;
}
20% {
top: 0px;
opacity: 1;
}
24% {
top: 0px;
opacity: 1;
}
36% {
top: 0px;
opacity: 1;
z-index: 0;
}
40% {
top: 325px;
opacity: 0;
z-index: 0;
}
41% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-webkit-keyframes cycle3 {
0% {
top: -325px;
opacity: 0;
}
36% {
top: -325px;
opacity: 0;
}
40% {
top: 0px;
opacity: 1;
}
44% {
top: 0px;
opacity: 1;
}
56% {
top: 0px;
opacity: 1;
z-index: 0;
}
60% {
top: 325px;
opacity: 0;
z-index: 0;
}
61% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-webkit-keyframes cycle4 {
0% {
top: -325px;
opacity: 0;
}
56% {
top: -325px;
opacity: 0;
}
60% {
top: 0px;
opacity: 1;
}
64% {
top: 0px;
opacity: 1;
}
76% {
top: 0px;
opacity: 1;
z-index: 0;
}
80% {
top: 325px;
opacity: 0;
z-index: 0;
}
81% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#-webkit-keyframes cycle5 {
0% {
top: -325px;
opacity: 0;
}
76% {
top: -325px;
opacity: 0;
}
80% {
top: 0px;
opacity: 1;
}
84% {
top: 0px;
opacity: 1;
}
96% {
top: 0px;
opacity: 1;
z-index: 0;
}
100% {
top: 325px;
opacity: 0;
z-index: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<meta charset='utf-8' />
<title>
infinite loop carousel(vertical)
</title>
<style>
</style>
</head>
<body>
<p class="leftText">review</p>
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">PDF's</div>
</li>
<li class="anim2">
<div class="quote">Prints</div>
</li>
<li class="anim3">
<div class="quote">Pictures</div>
</li>
<li class="anim4">
<div class="quote">colors</div>
</li>
<li class="anim5">
<div class="quote">testtest</div>
</li>
</ul>
</div>
</div>
</div>
</span></p>
</body>
</html>