Trocar imagem após rolagem

[Diego Engel 0]

Fala ae galera, tudo bem??

Estou montando um site usando Parallax Scroll (aquela técnica de velocidade de scroll diferente para os elementos da página) e decidi deixar o menu fixo no topo. Até ai td bem, porém eu quero fazer com que a imagem que fica no topo, junto ao menu, seja substituída por outra após rolar a tela.

Depois de muito pesquisar na internet cheguei uma solução usando Jquery para substituição de uma classe css.

<script>
jQuery("document").ready(function($){
 
    var nav = $('.imgright');
 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 700) {
            nav.addClass("imgrightchange");
        } else {
            nav.removeClass("imgrightchange");
        }
    });
 
}); 
</script>

Em cima disso criei duas classes com as imagens que eu queria trocar como background...

.imgright{
	background: url(itau_small.jpg) no-repeat;
	position:absolute;
	top:0px;
	right:0px;
	margin:0px auto 0px auto;	
	width:123px;
	height:123px;
}
.imgrightchange{
	background: url(testes_small.jpg) no-repeat;
	position:absolute;
	top:0px;
	right:0px;
	margin:0px auto 0px auto;	
	width:123px;
	height:123px;
}

 

Com isso, consegui chegar no que eu queria, porém ficou feia a troca das imagens.

 

O ponto agora é:

• Existe uma forma melhor pra fazer isso que eu quero?
• Como eu faço pra deixar essa transição das imagens mais suave? Com efeito de fade in/out talvez?

Desde já.. valeu pela ajuda !!!

[fabricioserralvo 5]

Acho que você poderia usar o parallax.js:

 

http://tableless.com.br/parallax-scrolling/#.Uo9IxqrR06I

 

Abraços