Qual é a maneira correta de criar um efeito de cross-fade?

5

Ao criar um controle deslizante de imagem, usar um fade cruzado é um dos efeitos mais populares. Vários controles deslizantes usam técnicas diferentes para criar esse efeito. As principais técnicas que encontrei até agora são:

  • Método 1: Use uma sobreposição e um underlay <div> e aumente e diminua um do outro em visibility .
  • Método 2: Crie um <div> correspondente ao tamanho exato do controle deslizante durante a inicialização, reproduza com sua propriedade z-index e, em seguida, desvanece-se.

Usando method-1 , é necessário criar dois elementos de bloco desnecessários e sobre explorados com mais frequência div . Primeiro, a propriedade background é aplicada ao div underlayed, em seguida, o overlayed-div é esmaecido e subsequentemente alterado na propriedade z-index para ser posicionado abaixo daquele outro.

Usando method-2 , ele cria apenas um div extra e agora o plano de fundo do contêiner é alterado e a div de sobreposição é desbotada. Implementar este efeito agora limita o efeito de transição que pode ser construído (mas esta não é a questão em questão ).

A razão pela qual eu acredito que isso poderia ser melhor é porque elementos extras sempre terão que ser adicionados para dar o efeito. Por esse motivo, a criação de efeitos como o de nivo-slider exige a criação de mais de 12 a 15 divs para dar o efeito.

Adicionar o número de elementos para criar o elemento não parece ser o caminho certo.

Os métodos que mencionei acima usaram muito, porque não existem outras maneiras? Tem que haver maneiras melhores de criar o efeito de cross-fade.

Então, minha pergunta é simples Existe uma maneira melhor de criar esse efeito? Se sim, quais são eles?

    
por Starx 11.10.2012 / 08:30
fonte

1 resposta

1

A verdade é que a web não foi projetada para isso. Não foi projetado para 90% do que faz hoje. Hacks e desenvolvimento web estão intimamente ligados. A melhor solução é quase sempre aquela que funciona.

A web está se movendo para padronizar a natureza dinâmica do que já está lá fora (HTML5, tela no seu caso, como o thorston mencionou), mas ainda não está lá e não será por muito tempo.

Existe uma maneira melhor de criar esse efeito? Sim, um software de edição de vídeo seria muito superior e mais fácil para o que você está tentando fazer. Mas você está tentando fazer um site não um vídeo, embora com propriedades análogas ao vídeo, então não é verdade. Vá com o que funciona, mesmo que não seja 100% intuitivo.

    
por 12.10.2012 / 17:45
fonte