Criar thumbnail animado usando CSS Sprites e JQuery

Thumbnails (miniaturas) são uma das peças mais ricas de usabilidade que a era digital criou. Em essência, um thumbnail é uma prévia, uma promessa do que você verá ao clicar no link. Um pequeno vislumbre com menos dados, mais rápido para carregar e exige menos espaço em tela do que o conteúdo a qual ele direciona. Eles são ideais para galerias de imagens, longos conteúdos de texto e principalmente de vídeos?

Para entender mais sobre a possibilidade de criar thumbnails animados, vamos demonstrar exemplos utilizando CSS básico e um pouco de jQuery.

Como Utilizar o CSS Sprites

Definição

CSS Sprite é uma técnica que usa um Sprite para fazer uma “troca de imagem”, ou seja, o deslocamento de posição do mapa de imagem que irá fazer no caso a “animação”. Essa técnica permite que utilizemos várias imagens em uma só, assim economizamos número de requisições no servidor e quantidade de imagens.(Fonte: CSS Sprite – iMasters)

Hoje em dia, as velocidades de download não são um problema para os desenvolvedores web. É claro que os arquivos pequenos são ainda desejáveis, mas o verdadeiro desempenho atingido na maioria dos sites é o número de solicitações HTTP. Cada vez que seu site carrega um asset, o navegador faz uma solicitação HTTP que é enviada, processada e depois volta. Verifique, você verá que a maior parte do atraso em seu site não tem nada a ver com o tamanho da imagem, e sim com a espera de uma resposta do servidor. Portanto, ao utilizar a técnica do SPRITE CSS diminuímos consideravelmente o número de requisições no servidor, otimizando a velocidade do site.

Construindo um thumbnail animado usando imagens

Para construir esse thumbnail, faremos a utilização de um pouco de jQuery, podendo usar a posição do cursor para determinar o pontos de movimentação das imagens ou, mais precisamente, como e quando as imagens irão se interpolar em relação à posição do mouse. Veja o exemplo:

A primeira coisa que precisamos fazer é “costurar” algumas imagens. Eu vou estar ligando para este belo vídeo da Noruega por Fuglefjellet. Capturo 10 quadros-chave de uma seção do que o vídeo que eu gosto e juntou-as em uma única imagem usando o Photoshop. Esse exemplo pode ser feito com outras imagens que possam ser exibidas em sequencia e transmitam um efeito de movimento.

Agora que a imagem está pronta, a segunda coisa que precisamos fazer é criar um arquivo HTML simples, com um link para o vídeo que estamos criando a miniatura:

<a id="preview" href="http://vimeo.com/8736190">Western Norway at sunrise</a>

Em seguida, precisamos importar jQuery no Head da página:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>

Então usaremos o jQuery para definir o tipo de exibição (bloco) a largura (500px para coincidir com a largura de um “quadro” da nossa imagem), a altura (203px) e do fundo do nosso link:

$(document).ready(function() {
    $('#preview')
        .css('display', 'block')
        .css('width', 500)
        .css('height', 203)
        .css('background', 'url("our-image.jpg") no-repeat');
});

Finalmente, é preciso definir o fundo para que a parte correta da nossa imagem é exibida; cada um ‘quadro’ tem 500 pixels de largura, de modo a mostrar o primeiro quadro da posição x da imagem de fundo deve ser 0px, para mostrar a segunda será -500px, o terceiro será -1000px e assim por diante.

Usando uma função de manipulador mousemove, podemos calcular a posição relativa do cursor sobre o elemento em percentagem; subtrair a posição de deslocamento do elemento de pageX do evento (esta trata a extremidade esquerda do elemento como 0), então dividir pela largura do elemento.

Tendo feito isso, calcula-se a posição da imagem de fundo através da multiplicação da percentagem em relação a posição o tamanho total da imagem composta. O resultado final deve ser múltiplo da largura do elemento (500px) para que se divida o resultado por esse valor, arredonde para baixo usando Math.floor(), em seguida, multiplique de volta para anular a divisão; Se não fizermos isso a imagem simplesmente irá rolar 1px de cada vez.

Subtraímos o valor resultante de 0, de modo que todos os valores possíveis fiquem negativos.

Em seguida, aplique o background-position com CSS:

.mousemove(function(e) {
    var elementWidth = 500;
    var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
    var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
    $(this).css('background-position', '-' + bgPosition + 'px 0px');
});

O código completo é apresentado assim:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#preview')
        .css('display', 'block')
        .css('width', 500)
        .css('height', 203)
        .css('background', 'url("landscape.jpg") no-repeat')
        .mousemove(function(e) {
            var elementWidth = 500;
            var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
            var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
            $(this).css('background-position', bgPosition + 'px 0px');
        });
    });
    </script>
</head>
<body>
    <a href="http://vimeo.com/8736190" id="preview">Western Norway at sunrise</a>
</body>
</html>

Conclusão

Algumas coisas devem ser consideradas: em primeiro lugar, seria possível a criação de uma miniatura com centenas de ‘frames’, mas ao mesmo tempo será a animação muito boa, ela também vai levar um longo tempo para carregar; em segundo lugar, a detecção de posição do mouse simplesmente não vai funcionar em um dispositivo touchscreen, portanto, embora esta técnica não vai realmente prejudicar a usabilidade, em um dispositivo móvel que você não está ganhando nada.

A finalidade de um thumbnail é apresentar ao usuário com mais informações sobre o que está na outra extremidade de um link, e quando o recurso que você está ligando é um vídeo, uma imagem única, muitas vezes não há informações suficientes. Estendendo, a técnica do sprite CSS é uma maneira simples e eficaz para visualizar mais do que um único quadro.

O construtor de site do Wime, oferece recursos e possibilidades que vão além dos componentes básicos oferecidos pela plataforma, possibilitando que códigos em HTML, CSS e até mesmo Javascript possam ser incluídos no seu site.