É bastante comum, para web sites dos mais diversos gêneros, o uso de citações de pessoas ou trechos de livros para corroborar determinado artigo ou, simplesmente, reforçar as mensagens e conteúdos, em geral, apresentados neste site. Outra situação bem comum é empresas usarem boas citações de seus clientes no site para corroborar a qualidade de produtos e/ou serviços.
Em (X)HTML, existe uma tags específicas para isso, sendo a mais conhecia a blockquote, que, semanticamente, foi projetada para a exibição de citações de pessoas e/ou publicações em páginas (X)HTML. Mas, às vezes, uma apresentação “crua” dessas citações não é o suficiente, e é neste ponto que entra o Quovolver!
O Quovolver interpreta um set de blockquotes e os apresenta de maneira mais elegante e sofisticada, alternando cada um deles e adaptando seu “container” para os respectivos tamanhos. Realmente algo bonito de se ver! E, como não poderia deixar de ser, é muito, muito simples de ser usado!
Usando Quovolver
Em primeiro lugar, faça o download do Quovolver (no momento da escrita deste artigo, está na versão 1.0). Você vai receber um arquivo compactado com 4 arquivos dentro:
- index.html
- jquery.quovolver.js
- readme.txt
- style.css
O único realmente essencial é “jquery.quovolver.js”, já que os outros são somente para exemplo, explicações e estilização (que, para o uso em sites “de verdade”, deve seguir a “linha visual” de onde o Quovolver será usado).
Então, para começar, é preciso chamar o jQuery juntamente com o arquivo js do Quovolver (usando sua própria estrutura de pastas, claro):
Obviamente, é preciso ter um set de blockquotes para que o plugin funcione corretamente (é para isso que ele serve, certo?), então, em seu (X)HTML, deve existir uma estrutura, mais ou menos, assim:
Então, basta 1 linha para ativar o Quovolver (depois de iniciar o jQuery):
$('blockquote').quovolver();
Pronto! As citações serão alternadas de tempos em tempos e o “box” que as envolve se adaptará dinamicamente a cada tamanho!
Uma dica é, quando for mexer no CSS para adaptar as citações dinâmicas, deixe a largura dos elementos de citação com largura fixa, especificando algum valor para a propriedade “width”. Isso garante que a animação ocorra somente no sentido vertical.
Opções do Quovolver
O Quovolver tem somente 2 opções:
- speed. Velocidade da animação em milissegundos (padrão “500”)
- duration. Tempo, em milissegundos, antes de trocar de citação (padrão “6000”)
Então, se fosse preciso ativar o Quovolver com velocidade de animação de 350 milissegundos e cada citação ficar disponível para leitura durante 5 segundos, o código seria:
$('blockquote').quovolver(350, 5000);
Conclusão sobre o Quovolver
Obviamente que nem todo site precisa de uma apresentação tão elegante e sofisticada de citações. Entretanto, utilizar o Quovolver para tal função, certamente é um diferencial!
Utilize o Quovolver com sabedoria e faça das citações uma arte!
