En este tutorial vamos a recrear el efecto hover como se ve en el sitio web de

Experimentos de Navidad.Estaremos usando SVG para la forma y Snap.svg para la

animacin en vuelo estacionario.

VER DEMO DESCARGAR FUENTE
Si usted ha visitado la fantstica nueva edicin de Los Experimentos de
Navidad entonces usted puede haber notado el efecto realmente genial flotar en el
calendario de Navidad que utiliza una forma triangular. La forma est formada por un
tringulo usando las fronteras y hoy me gustara que le muestre la forma de lograr el
mismo efecto utilizando SVG y Snap.svg . La idea es crear un SVG con un camino
que representa el fondo en forma de algn ttulo y se transforme ese camino en la otra
en vuelo estacionario. Hay muchas posibilidades creativas y hoy vamos a crear tres
ejemplos diferentes. La cosa agradable de utilizar SVG es que podemos ajustar el
tamao de la forma que el tamao de su contenedor padre y hacer todo lo fluido.
Las ilustraciones que se utilizan en las demostraciones son por el
talentoso Isaac Montemayor . Ver sus ilustraciones originales en su sitio
web o Dribbble .
Por lo tanto, vamos a empezar!
EL MARCADO DE
Lo que vamos a hacer primero, es dibujar dos formas en un editor de grficos
vectoriales como Adobe Illustrator o Inkscape. Cada forma constar de un camino y
cuando terminemos, vamos a copiar los puntos de nuestros caminos a utilizar en
nuestra marca. Tenga en cuenta que hemos transformado un polgono en un
camino. Si usted est usando Inkscape puede hacerlo seleccionando el objeto y
eligiendoRuta> Objeto a trayecto . Los puntos de la ruta se pueden obtener
en Editar> Editor XML ... que abrir una vista como se ve en la siguiente captura de
pantalla:

La "d" (datos de trayectoria) valor es lo que busca.
Para el margen de beneficio que tendremos una seccin con la "red" de clase que
contiene figuras envueltas en los anclajes. Usted podra tambin utilizar una lista aqu
lo que necesitar un poco de margen de beneficio extra.
La cifra contendr la imagen, la forma visible inicialmente y un figcaption :
< seccin Identificacin = "red" clase = "clearfix grid" >
< a href = "#" -path-libracin de datos = "m 180,34.57627 -180,0 L 0,0 180,0 z" >
< figura >
< img src = "img / 1.png" />
< svg viewBox = "0 0 180 320" preserveAspectRatio = "none" > < ruta d = "M 180 160 0218 0,0 180,0 z" /> </ svg >
< figcaption >
< h2 > Crystalline </ h2 >
< p > Soko radicchio bunya dulse gramo nueces. </ p >
< botn > Ver </ botn >
</ figcaption >
</ figura >
</ a >
<-! ... ->
</ seccin >
El SVG tendr los valores viewBox respectivos para la grfica y un
preserveAspectRatio de "ninguno". Esto nos permitir cambiar el tamao y estiramos
la forma a las dimensiones que queremos, que es 100% en este caso. Definiremos la
anchura y altura en nuestra hoja de estilos. La informacin de la ruta de vuelo
estacionario se almacena en el atributo de datos de datos ruta-libracin del anclaje
de envolver.
Vamos ESTILO todo esto.
EL CSS
Tenga en cuenta que la CSS no contendr ningn prefijos de proveedores, pero se
puede encontrar en los archivos.
El estilo que vamos a ir a travs es para los tres ejemplos. En primer lugar, vamos a
echar un vistazo en el estilo comn y luego vamos a establecer los estilos individuales
para todas las demos.
Vamos a empezar con la red. Vamos a centrar y darle un max-width y una anchura
porcentaje para que sea fluido:
.grid {
margen : 40px auto 120px ;
max-width : 1000px ;
ancho : 90% ;
}
Los anclajes debe flotar a la izquierda y vamos a darles un max-ancho de 250px y una
anchura de 25% desde que nos gustara que sean lquidos y mostramos cuatro
elementos en una fila. Nosotros nos encargaremos de tamaos de pantalla ms
pequeos en nuestras preguntas de los medios ms adelante:
.grid un {
float : izquierda ;
max-width : 250px ;
ancho : 25% ;
de color : # 333 ;
}
Para crear un poco de compensacin para los artculos extraos, vamos a establecer
un margen superior de 30px y un margen inferior de -30px. Esto crear un aspecto
agradable para la red, al igual que en la red en el sitio web Experimentos de Navidad:
.grid un: nth-child (impar) {
margen : 30px 0 -30px 0 ;
}
La cifra debe colocarse relativamente porque vamos a necesitar algunos de los nios a
ser absoluta.Desde nuestro efecto hover podra causar algo de desbordamiento, y no
queremos que eso sea visible, vamos a establecer el desbordamiento de "oculto":
.grid figura {
posicin : relativa ;
overflow : hidden ;
margen : 5px ;
fondo : # 333 ;
}
La imagen ocupar toda la anchura de su padre y la opacidad se establece en 0,7. En
vuelo estacionario queremos animar la opacidad, as que vamos a aadir una
transicin:
figura .grid img {
posicin : relativa ;
pantalla : bloque ;
ancho : 100% ;
opacidad : 0,7 ;
transicin : opacidad 0,3 s;
}
El figcaption necesita ser absolutamente posicionado y vamos a estirarla sobre todo el
artculo:
.grid figcaption {
posicin : absoluta ;
top : 0 ;
z-index : 11 ;
relleno : 10px ;
ancho : 100% ;
altura : 100% ;
text-align : centro ;
}
El ttulo y el prrafo ambos sern animados en vuelo estacionario, as que vamos a
darles las respectivas transiciones y mover su posicin inicial un poco:
.grid figcaption h 2 {
margen : 0 0 20px 0 ;
de color : # 3498db ;
text-transform : maysculas ;
letter-spacing : 1px ;
font-weight : 300 ;
font-size : 130% ;
transicin : transformar 0,3 s;
}

figcaption .grid p {
relleno : 0 20px ;
Color : #aaa ;
font-weight : 300 ;
transicin : opacidad 0,3 s, se transforman 0,3 s;
}

.grid figcaption h 2 ,
figcaption .grid p {
transformar : translateY ( 50px );
}
El estilo de botn comn para todos los tres ejemplos es la siguiente. El botn tambin
se animar, as que vamos a aadir una transicin de la opacidad y de la
transformacin:
figura .grid botn {
posicin : absoluta ;
relleno : 4px 20px ;
fronterizo : ninguno ;
text-transform : maysculas ;
letter-spacing : 1px ;
font-weight : bold ;
transicin : opacidad 0,3 s, se transforman 0,3 s;
}
Para evitar algo de parpadeo y problemas tcnicos, tendremos que dar los elementos
de animacin y su padre una cara trasera visibilidad oculta:
figcaption .grid,
.grid figcaption h 2 ,
.grid figcaption p,
figura .grid botn {
cara trasera visibilidad : ocultado ;
}
El SVG tambin se posicionar absolutamente y vamos a estirarlo sobre el elemento
mediante el establecimiento de la anchura y altura a 100%. Dndole un valor superior
de 1px en vez de 0 se asegurar de que no hay lnea de extrao en Firefox (26,0 /
Mac).
.grid svg {
posicin : absoluta ;
top : 1px ; / * Soluciones de representacin cuestin en FF * /
z-index : 10 ;
ancho : 100% ;
altura : 100% ;
}
El color de relleno de la ruta ser de color blanco:
svg .grid ruta {
llenar: #fff ;
}
En este punto tambin se puede tratar de aadir algunas transiciones a la trayectoria y
por ejemplo, cambiar el color de relleno en vuelo estacionario.
Los efectos de activacin comunes para los anclajes sern los siguientes:
.grid una: figura libracin img {
opacidad : 1 ;
}

.grid a: hover figcaption h 2 ,
.grid un: figcaption libracin p {
transformar : translateY ( 0 );
}

.grid un: figcaption libracin p {
opacidad : 0 ;
}
La opacidad de la imagen se establece en 1, mientras que el prrafo de las leyendas
se desliza hacia arriba y desaparece. El ttulo se mover a arriba, tambin.
Vamos Estilo demos individuales. Algunos de los estilos sern comunes a ms de una
demostracin.
En el primer y tercer ejemplo, queremos que el botn tenga un borde blanco y se
centrar en el tema. Se oculta inicialmente y redujo. Las otras transformadas se
utilizan para "tirar" en su posicin y centrarlo. En vuelo estacionario, haremos escala
en el botn y se desvanecen en:
.demo -1 body {
fondo : # 3498db ;
}

.demo -1 botn .grid figura,
.demo -3 figura botn .grid {
superior : 50% ;
izquierda : 50% ;
border : 3px slido #fff ;
fondo : transparente ;
Color : #fff ;
opacidad : 0 ;
transformar : translateY ( -50% ) translateX ( -50% ) escala ( 0,25 );
}

.demo -1 .grid una: figura botn activable,
.demo -3 .grid una: figura botn hover {
opacidad : 1 ;
transformar : translateY ( -50% ) translateX ( -50% ) escala ( 1 );
}
Para la segunda demo, vamos a redefinir algunos colores y fijamos el botn que se
oculta en la parte inferior de la figura. Para eso hemos creado el fondo a 0 y
traducimos 100% (de su propia altura). En vuelo estacionario vamos a hacer que se
deslizan hacia arriba con una funcin de aceleracin "facilidad de salida" diferente (el
deafult es "aliviar"):
.demo -2 body {
fondo : # e74c3c ;
}

.demo -2 .grid figcaption h 2 {
de color : # e74c3c ;
}

.demo -2 figcaption .grid p {
transicin de retardo : 0,05 s;
}

.demo -2 figura botn .grid {
inferior : 0 ;
izquierda : 0 ;
relleno : 15px ;
ancho : 100% ;
fondo : #fff ;
de color : # 333 ;
font-weight : 300 ;
transformar : translateY ( 100% );
}

.demo -2 .grid una: figura botn hover {
transicin-timing-funcin : la facilidad de salida;
transformar : translateY ( 0 );
}
El ttulo y el prrafo del segundo y tercer ejemplo tendrn una funcin de aceleracin
cbica-bezier que ayudar a emular una transicin elstica. Tambin vamos a
establecer una duracin diferente sin demora para el prrafo cuando se cierne. Esto
asegurar que el prrafo se desvanece rpidamente antes de llegar a la cima de
nuestra forma SVG:
.demo -2 .grid figcaption h 2 ,
.demo -2 figcaption .grid p,
.demo -3 .grid figcaption h 2 ,
.demo -3 figcaption .grid p {
tiempo-funcin: cbico-bezier ( 0.250 , 0.250 , 0.115 , 1.445 );
}

.demo -2 .grid a: hover figcaption p,
.demo -3 .grid un: figcaption libracin p {
transicin de retardo : 0 s;
transicin de duracin : 0,1 s;
}
Por tercer demo que va a cambiar algunos colores y dejar el ttulo traducido un poco
en vuelo estacionario en vez de hacer que se vaya a 0:
.demo -3 body {
fondo : # 52be7f ;
}

.demo -3 .grid figcaption h 2 {
de color : # 52be7f ;
}

.demo -3 .grid a: hover figcaption h 2 {
transformar : translateY ( 5px );
}
Para las pantallas ms pequeas, queremos cambiar el nmero de elementos en una
fila, as que vamos a restablecer el ancho y tambin el margen de los hijos
impares. Los anclajes que deben tener un margen son la 2 , 5 , 8, 11 y as
sucesivamente, que es descrito por la secuencia 3n-1 . Consejo: Si usted quiere
encontrar la secuencia de una fila de nmeros en forma rpida, por ejemplo,
puede ir aWolframAlpha y escriba sus nmeros. Una posible secuencia de
identificacin con la forma cerrada se puede encontrar en uno ltimas cajas.
Para tamaos ms pequeos, ajustaremos el max-ancho de la red y redefinir algunos
mrgenes para los elementos de leyenda:
media pantalla y ( max-width : 58em ) {
.grid un {
anchura : 33,333% ;
}

.grid un: nth-child (impar) {
Margen : 0 ;
}

.grid un: nth-child ( 3 n -1 ) {
margen : 30px 0 -30px 0 ;
}
}

media pantalla y ( max-width : 45em ) {
.grid {
max-width : 500px ;
}

.grid un {
ancho : 50% ;
}

.grid un: nth-child ( 3 n -1 ) {
Margen : 0 ;
}

.grid un: nth-child (incluso) {
margen : 30px 0 -30px 0 ;
}


.grid figcaption h 2 {
margin-bottom : 0px ;
transformar : translateY ( 30px );
}

figcaption .grid p {
Margen : 0 ;
relleno : 0 10px ;
}
}

media pantalla y ( max-width : 27em ) {
.grid {
max-width : 250px ;
}

.grid un {
ancho : 100% ;
}

.grid un: nth-child (incluso) {
Margen : 0 ;
}
}
Y eso es todo el estilo! Vamos a pasar a la JavaScript.
EL JAVASCRIPT
Usaremos Snap.svg , una gran biblioteca para trabajar con IVS. Por favor, eche un
vistazo a ladocumentacin y el Getting Started tutorial interactivo para una mejor
comprensin de cmo se puede utilizar.
Vamos a empezar por la definicin de la velocidad y la variable de
flexibilizacin. Tambin definiremos una variable que contendr la informacin sobre la
ruta y el camino vuelo estacionario. Cuando se cierne sobre un ancla, vamos a animar
el camino de transformarse en la "a" camino. Al salir del ancla, nos animamos de
nuevo a la "de la" ruta de acceso:
( funcin () {

funcin init () {
var velocidad = 250,
facilitando = mina.easeinout;

[] .slice.call (Document.querySelectorAll ( '#grid> a' )) .forEach ( funcin (el) {
var s = Snap (el.querySelector ( 'svg' )), path = s.select ( "camino" ),
pathConfig = {
desde: path.attr ( 'd' ),
a: el.getAttribute ( 'path-libracin de datos' )
};

el.addEventListener ( 'MouseEnter' , la funcin () {
path.animate ({ 'ruta' : pathConfig.to}, velocidad, aliviando);
});

el.addEventListener ( 'mouseleave' , la funcin () {
path.animate ({ 'ruta' : pathConfig.from}, velocidad, aliviando);
});
});
}

init ();

}) ();
Y eso es todo! Hemos demostrado que slo tres ejemplos, pero hay tantas
posibilidades de deformacin de figuras o de color efectos frescos.