I have the following page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="_css/aos.css">
<link rel="stylesheet" type="text/css" href="_css/jquery.cycle2.css">
<script type="text/javascript" src="_js/jquery.js"></script>
<script type="text/javascript" src="_js/jquery.cycle2.min.js"></script>
<style>
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
* {
font-family: 'Open Sans';
margin: 0;
padding: 0;
box-sizing: content-box;
}
img {
border: 0;
max-width: 100%;
}
ul {
list-style: none;
}
ul li {
display: inline;
}
.aos-all {
width: 1000px;
max-width: 98%;
margin: 10vh auto 0 auto;
}
.aos-item {
display: inline-block;
float: left;
width: 40%;
height: 300px;
padding: 20px;
}
.aos-item__inner {
position: relative;
width: 100%;
height: 100%;
float: left;
background: #1da4e2;
line-height: 260px;
text-align: center;
color: #fff;
}
@media screen and (max-width: 800px) {
.aos-item {
width: 50%;
}
}
.logo {
width : 432px;
-webkit-animation : logo-anim 1s;
-moz-animation : logo-anim 1s;
-o-animation : logo-anim 1s;
animation : logo-anim 1s;
}
@-webkit-keyframes logo-anim {
0% {
opacity : 0;
transform : translateY(-50px);
-webkit-transform : translateY(-50px);
-moz-transform : translateY(-50px);
-o-transform : translateY(-50px);
-ms-transform : translateY(-50px);
}
100% {
opacity : 1;
transform : translateY(0px);
-webkit-transform : translateY(0px);
-moz-transform : translateY(0px);
-o-transform : translateY(0px);
-ms-transform : translateY(0px);
}
}
@-moz-keyframes logo-anim {
0% {
opacity : 0;
transform : translateY(-50px);
-webkit-transform : translateY(-50px);
-moz-transform : translateY(-50px);
-o-transform : translateY(-50px);
-ms-transform : translateY(-50px);
}
100% {
opacity : 1;
transform : translateY(0px);
-webkit-transform : translateY(0px);
-moz-transform : translateY(0px);
-o-transform : translateY(0px);
-ms-transform : translateY(0px);
}
}
@-o-keyframes logo-anim {
0% {
opacity : 0;
transform : translateY(-50px);
-webkit-transform : translateY(-50px);
-moz-transform : translateY(-50px);
-o-transform : translateY(-50px);
-ms-transform : translateY(-50px);
}
100% {
opacity : 1;
transform : translateY(0px);
-webkit-transform : translateY(0px);
-moz-transform : translateY(0px);
-o-transform : translateY(0px);
-ms-transform : translateY(0px);
}
}
@keyframes logo-anim {
0% {
opacity : 0;
transform : translateY(-50px);
-webkit-transform : translateY(-50px);
-moz-transform : translateY(-50px);
-o-transform : translateY(-50px);
-ms-transform : translateY(-50px);
}
100% {
opacity : 1;
transform : translateY(0px);
-webkit-transform : translateY(0px);
-moz-transform : translateY(0px);
-o-transform : translateY(0px);
-ms-transform : translateY(0px);
}
}
.logo-atividades {
position : absolute;
top : 0;
center : 0;
width : 100%;
height : 500px;
text-align : center;
overflow : hidden;
z-index : 20;
}
.atividades {
color : #FFF;
height : 115px;
overflow : hidden;
position : absolute;
top : 80%;
margin-top : -176px;
width : 100%;
pointer-events : none;
text-align : center;
z-index : 10;
}
.atividades a {
text-decoration : none;
}
.atividades ul {
list-style : none;
padding : 0;
margin : 10px 0 0;
position : relative;
height : 100px;
font-size : 36px;
font-weight : 300;
text-align : center;
font-family : 'Lato', sans-serif;
letter-spacing : 5px;
text-transform : uppercase;
z-index : 100;
}
.atividades ul li {
width : 100%;
text-align : center;
position : absolute;
opacity : 0;
top : 85px;
line-height : 100px;
-webkit-transition : all 0.5s ease-in-out;
-moz-transition : all 0.5s ease-in-out;
-o-transition : all 0.5s ease-in-out;
transition : all 0.5s ease-in-out;
transition-timing-function : ease;
-webkit-transition-timing-function : ease; /* Safari and Chrome */
}
.atividades ul li.ativa {
opacity : 1;
top : 0;
-webkit-transition : all 1s ease-in-out;
-moz-transition : all 1s ease-in-out;
-o-transition : all 1s ease-in-out;
transition : all 1s ease-in-out;
transition-timing-function : ease;
-webkit-transition-timing-function : ease; /* Safari and Chrome */
}
}
</style>
</head>
<body>
<div class="cycle-slideshow"
data-cycle-fx=fadeout
data-cycle-timeout=5000
data-cycle-pause-on-hover="true"
data-cycle-slides="div.slide">
<div class="logo-atividades">
<div style="margin-top: 100px;">
<a href="http://www.funerariasaopedro.net.br">
<img class="logo" src="_img/logoFuneraria.png" alt="Logo"/>
</a>
<div class="atividades">
<ul>
<li class="ativa">Agência Funerária</li>
<li>Funerais</li>
<li>Cremações</li>
<li>Trasladações</li>
<li>Tanatopraxias</li>
<li>Exumações</li>
<li>Artigos Religiosos</li>
<li>Atendimento 24h</li>
</ul>
</div>
</div>
</div>
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<div class="cycle-pager"></div>
<div class="slide"> <img src="_img/_banner/_site/1.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/2.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/3.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/4.png" /> </div>
</div>
<div class="aos-item" data-aos="fade-right">
<div class="aos-item__inner">
<h3>Esquerda</h3>
</div>
</div>
<div class="aos-item" data-aos="fade-left">
<div class="aos-item__inner">
<h3>Direita</h3>
</div>
</div>
<div class="aos-item" data-aos="fade-up">
<div class="aos-item__inner">
<h3>Baixo Cima</h3>
</div>
</div>
<div class="aos-item" data-aos="fade-down">
<div class="aos-item__inner">
<h3>Cima Baixo</h3>
</div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner">
<h3>Baixo Cima</h3>
</div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner">
<h3>Cima Baixo</h3>
</div>
</div>
<script>
function homeTitleAnimation(){
var interval;
var counter = 1;
var myFunc = function() {
var cur = $('.atividades ul li').length;
if(cur == counter) {
$('.atividades ul li.ativa').removeClass('ativa');
$('.atividades ul li').first().addClass('ativa');
counter = 1;
} else {
counter++;
$('.atividades ul li.ativa').removeClass('ativa').next().addClass('ativa');
}
};
interval = setInterval(myFunc, 4000);
}
homeTitleAnimation();
</script>
<script src="_js/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-out-sine'
});
</script>
</body>
</html>
Everything works correctly except for the positioning of the logo and ul that run on the Slideshow that I'm not able to position them on Slideshow .
<div class="cycle-slideshow"
data-cycle-fx=fadeout
data-cycle-timeout=5000
data-cycle-pause-on-hover="true"
data-cycle-slides="div.slide">
<div class="logo-atividades">
<div style="margin-top: 100px;">
<a href="http://www.funerariasaopedro.net.br">
<img class="logo" src="_img/logoFuneraria.png" alt="Logo"/>
</a>
<div class="atividades">
<ul>
<li class="ativa">Agência Funerária</li>
<li>Funerais</li>
<li>Cremações</li>
<li>Trasladações</li>
<li>Tanatopraxias</li>
<li>Exumações</li>
<li>Artigos Religiosos</li>
<li>Atendimento 24h</li>
</ul>
</div>
</div>
</div>
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<div class="cycle-pager"></div>
<div class="slide"> <img src="_img/_banner/_site/1.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/2.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/3.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/4.png" /> </div>
</div>
Where am I going wrong?
This code can be seen at:
On the page, if you give a ctr + a , you may notice in the right corner below the slide / strong> running normally. But her correct position is in the middle of the slide and center.
With regard to the logo that is hidden behind the slide, its position is above the slide and above the ul