Rotate Effect & Agile Style Image Gallery

Este slider exclusivamente CSS carrega de forma rápida e é completamente responsivo. Ele permite ao utilizador efectuar gestos "tocar e deslizar" para navegar através do slide, tornando-o ideal para pessoas que mexem num telemóvel pela primeira vez. A aparência geral é limpa e fresca, mas com algumas peculiaridades interessantes. O slider usa um esquema de cores branco e laranja.

A demonstração não tem borda e tem um formato bastante quadrado. A forma quadrada significa que a apresentação de slides é muito flexível, e pode ser usada com uma vasta gama de fotografias.

Passar o rato sobre a imagem do slide exibe duas setas de navegação de cada lado, e um ícone de pausa /play no centro. As setas de navegação são brancas com pontas tipo seta dentro de um círculo laranja, e o ícone de play/pausa também é branco dentro de um círculo laranja. Estes ícones 'giram' ao aparecer e se você deixar de ter o rato sobre o slider eles giram e desaparecem.

Se o utilizador passar o rato sobre os ícones, eles ganham uma segunda borda laranja em volta do círculo laranja, criando um efeito de 'duplo círculo'. As setas de navegação mexem-se para trás e para a frente, incentivando o utilizador a clicar nelas. Clicar nas setas permite-lhe ir para trás e para a frente ao longo das imagens.

Clicar no botão de 'pausa' irá fazer com que o slider não exiba a imagem seguinte e mudará o ícone para um símbolo de 'play'. Clicar no símbolo de reprodução reiniciará a apresentação novamente.

A legenda fica no canto inferior esquerdo e usa um tipo de letra sem serifas chamada 'Lato'. O texto é branco, e tem um fundo laranja. Existe tanto um título como um subtítulo, e ambos têm fundos retangulares separados com cantos arredondados que se combinam para criar uma nova forma. Estas legendas são ampliadas lentamente, uma atrás da outra, o que lhes confere uma sensação muito orgânica.

Na parte inferior do slide estão um conjunto de círculos alaranjados, que representam as imagens da apresentação de slides. O círculo que representa a imagem atual ganha uma borda laranja que cria um efeito de 'duplo círculo’. Um toque agradável é que o segundo círculo está ligeiramente torto. É uma característica de design subtil, mas ajuda a que se sinta que o design é bastante orgânico.

Quando o utilizador passa o rato sobre um círculo, uma imagem de pré-visualização numa moldura laranja é lentamente ampliada. Estas imagens de visualização permitem que o utilizador veja os outros slides que estão a surgir, e selecione um para carregar.

O efeito de transição padrão é ‘rotate’, o qual gira e amplia uma imagem nova que entra e gira e reduz até desaparecer uma imagem ao fazê-la sair. É limpo e moderno na sensação, mas com muito movimento.

O design é moderno e divertido, e iria funcionar bem numa ampla gama de websites. O design exclusivamente CSS responsivo, torna-o perfeito para sites otimizados para telemóveis, por isso é ótimo para empresas que precisam de dar informações e vender os seus serviços a pessoas em movimento - tais como sites de transportes públicos, sites de compras de 'última hora' e websites de turismo.