So, I have the following page:
On computers, they work fine at any resolution. This is logical, using those plugins that reduce the resolutions of browsers.
Tested on Firefox, Chrome and Edge.
IE 10 logo does not reduce dimensions when in resolution less than 1024px .
But the biggest problem is in mobiles, Android and Windows Phone.
In both Chrome and Internet Explorer : Error in slide . That is, the ampule rotates below the div of the slide and the imagem da logo does not reduce the dimensions .
Where am I?
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>
Styles.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 */
}
Styles.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();
});
Where am I going wrong?