Slide Effect & Blast Template Image Slider

Este slider é um slider de largura total, exclusivamente feito em CSS, que é dramático e bonito. Tem a função "tocar e deslizar", o que o torna ideal para tablets e smartphones, e é também muito rápido a carregar.

Uma vez que o slider é de largura total, as imagens têm um impacto máximo, tornando este slider uma ótima escolha para fotógrafos e outras pessoas que querem que o foco no seu site esteja nas imagens.

Existem duas setas de navegação e um botão de pausa/play que aparecem quando o utilizador interage com, ou passa o rato sobre os slides. Eles usam ícones brancos em negrito contra um fundo azul profundo circular. Eles parecem 'cair' na posição certa desvanecendo ao entrar e encolhendo ao sair. É um efeito dramático e atraente, que funciona igualmente bem em sentido inverso, quando os ícones parecem 'ascender' do slider. Tudo isto dá ao design uma sensação tridimensional.

Passar o rato sobre os ícones cria uma borda azul que parece irradiar para fora do círculo central e depois desaparecer. Mais uma vez, é um efeito elegante e dramático que realmente faz com que o design deste slider se destaque.

Os ícones fazem exatamente o que seria de esperar: clicar sobre as setas seguinte /anterior irá levá-lo para os slides aplicáveis, e clicar sobre o botão de play/pausa irá parar a apresentação ou iniciá-la.

O utilizador pode também navegar entre os slides usando os círculos na parte inferior central da tela. Estes círculos são em azul profundo, e cada um representa uma imagem na apresentação de slides. Quando uma nova imagem se move para a janela de exibição, o círculo aplicável ganha uma borda branca em negrito semitransparente que chama a atenção e ajuda o utilizador a entender como funcionam os círculos.

Interagir com os círculos exibe uma imagem de pré-visualização numa moldura azul. Esta imagem de pré-visualização entra e sai da mesma maneira que os outros ícones. Clicar num círculo, carrega então essa imagem para a apresentação de slides.

Cada imagem na apresentação de slides 'desliza' para a próxima, ou para a esquerda ou para a direita, dependendo se é o próximo slide ou o anterior. Ao utilizar os círculos para navegar até uma imagem a dois ou três slides de distância, ou quando a apresentação de slides chega ao "fim" das imagens e volta ao início ele corre de forma rápida por todos os slides. Isto dá-lhe um ar natural e "realista" que é bastante subtil, mas faz com que o slider pareça amigável e orgânico.

A legenda fica no canto inferior esquerdo. Existe um título e um subtítulo, ambos com texto branco num retângulo azul semitransparente. As legendas 'caem' e 'ascendem' do e para o seu lugar da mesma forma que os outros ícones e imagens de visualização. O fundo azul semitransparente permite que as cores da foto por baixo se vejam, e dá à legenda um ar um pouco mais suave.

As legendas usam o tipo de letra Duru Sans, um tipo de letra sem serifas que mistura um design humanista e modernista. O resultado é muito elegante, e dá ao design um ar sofisticado.

Uma vez que não há nada em JQuery, nem javascript e não há imagens, este slider é rápido e funciona em qualquer plataforma. Ele será perfeito para designers que trabalham num projeto relacionado com telemóveis pela primeira vez.