Pessoal, não tenho certeza se coloco a dúvida aqui ou no html. Envolve os dois.
Eu tenho um site muito antigo, php 5.2, e resolvi mudar a página principal colocando um efeito parallax.
No servidor local o site roda normalmente, mas no servidor da localweb as imagens do parallax não aparecem.
a página mostrada é esta:
<div class="container-fluid">
<!-- começo do parallax -->
<div class="caixa1">
<div class="conteudo-titulo">
<!-- <span class="titulo">TECNOCLEAN - SEGURANÇA E EFICIÊNCIA</span> -->
</div>
</div>
<div class="conteudo">
<h3>A EMPRESA</h3>
<p style="width: 80%; margin: auto; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida dolor sed mattis mollis. Morbi sodales euismod rhoncus. Suspendisse potenti. Integer hendrerit vitae lectus at feugiat. Quisque libero neque, imperdiet a est congue, elementum ultrices diam. Sed ut felis scelerisque, volutpat justo ut, congue quam. Ut non vestibulum erat, vel semper dolor. Nulla facilisi. Sed convallis at lacus quis venenatis..<br>
</p>
</div>
<div class="caixa2">
<div class="conteudo-titulo" >
<!-- <span class="titulo">NOSSO DIFERENCIAL</span> -->
</div>
</div>
<div >
<div>
<ul class="list-group list-group-flush text-center font-weight-bold">
<li class="list-group-item"><h3>Tradição</h3> 26 anos de experiência</li>
<li class="list-group-item"><h3>Confiabilidade</h3> mais de mil clientes</li>
<li class="list-group-item"><h3>Segurança</h3> técnica e equipamentos</li>
<li class="list-group-item"><h3>Garantia</h3> produtos de qualidade</li>
<li class="list-group-item"><h3>Rapidez</h3> equipe especializada</li>
</ul>
</div>
</div>
<div class="caixa3">
<div class="conteudo-titulo">
<!-- <span class="titulo">CLIENTES</span> -->
</div>
</div>
<div class="caixa4">
<div class="conteudo-titulo">
<!-- <span class="titulo">EQUIPAMENTOS</span> -->
</div>
</div>
</div>
</div>
</div>
O Css é este:
/* Efeito Parallax
-------------------------------*/
.caixa1, .caixa2, .caixa3, .caixa4 {
position: relative;
height: 100%;
opacity: 0.9;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.caixa1 {
background-image:url(../imagens/principal.png);
}
.caixa2 {
background-image: url(../imagens/insetos.png);
}
.caixa3 {
background-image: url(../imagens/logos/clientes.png);
}
.caixa4 {
background-image: url(../imagens/equipamentos.png);
}
.conteudo-titulo {
position: absolute;
left: 0;
top: 45%;
width: 100%;
text-align: center;
}
.conteudo-titulo span.titulo {
color: #fff;
background-color: #111;
padding: 18px;
font-size: 25px;
letter-spacing: 5px;
text-transform: uppercase;
}
Coloquei o arquivo com a estrutura do site e o erro que aparece na url. (um css que não deveria aparecer e dá página não encontrada)
Coisa interessante: tanto faz colocar ../imagens/foto.png ou imagens/foto.png e funciona no local e não no servidor.
Se alguém tiver alguma dica para eu resolver ou testar este erro, agradeço.
Bom dia , estou criando uma pagina (que não será formulário) que irá ler um banco, estou começando a utilizar CSS e gostaria de saber como faço para colocar para colocar os campo ao lado do outro.
Olá,
Estou desenvolvendo um sistema que utiliza parallax, mas quando add o google maps javascript api, o parallax para de funcionar.
Segue abaixo os códigos que estou utilizando:
Javascript:
jQuery(".parallax").each(function(){
var $obj = jQuery("this");
jQuery(window).scroll(function(){
var posY = -(jQuery(window).scrollTop() / $obj.data("speed"));
var posB = "0 "+ posY + " px";
$obj.css("background-position", posB);
});
});
CSS:
.parallax{
color: #FFF;
width: 100%;
min-height: 100%;
background-attachment: fixed;
}
HTML:
<div class="parallax" data-speed="0.1">
<div id="mapa"></div>
</div>
Google Maps API:
function initialize(){
var myLatlng = new google.maps.LatLng(-27.548111, -48.498645);
var mapOptions = {
zoom: 17,
center: myLatlng,
panControl: false,
zoomControl: false,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles
}
var map = new google.maps.Map(document.getElementById("mapa"), mapOptions);
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function(){
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
var image = 'images/logo.png';
var beachMarker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image
});
}
Tem alguma coisa errada ou que devo acrescentar para funcionar?
Agradeço desde já.