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

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?