Página 1 de 1
Colocar efeitos
Enviado: 08 Fev 2015, 15:04
por jeanrl
Fala pessoal!
Não tenho muita experiência em modificações de temas, mas estou conseguindo fazer algumas coisas que preciso.
Não achei na net nenhuma dica de como adicionar efeitos javascript, por exemplo, um efeito hover nos produtos expostos na Home, como muitos temas tem.
Alguém pode me dar alguma dica ou caminho das pedras de como eu adiciono isto?
Estou com a versão 2.0.1.1 e estou modificando o tema padrão.
Muito obrigado.
Re: Colocar efeitos
Enviado: 09 Fev 2015, 10:16
por reds
Bom dia Jean,
Se você entende um pouco de css e sabe utilizar o depurador do navegador F12 no firefox e IE, pode analisar o código e colocar os efeitos onde quiser, a exemplo.
Código: Selecionar todosSe temos classes na linha 1:
stylesheet.csss
.product-thumb {
valor: valores;
}
acrescente:HOVER
.container product:hover {
box-shadow: 0 0 5px #000;
}
Com esta linha de exemplo, você tem sombra na caixa do produto.
Re: Colocar efeitos
Enviado: 09 Fev 2015, 10:22
por jeanrl
Bom dia Reds!
Entendo um pouco sim, inclusive já consegui mudar algumas coisas e tá ficando bem legal.
Apesar de a versão 2.0 ter ainda poucos módulos ela é (pelo q percebi até agora) muuuuuuuuito melhor do que a 1.5..., por isso estou remontando a loja do zero.
Vou usar sua dica para aplicar os outros efeitos que quero.
Muito obrigado pela resposta e atenção.
Abraços.
Re: Colocar efeitos
Enviado: 09 Fev 2015, 14:20
por jeanrl
Boa tarde Reds!
Sem querer abusar e já abusando, hehe, eu queria fazer algo semelhante a este: (No hover dos produtos da home.)
http://estilomotocar.com.br/2015/
Acho que deve ser com jquery, mas não tenho certeza nem se é e nem como fazer.
Vc pode me dar uma dica nesse sentido.
Valeu.
Re: Colocar efeitos
Enviado: 09 Fev 2015, 15:28
por reds
De uma olhada no código que compõe este efeito:
Código: Selecionar todos.product-block .img-overlay {
position: absolute;
top: 0;
left: 0;
overflow: visible;
border-width: 0;
border-style: solid;
border-color: #505050;
border-color: rgba(79,79,79,0.5);
zoom: 1;
border-color: transparent \9;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f4f4f4f, endColorstr=#7f4f4f4f)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f4f4f4f, endColorstr=#7f4f4f4f);
-webkit-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
width: 100%;
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
}
.product-block .pav-colorbox {
background: #FFFFFF;
padding: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
line-height: 33px;
overflow: auto;
display: block !important;
z-index: 10;
color: #000000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
width: 100px;
height: 33px;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: transform 0.4s ease-in 0.2s, opacity 0.4s ease-in-out 0s;
transition: transform 0.4s ease-in 0.2s, opacity 0.4s ease-in-out 0s;
position: absolute;
display: none;
}
.product-block .pav-colorbox span {
margin-right: 5px;
}
.product-block .pav-colorbox .icon-eye {
margin: 0 5px 0 0;
display: inline-block;
*display: inline;
zoom: 1;
}
.product-block .info-view {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: transform 0.4s ease-in 0.2s, opacity 0.4s ease-in-out 0s;
transition: transform 0.4s ease-in 0.2s, opacity 0.4s ease-in-out 0s;
position: absolute;
}
.product-block .info-view .icon-eye {
margin: 0 5px 0 0;
display: inline-block;
*display: inline;
zoom: 1;
}
Abaixo o efeito de hover do produto
Código: Selecionar todos.product-block:hover {
-webkit-box-shadow: 0 0 7px #cccccc;
box-shadow: 0 0 7px #cccccc;
}
.product-block:hover .img-overlay {
border-width: 140px;
border-style: solid;
border-color: #505050;
border-color: rgba(79,79,79,0.5);
zoom: 1;
border-color: transparent \9;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f4f4f4f, endColorstr=#7f4f4f4f)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f4f4f4f, endColorstr=#7f4f4f4f);
opacity: 1;
filter: alpha(opacity=100);
}
.product-block:hover .info-view {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.product-block:hover .pav-colorbox {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
Re: Colocar efeitos
Enviado: 09 Fev 2015, 15:47
por jeanrl
Valeu Reds, vou estudá-lo com calma.
Muito obrigado mesmo.
Abração.