Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gilbertjuniors

Efeito Parallax sem usar frameworks

Recommended Posts

Pessoal, boa tarde.

 

Tem como criar o efeito do conteúdo do site passando por cima de uma imagem (efeito parallax, quero a DIV da imagem parada no mesmo lugar)

somente usando HTML, CSS, e JavaScript, ou seja usando apenas os padrões W3C sem usar nenhum framework para isto?

 

Exemplo de site com este efeito 

https://workshops.caelum.com.br/?utm_source=Caelum&utm_campaign=1f3177ad13-Caelum_Janeiro_1_2018&utm_medium=email&utm_term=0_d82864a9f3-1f3177ad13-47303509&mc_cid=1f3177ad13&mc_eid=49d7354f8b

(pra mim o efeito funcionou no Opera)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tem sim!

O sr. vai precisar criar elmentos sobrepostos
Quando a largura do browser estiver a certo tamanho, defina o elmento que "segura" a foto com position:fixed

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por clovis.sardinha
      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.
       
       

       

    • Por cesarhtc
      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.
       
      Obrigado
    • Por Henrique.antonio.buzin
      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á.
    • Por RedHot66
      Pessoal, alguem tem um exemplo ou como posso fazer um site só com classes prontas do bootstrap ?
      Nao sei se é possivel, mas gostaria de saber...
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.