Plugin Efeito em círculos com transição e rotações | RESPONSIVO

Olá turma do bem..


Vocês provavelmente já estão sabendo que foi disponibilizado  no blog Oficial do Webacappella  algo novo sobre o WEBACAPPELLA RESPONSIVE.

Para quem não viu ainda a matéria o link é: http://blogwebacappella.fr/2015/10/07/webacappella-responsive/


Enquanto eles trabalham de lá, nós trabalhamos de ká. (rs)

E por isso hoje vou passar outro plugin bem bacana que também utiliza círculos e rotações em 3D. Conforme você configurar dá pra se usar como menu de redes sociais, menu serviços, ou até mesmo como um menu principal no seu projeto.

Então vamos por a mão na massa, enquanto a versão responsiva do WebAcappella não sai,


Os efeitos com círculos são muito usados ultimamente substituindo a habitual forma retangular.

Lembrando que só funcionará com browser que suportam as respectivas propriedades CSS.

O interessante é que este plugin é responsivo, de forma podermos até aproveitarmos em nosso tema:

Site Responsivo x Versão Mobile

Clique aqui para baixar os arquivos necessários.

Descompacte o arquivo baixado em um local no seu equipamento.

Você precisará editar alguns arquivos. Para isto sugiro usar o NOTEPAD++. Para baixá-lo gratuitamente clique aqui.

Trecho do código para cada círculo:

<li>
 <div class="ch-item"> 
  <div class="ch-info">
   <h3>TITULOINTERIOR</h3>
   <p>SUBTITINTERIOR<a href="URL">TITULOLINK</a></p>
  </div>
  <div class="ch-thumb CSSIMG"></div>
 </div>
</li>

TITULOINTERIOR: O título que vai aparecer dentro do círculo em mouseover
SUTTITINTERIOR:  O subtítulo que vai aparecer dentro do círculo em mouseover
TITULOLINK: A descrição que vai aparecer acionando o redirecionamento
URL: URL a qual será redirecionado ao clicar no link
CSSIMG: É a referência  da imagem conforme configurada no arquivo STYLE3.CSS (logo falaremos dele)

O básico a entender para aplicar cada círculo no WebAcappella é este

O objetivo principal deste blog é servir de uma biblioteca para os amantes do Webacappella. Digo, quando estivermos trabalhando em um projeto, podemos sempre dar uma consultada no blog e procurar algo que venha  a calhar.  Um dos motivos que tento postar de forma frequente.

Vamos ser sinceros, mesmo que não aproveitamos nada no blog, pelo menos ele nos desperta idéias interessantes. Sinceramente falando.

Eu mesmo o consulto muito. Pois penso assim. Em vez de ficar guardando na minha cabeça códigos e mais códigos, aproveito da possibilidade de podê-los registrar em algum local  para consultas e liberar minha mente para outras coisas.

Prosseguindo. Como o blog é uma biblioteca para consultas procuro fazer da forma mais simples e de fácil entendimento.

Diante disso vamos fazer um passo a passo usando exemplos até vermos funcionando em nosso projeto.


1º PASSO | DEFINIR QUANTOS CÍRCULOS USAREMOS NO PROJETO.

No exemplo, aproveitando para criar o site do WebacappellaShow e como será parte da primeira página vou definir 3 círculos:

1º - Será para linkar par o blog
2º - Será para linkar para o Site propriamente dito
3º - Será para linkar para a loja a qual estamos criando no tema PRESTASHOP & WEBACAPPELLA

2º PASSO | CRIAR AS IMAGENS QUE APARECERÃO NA CAPA DE CADA CÍRCULO.

Agora vamos criar as imagens para cada círculo. Serão as imagens que aparecerão no círculo em seu estado normal.  Use um editor de sua preferência.

Procure criar imagens nas dimensões 220 x 220 px .

Então criei as seguintes imagens:

Para o primeiro círculo: cir01.jpg














Para o segundo círculo: cir02.jpg

Para o terceiro círculo:cir03.jpg





Então hospedei em minha hospedagem as imagens,

Como estou criando  um versão do site WebacappellaShow tanto para desktop quanto para celular, hospedei as imagens dentro de public_html/desktop/img.

Mas você pode hospedar onde bem entender. Basta saber pois vai precisar de informar depois a url de cada uma.


3º PASSO | CRIAR A IMAGEM QUE SERÁ A TEXTURA DO FUNDO DE CADA CÍRCULO QUANDO EM MOUSEOVER (quando o mouse passar por cima).

Procure usar as mesmas dimensões usadas nas imagens anteriores.

No caso do exemplo..criei só um quadrado com nosso laranjinha do blog..rs
Esta salve como PNG transparente.

fundo.png

Hospede esta imagem no mesmo local que hospedou as anteriores


4º PASSO | INFORMANDO AS IMAGENS DOS CÍRCULOS NO ARQUIVO STYLE3.CSS

Com um editor de texto, de preferência o NOTEPAD++,  vá até a linha 50.

Reparem que tem o seguinte treco da linha 50 para baixo:


.ch-img-1 {
background-image: url(../images/7.jpg);
z-index: 12;
}

.ch-img-2 {
background-image: url(../images/8.jpg);
z-index: 11;
}

.ch-img-3 {
background-image: url(../images/9.jpg);
z-index: 10;


Então para cada círculo vai ter que existir um ch-img-? (o interrogação é o número do círculo), Os trechos em azul é o caminho da sua imagem na sua hospedagem.

Então substitua os trechos em azul pelo caminho respectivos de suas imagens

Como vou usar o mesmo plugin tanto para a versão desktop quanto para a versão mobile vou informar a url completa.

No caso do meu exemplo ficou:



.ch-img-1 {
background-image: url(http://www.webacappellashow.com.br/desktop/img/cir01.jpg);
z-index: 12;
}

.ch-img-2 {
background-image: url(http://www.webacappellashow.com.br/desktop/img/cir02.jpg);
z-index: 11;
}

.ch-img-3 {
background-image: url(http://www.webacappellashow.com.br/desktop/img/cir03.jpg);
z-index: 10;
}

5º PASSO | INFORMANDO A IMAGEM DO FUNDO DOS CÍRCULOS NO ARQUIVO STYLE3.CSS

Pesquise no arquivo pelo seguinte trecho

background: #c9512e url(../images/noise.png);


Como as demais substitua este trecho em azul pelo caminho de sua imagem para o fundo.

No caso deste exemplo ficou:


background: #c9512e url(http://www.webacappellashow.com.br/desktop/img/fundo.png);


Salve o arquivo css por segurança.

6º PASSO | FORMATANDO OS TÍTULOS DO INTERIOR DOS CÍRCULOS

Ainda no arquivo style3.css

FORMATAR  TÍTULO (TITULOINTERIOR*)

Para alterar as formatações do título procure no arquivo style3.css na secção ch-info h3

Para alterar a cor altere o código da cor em color
Para alterar a fonte altere a fonte em font-family
Para alterar o tamanho da fonte altere o valor em font-size (em pixels)

FORMATAR  SUBTITULO (SUTTITINTERIOR*)

Para alterar as formatações do título procure no arquivo style3.css na secção ch-info p

Para alterar a cor altere o código da cor em color
Para alterar o tamanho da fonte altere o valor em font-size (em pixels)


FORMATAR DESCRIÇÃO DO LINK  (TITULOLINK*)

Para alterar as formatações do título procure no arquivo style3.css na secção ch-info p a

Para alterar a cor altere o código da cor em color
Para alterar a fonte altere a fonte em font-family
Para alterar o tamanho da fonte altere o valor em font-size (em pixels)


Outras formatações podem ser feito (sugiro fazer só se tiver conhecimento)


Salve o arquivo.


7º PASSO | HOSPEDANDO OS ARQUIVOS CSS

Na sua hospedagem crie uma pasta de nome "css" e hospede os arquivos css dentro dela

O conteúdo desta pasta sera:

common.css
normalize.css
style3.css

(salvo se já não existir esta pasta com outros arquivos)





8º PASSO | CRIANDO NOSSO CÓDIGO

Sugiro preprar todo o código utilizando um editor de texto como o NOTEPAD ++


Primeira parte do código


<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Efeitos circulares 3d</title>
        <meta name="description" content="Efeitos circulares 3d" />
<link rel="stylesheet" type="text/css" href="http://www.webacappellashow.com.br/desktop/css/common.css" />
        <link rel="stylesheet" type="text/css" href="http://www.webacappellashow.com.br/desktop/css/style3.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
    </head>
<b<body>
        <div class="container">
<section class="main">
<ul class="ch-grid">


Copie o código acima e cole no seu editor de texto, depois substitua os trechos em vermelho pela url de onde você hospedou os arquivos CSS.



Segunda parte do código

Nesta segunda parte você vai repetir de acordo com quantos círculos vai utilizar substituindo os trechos em vermelho conforme instrução abaixo do código.

<li>
 <div class="ch-item"> 
  <div class="ch-info">
   <h3>TITULOINTERIOR</h3>
   <p>SUBTITINTERIOR<a href="URL">TITULOLINK</a></p>
  </div>
  <div class="ch-thumb CSSIMG"></div>
 </div>
</li>

TITULOINTERIOR: O título que vai aparecer dentro do círculo em mouseover
SUTTITINTERIOR:  O subtítulo que vai aparecer dentro do círculo em mouseover
TITULOLINK: A descrição que vai aparecer acionando o redirecionamento
URL: URL a qual será redirecionado ao clicar no link
CSSIMG: É a referência  da imagem conforme configurada no arquivo STYLE3.CSS. Onde eu citei acima que inseri as imagens cir01, cir02, cir03. portanto você vai colocar não o nome da imagem e sim o nome da seção que a imagem pertente no arquivo STYLE3.CC


Para melhor entendimento vou dar o exemplo utilizando o primeiro círculo do WebAcappella Show. Círculo Blog.

<li>
 <div class="ch-item"> 
  <div class="ch-info">
   <h3>BLOG</h3>
   <p>Um show de conteúdo<a href="http://webacappellashow.blogspot.com.br/">Ir para o blog</a></p>
  </div>
  <div class="ch-thumb ch-img-1"></div>
 </div>
</li>

e para os demais círculos referente ao exemplo do site WebacappellaShow

<li>
 <div class="ch-item"> 
  <div class="ch-info">
   <h3>WEBSITE</h3>
   <p>Conteúdo exclusivo<a href="http://www.webacappellashow.com.br/desktop/embreve.html">Em breve</a></p>
  </div>
  <div class="ch-thumb ch-img-1"></div>
 </div>
</li>

<li>
 <div class="ch-item"> 
  <div class="ch-info">
   <h3>LOJA ON LINE</h3>
   <p>Seu shopping WebAcappella<a href="http://www.webacappellashow.com.br/desktop/embreve.html">Em breve</a></p>  </div>
  <div class="ch-thumb ch-img-1"></div>
 </div>
</li>

Como não desenvolvemos nenhum site e nenhuma loja, criei uma página em breve redirecionando pra ela.

Então a cada código referente a cada círculo você insere abaixo da primeira parte do código no mesmo arquivo  no editor.

Então até o momento nosso código exemplo está assim:

<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Efeitos circulares 3d</title>
        <meta name="description" content="Efeitos circulares 3d" />
<link rel="stylesheet" type="text/css" href="http://www.webacappellashow.com.br/desktop/css/common.css" />
        <link rel="stylesheet" type="text/css" href="http://www.webacappellashow.com.br/desktop/css/style3.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script> 
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
    </head>
<b<body>
        <div class="container">
<section class="main">
<ul class="ch-grid">
<li>
<div class="ch-item">
<div class="ch-info">
<h3>BLOG</h3>
<p>Um show de conteúdo<a href="http://webacappellashow.blogspot.com.br/">Ir para o blog</a></p>
</div>
<div class="ch-thumb ch-img-1"></div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<h3>WEBSITE</h3>
<p>Conteúdo exclusivo<a href="http://www.webacappellashow.com.br/desktop/embreve.html">Em breve</a></p>
</div>
<div class="ch-thumb ch-img-1"></div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<h3>LOJA ON LINE</h3>
<p>Seu shopping WebAcappella<a href="http://www.webacappellashow.com.br/desktop/embreve.html">Em breve</a></p>
</div>
<div class="ch-thumb ch-img-1"></div>
</div>
</li>


E para finalizar a criação inserimos a 3ª parte do código

Basta copiar o trecho abaixo e colar no final do arquivo que está editando.

</section>

        </div>
    </body>
</html>


Para nosso exemplo então o código completo é:


<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Efeitos circulares 3d</title>
        <meta name="description" content="Efeitos circulares 3d" />
<link rel="stylesheet" type="text/css" href="http://www.webacappellashow.com.br/desktop/css/common.css" />
        <link rel="stylesheet" type="text/css" href="http://www.webacappellashow.com.br/desktop/css/style3.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script> 
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
    </head>
<b<body>
        <div class="container">
<section class="main">
<ul class="ch-grid">
<li>
<div class="ch-item">
<div class="ch-info">
<h3>BLOG</h3>
<p>Um show de conteúdo<a href="http://webacappellashow.blogspot.com.br/">Ir para o blog</a></p>
</div>
<div class="ch-thumb ch-img-1"></div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<h3>WEBSITE</h3>
<p>Conteúdo exclusivo<a href="http://www.webacappellashow.com.br/desktop/embreve.html">Em breve</a></p>
</div>
<div class="ch-thumb ch-img-2"></div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<h3>LOJA ON LINE</h3>
<p>Seu shopping WebAcappella<a href="http://www.webacappellashow.com.br/desktop/embreve.html">Em breve</a></p>
</div>
<div class="ch-thumb ch-img-3"></div>
</div>
</li>
</section>

        </div>
    </body>
</html>

9º PASSO | INSERINDO NO WEBACAPPELLA

Depois de ter já no seu editor o código completo. Copie-o e no Webacappella, opção INSERIR >> CÓDIGO HTML cole-o.

Ajeite o código de acordo com seu layout e prontinho ..publique o site.