Jump to content
carcleo

Posicionamento de div sobre Slideshow

Recommended Posts

carcleo

Bom Dia!

Tenho a seguinte página

<!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>

Tudo funciona corretamente com exceção do posicionamento da logo e da ul  que rodam sobre o Slideshow que não estou conseguindo posiciona-los sobre o 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>

Onde estou errando?

Esse código pode ser visto em :

http://funerariasaopedro.net.br/novo/

 

Na página, se derem um ctr+a, poderão notar no canto direito e abaixo do slide,  a ul rodando normalmente. Porém a posição correta dela é no meio do slide e ao centro.

 

Com relação à logomarca que está escondida atrás do slide, sua posição é acima do slide e acima da ul

Edited by carcleo

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.