1

Então, tenho a seguinte página:

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

Nos computadores rodam bem em qualquer resolução. Isso, lógico, usando aqueles plugins que reduzem as resoluções dos browsers.

Testado no Firefox, Chrome e no Edge.

No IE 10 a logomarca não reduz as dimensões quando em uma resolução menor que 1024px .

Mas o problema maior é nos mobiles, Androide e Windows Phone.

Tanto no Chrome e no Internet Explorer: Dão erro no slide. Isto é, a ampuleta gira abaixo da div do slide e a imagem da logo não reduz as dimensões.

Onde estou erando?

Html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="_css/estilos.css" />
<link rel="stylesheet" href="_css/slide.css" />
<link rel="stylesheet" href="_css/aos.css">
<link rel="stylesheet" href="_css/aosEstilo.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/slide.js"></script>
<script type="text/javascript" src="_js/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="_js/aos.js"></script>
<script>
  $(document).ready(function(e) {
    AOS.init({
      easing: 'ease-in-out-sine'
    });  
  });
</script>
</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"> <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>

  <!-- 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/bg_1.jpg" /> </div>
  <div class="slide"> <img  src="_img/_banner/_site/bg_2.jpg" /> </div>
  <div class="slide"> <img  src="_img/_banner/_site/bg_3.jpg" /> </div>
  <div class="slide"> <img  src="_img/_banner/_site/bg_4.jpg" /> </div>
  <div class="slide"> <img  src="_img/_banner/_site/bg_5.jpg" /> </div>
  <div class="slide"> <img  src="_img/_banner/_site/bg_6.jpg" /> </div>
  <div class="slide"> <img  src="_img/_banner/_site/bg_7.jpg" /> </div>
  <div class="slide"> <img  src="_img/_banner/_site/bg_8.jpg" /> </div>
  <div class="slide"> <img  src="_img/_banner/_site/bg_9.jpg" /> </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>Fade In</h3>
  </div>
</div>
<div class="aos-item" data-aos="fade-out">
  <div class="aos-item__inner">
    <h3>Fade Out</h3>
  </div>
</div>
<div class="base"></div>
<div class="final"></div>
</body>
</html>

Estilos.css

@charset "utf-8";
/* CSS Document */
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
* {
    font-family: 'Open Sans';
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}
body {
    width:100%;
    text-align:center;
    background-color:#f3f9fd;
}
img {
    border: 0;
    max-width: 100%;
}
ul {
    list-style: none;
}
ul li {
    display: inline;
}

slide.css

@charset "utf-8";
/* CSS Document */
.cycle-slideshow .logo-atividades {
    position: absolute;
    top: 0;
    left: 50%;
    max-width: 500px;
    height: 100%;
    text-align: center;
    overflow: hidden;
    z-index: 999;
    transform: translateX(-50%);
}
.cycle-slideshow .logo-atividades a{
    height:45%;
}
.cycle-slideshow .logo-atividades img.logo {
    -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);
}
}

.cycle-slideshow .logo-atividades .atividades {
    position: absolute;
    top: 50%; /* aqui vc controla a altura da UL de acordo com a largura da tela*/
    width: 100%;
    height: 45%;
    overflow: hidden;
    pointer-events: none;
    text-align: center;
    z-index: 10;
    color: #FFF;
}
.cycle-slideshow .logo-atividades .atividades ul {
    list-style : none;
    padding : 0;
    margin : 10px 0 0;
    position : relative;
    height : 100%;
    text-align : center;
    font-family : 'Lato', sans-serif;
    letter-spacing : 5px;
    text-transform : uppercase;
    z-index : 100;
}
.cycle-slideshow .logo-atividades .atividades ul li {
    width : 100%;
    text-align : center;
    position : absolute;
    opacity : 0;
    top : 85px;
    left: 0;
    font-size : 3vw;
    line-height : 100%;
    font-weight : 100%;
    -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 */
}
.cycle-slideshow .logo-atividades .atividades ul li.ativa {
    text-decoration : none;
    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 */
}

aosEstilos.css

@charset "utf-8";
/* CSS Document */
.aos-item {
    display: inline-block;
    float: left;
    width: 50%;
    height: 300px;
    box-sizing: border-box;
    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: 1023px) {
.aos-item {
    width: 100%;
    height:auto;
}
}

slide.js

// JavaScript Document
  $(document).ready(function(e) {

    function animaLis(){
        var interval;
        var counter = 1;
        var anima = 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(anima, 4000);
    }

    animaLis();  

});

Onde estou errando?

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .