Jump to content
Carcleo

Efeito parallax funciona no modelo mas não quando aplicado ao site

Recommended Posts

Pessoal, bom dia!

 

Tenho o código abaixo que faz um efeito de parallax e está funcionando normalmente

CSS

#top {
    background: url("img/1.jpg");
    height: 300px;
}
#mid {
    background: url("img/2.jpg");
    height: 400px;
}
#bot {
    background: url("img/3.jpg");
    height: 500px;
}

HTML

<script type="text/javascript" src="jquery.js"></script>  

<body>

  <div id="top" class="prlx"></div>

  <div id="mid" class="prlx"></div>

  <div id="bot" class="prlx"></div>

</body>

 JQUERY

$('.prlx').each(function() {
  
    var obj = $(this);
  
    obj.css('background-position', 0);
    obj.css('background-attachment', 'fixed');
    
  $(window).scroll(function() {
    var offset = obj.offset();
    var yPos = -($(window).scrollTop() - offset.top) / 10;
    var bgpos = '50% ' + yPos + 'px';
    obj.css('background-position', bgpos);
  });
  
});

Fui aplicar no meu site 

 

https://acweb.net.br/

 

e o efeito parallax não funcionou embora no inspector dá para ver os cálculos sendo feitos e adicionado às sections

 

Alguém me ajuda a descobrir onde errei?

 

Já estou faz um tempão e não acho!

 

As sections afetadas são as que começam com os textos

 

Fazemos todo o trabalho por você e contato

Share this post


Link to post
Share on other sites

Consegui. Segue para alguém que queira usar!
Mudanças apenas no jQuery e Css

CSS

#detalhes {
    background-image: url("img/1.jpg") !important;
    height: 300px;
}
#contato {
    background-image: url("img/2.jpg") !important;
    height: 400px;
}

HTML:

<script type="text/javascript" src="jquery.js"></script>	

<div id="detalhes" class="prlx"></div>

<div id="contato" class="prlx"></div>

JQUERY

$('.prlx').each(function() {
	
    var obj = $(this);
	
    obj.css('background-position', '50% 0');
    obj.css('background-attachment', 'fixed');
    
	$(window).scroll(function() {
		
		var offset = obj.offset();
		var yPos = -($(window).scrollTop() - offset.top) / 10;
		var bgpos = obj.css('background-position-x') + ' ' + yPos + 'px';
		obj.css('background-position', bgpos);
		
	});
	
});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By BiancaNunes
      Boa noite.
      Segui os passos de um dos posts daqui, mas não tem opções para fazer mais perguntas por lá, pois o tópico foi arquivado.
      https://forum.imasters.com.br/topic/425852-carregar-p%C3%A1gina-em-div-com-jquery/
       
      Seguinte, tudo funcionou direitinho, entretanto, quando vou salvar os dados dos campos da página que foi carrega dentro da div, em vez de a div manter a página aberta, a página é apagada de dentro da div.
      Alguma solução?
      Desde já agradeço.
    • By BiancaNunes
      Boa noite.
      Segui os passos de um dos posts daqui, mas não tem opções para fazer mais perguntas por lá, pois o tópico foi arquivado.
      https://forum.imasters.com.br/topic/425852-carregar-p%C3%A1gina-em-div-com-jquery/
       
      Seguinte, tudo funcionou direitinho, entretanto, quando vou salvar os dados dos campos da página que foi carrega dentro da div, em vez de a div manter a página aberta, a página é apagada de dentro da div.
      Alguma solução?
      Desde já agradeço.
    • By biza
      Viva pessoal, 
      Estou tentando  fazer uma consulta em que os parâmetros são enviados através do ajax para o php, até aqui tu esta a correr bem. O problema é quando tento resgatar a resposta através do "console.log" é me devolvido "undefined", será que alguém me pode auxiliar com esse pequeno problema?! Em baixo segue o essencial do código do ajax e php.
      AJAX
      $.ajax({ type: 'POST', url:'index2.php?adm='+$pag, data:{send: 1, opt: $option}, //dataType:'json', success: function(result){ console.log(result); } }); PHP
      $data = array(); /*USER OPTION REQUEST*/ if (isset($_POST['send'])){ switch($_POST['opt']){ ... case 3: /*ERASE SELECTED ITEMS*/ $data = array('status'=>'OK'); echo json_encode($data); die; break; } } Supostamente se no console.log adiciona-se "result.status" deveria obter "OK", mas em vez disso obtenho undefined. Caso execute o código da forma que esta obtenho como resultado
      {"status":"OK"}
    • By biza
      Viva pessoal, 
      Estou tentando  fazer uma consulta em que os parâmetros são enviados através do ajax para o php, até aqui tu esta a correr bem. O problema é quando tento resgatar a resposta através do "console.log" é me devolvido "undefined", será que alguém me pode auxiliar com esse pequeno problema?! Em baixo segue o essencial do código do ajax e php.
      AJAX
      $.ajax({ type: 'POST', url:'index2.php?adm='+$pag, data:{send: 1, opt: $option}, //dataType:'json', success: function(result){ console.log(result); } }); PHP
      $data = array(); /*USER OPTION REQUEST*/ if (isset($_POST['send'])){ switch($_POST['opt']){ ... case 3: /*ERASE SELECTED ITEMS*/ $data = array('status'=>'OK'); echo json_encode($data); die; break; } } Supostamente se no console.log adiciona-se "result.status" deveria obter "OK", mas em vez disso obtenho undefined. Caso execute o código da forma que esta obtenho como resultado
      {"status":"OK"}
    • By mateus.andriollo
      Qual seria a forma correta de projetar uma aplicação multi formulários. Estou fazendo ela em Jquery com Load() mas algumas ações não são executadas em script.
      Me pergunto seria o correto?
       
      Exemplo: pensando um cadastro de clientes/empresas
      - clientes.php (formulário de cadastro/edição/anexos)
      - empresas.php (formulários de cadastro de empresa/ funcionários/ setores)
      - relatorios.php (clientes e empresas)
       
      Cada página dessa eu chamo, ela vem sempre com o seu conteúdo...
      Pensei no seguinte, todos estea formulários carregados e eu apenas usar função Get() para preencher campos e gerar os relatórios.
       
      Fica a dúvida, pois hj essas páginas extras são HTML com form e ações PHP
       
       
       
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.