[Resolvido] Javascript slider de conteúdo horizontal

[guga_programador 0]

Oi Pessoal, tudo bem?

 

sou novo aqui no fórum, então, se estiver fazendo alguma pergunta em lugar errado ou sei lá, por favor me avisem hehe.

 

seguinte:

 

eu queria fazer um javascript para um slider de conteúdo, similar a este aqui: http://www.charliegentle.co.uk/ porém, ao fazer a transição de conteúdo, eu queria que ele ficasse tipo um fade (como se fosse um motion blur, sabe?)

 

alguém teria alguma luz de como fazer? ou algum site com exemplos ou alguma coisa assim?

 

abraços

 

tipo (estou viajando aqui) mas e se eu carregasse pelo mesmo tempo da transição uma imagem desfocada com transparência, por cima de tudo? será que resolveria?

[guga_programador 0]

só para atualizar, a linguagem que estou usando é esta:

 

var theWidth;
var theHeight;
var currentContent = 0;

$(window).resize(function () {
   sizeContent();
});

$(window).ready(function () {
   sizeContent();
});

function sizeContent() {
   theWidth = $(window).width();
   theHeight = $(window).height();
   sizeContentItems();
   setLeftOnContentItems();
   sizeContentWrapper(theWidth, theHeight);
   moveContent(currentContent, theWidth);
   changeSelected(currentContent);
}

function sizeContentItems() {
   $(".contentItem").css('width', theWidth);
   $(".contentItem").css('height', theHeight);
}

function setLeftOnContentItems() {
   var contentCount = 0;
   $(".contentItem").each(function (i) {
       contentCount += i;
       $(this).css('left', i * theWidth);
   });
}

function sizeContentWrapper(width, height) {
   $("#contentWrapper").css('width', width - 80);
   $("#contentWrapper").css('height', height);
}

function moveContent(i, width) {
   $("#contentWrapper").scrollLeft(i * width);
}

function changeSelected(i) {
   $(".selected").removeClass("selected");
   $("li:eq(" + i + ") a").addClass("selected");
}

function scrollContentNext() {
   scrollContent(currentContent + 1);
}

function scrollContent(i) {
   i = checkMax(i);
   scrollLogo(i);
   scrollTriangle(i);
   changeSelected(i)
   currentContent = i;
   $("#contentWrapper").animate({ scrollLeft: i * theWidth }, 500);
}

function checkMax(i) {
   var maxItems = $("li").length;
   if (i >= maxItems) {
       return 0;
   }
   return i;
}

 

não é minha, estou adaptando de um exemplo que encontrei.

 

aí pensei em utilizar o .blur do jquery, será possível?

 

obrigado pessoal, abraços

[Henrique Barcelos 290]

Blur não é do jQuery, é um evento do próprio Javascript e não tem muito a ver com desfoque, como em softwares de imagem :P.

Leitura recomendada:

:seta: http://henriquebarcelos.in/blog/2011/11/13/eventos-em-javascript/

 

Eu não entendi, o problema é com o slider ou com esse efeito de desfoque que você deseja?

[guga_programador 0]

oi Henrique beleza?

 

obrigado pela ajuda,

 

o slider do conteúdo está funcionando beleza...

 

o que eu queria era que enquanto tivese na transição de uma div para a outra as divs desfocassem, como se estivessem em movimento, entende?

 

eu achei um exemplo de desfoque aqui: http://motyarblog.000space.com/blur_effect_with_css.html

 

o que eu queria era tipo isso, nestes 500 milisegundos, todas as divs desfocassem, dando a ilusão de movimento... entendes?

 

valeu! abraços

[Henrique Barcelos 290]

Com texto é mais fácil... com imagens, creio que só será possível com flash.

Você viu esse efeito em algum outro lugar? Poste aí...

[guga_programador 0]

então, não vi o efeito não =/ hehehe

 

mas como eu vi com o texto, pensei que pudesse ser possível com imagens tb...

 

o que eu pensei era alguma coisa assim:

 

após clicar para passar o slide, um script carregasse uma imagem branca 50% de transparência (e talvez algum efeito no photoshop que desse esta impressão de blur), sobre todo o site, e ao mesmo tempo desse o blur no texto, tudo isso por 500 milisegundos, assim daria a impressão de movimento... será que tem como isso?

[Henrique Barcelos 290]

Só com flash, cara...

[guga_programador 0]

=(

hehehe

 

bom, vlw!

 

mas acho que vou fazer mesmo assim, pois em 500 milisegundos também dá a ilusão de movimento... hehe

 

abraços e obrigado pela ajuda!