1
So I have the following page:
http://funerariasaopedro.net.br/novo/
Computers run well at any resolution. This, of course, using plugins that reduce browser resolutions.
Tested in Firefox, Chrome and Edge.
In the IE 10 to logo does not reduce the dimensions when in a resolution less than 1024px .
But the biggest problem is on mobiles, Android and Windows Phone.
Both in the Chrome and in the Internet Explorer: Make mistake in the slide. That is, the ampulete spins below the div of slide and the imagem da logo does not reduce the dimensions.
Where I’m growing up?
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>
Css styles.
@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 */
}
aosStyles.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?