Joshua
5 años (1 Pts)

User Gallery CSS Challenge

Recuerda seguirme en mi perfil para estar al tanto de mis diseños, proyectos, snapshoots, y otras cosas muy buenas que se vendran en un futuro, ah y no olvides pasarte por mis snapshoots: codepen.io/chapuawe

El dia de hoy aprenderemos paso a paso como crear una animacion como esta:

Paso 1:

como primer paso vamos a observar el esqueleto html que he creado, explicare cada div en esta lista:

Frame: div principal donde esta todo el contenido

img y img-*: son los divs que almacenan las imagenes proporcionadas por 100dayscss

hover y plus: hover es el background con opacidad y plus es el icono que aparece en medio del div

Profile: div principal del perfil, donde esta la mayoria de la \"animacion\"

up y down background: partes de arriba y abajo que se unen y separan al comenzar y terminar la animacion

photo y exit: elementos del up background, que se mueven en conjjunto al empezar y terminar la animacion

name y buttons: nombre y botones (con font-awesome) que contiene la parte de abajo del \"perfil\"

el esqueleto html completo lo podemos encontrar en el editor de codepen o directamente aqui:

chapuawe" data-pen-title="eQmvdb" class="codepen">chapuawe" data-pen-title="eQmvdb" class="codepen">chapuawe

empezaremos desde el html, css y por ultimo los retoques en js asi que eskere xD
(Apto para usuarios experimentados en css)

Paso 1:

como primer paso vamos a observar el esqueleto html que he creado, explicare cada div en esta lista:

Frame: div principal donde esta todo el contenido

img y img-*: son los divs que almacenan las imagenes proporcionadas por 100dayscss

hover y plus: hover es el background con opacidad y plus es el icono que aparece en medio del div

Profile: div principal del perfil, donde esta la mayoria de la \"animacion\"

up y down background: partes de arriba y abajo que se unen y separan al comenzar y terminar la animacion

photo y exit: elementos del up background, que se mueven en conjjunto al empezar y terminar la animacion

name y buttons: nombre y botones (con font-awesome) que contiene la parte de abajo del \"perfil\"

el esqueleto html completo lo podemos encontrar en el editor de codepen o directamente aqui:
https://codepen.io/chapuawe

ahora una vez completo y que hayan terminado por completo el esqueleto html, ya podemos pasar por los estilos, para darle un aire mas bonito

Paso 2:

Ahora bien, empezemos con la \"magia\", lamento no poder poner imagenes (el sitio aun esta en construccion) pero supongo que ustedes podran guiarse bastante bien.

comencemos a revisar el codigo css de principio a final:

chapuawe

import: use el import para importar una linda fuente de google fonts y poder utilizarla en el diseño
box-sizing: utilice el box-sizing para lograr que los divs tengan siempre las mismas dimensiones sin importar si tiene padding o margin, igualmente seteo padding 0 y margin 0 para los tags que lo traen predefinido

ahora ya habiendo explicado eso vamos con el codigo

en las primeras lineas vemos la clase .frame, es la clase que tiene el div principal explicado anteriormente, pongo su posicion absoluta y lo centro para que este siempre en el medio de la pagina con margin, luego añado la fuente importada a todo su contenido, le añado el background y le pongo una sombra que le de un estilo casual, aparte pongo el overflow hidden para que cuando la animacion salga del recuadro del frame no sea visible.

ahora vemos la clase .img, es en la que estan las imagenes, el hover y el plus, el div esta con posicion relativa para que los absolute elements dentro de este tomen la medida desde el pariente superior que seria este, les agrego float para que sean inline, pongo la medida de 50% en ancho y alto, para que ocupen 1/4 cada uno y en total al ser 4 divs ocupen todo el espacio, le añado el padding (que mas adelante corregire) y le añado un transition para un efecto de visibilidad que despues veremos mas a detalle.

dentro de la clase img tenemos el tag img, para que al imagen sea del mismo tamaño que el div y no sea ni muy grande ni muy pequeña, agregamos width y height al 100%, de paso se ajustara con el padding que agreguemos

en la clase .hover vemos el sobreponiente ante la imagen al momento de pasar el mouse encima , tiene la posicion absoluta para mostrarse encima de la imagen, al igual que la imagen tiene un width y height del 100%, asi como un background negro con opacidad 1/2, el background-clip es para que el background no vaya desde border-box sino desde content-box (para que no llene el padding), le añadimos transicion para el efecto de visibilidad y el padding correspondiente (que igualmente corregiremos despues) y con un opacity en 0.

luego mero tenemos la clase plus, el plus es el boton + que aparece en medio de .hover, asi que lo seteamos absolute, igualmente como antes lo centramos con posicionamiento y margin, le damos un border radius para que este redondo, el background del color principal, luego utilizamos la propieda lineheight para centrar el texto dentro del boton, asi nos aseguramos que lo este, usamos text-align para que este centrado horizontalmente el texto, utilizamos transform scale para darle un aspecto default que hara un efecto chingon en la animacion, y le ponemos la transicion de medio segundo para que actue como animacion

despues vemos que reajusto el padding de los .img ya que al tocarse unos con otros el padding se suma visualmente, asi que a todos en los lados que llegan a tocarse los reduzco hasta la mitad

ahora uso un css selector para que cuando pase el mouse por encima de las imagenes, suba el opacity de su respectivo hover a 1 con un cursor de link (pointer)

igualmente abajo con plus, cuando hace esto le da un opacity 1 y un scale(1) para que vuelva a su tamaño original, asi en la transicion se ve chido como vuelve a su tamaño original

una vez que llegamos al profile seteamos width y height del 100% del frame, con posicionamiento absoluto y un z-index a 2, para que se sobreponga sobre los divs img, con un display: none para que este invisible hasta que nosotros llamemos y le agreguemos con js la clase de abajo .profile-on que se encarga de hacerlo visible

posteriormente vemos el up-background, que es el que contiene todo lo de la parte de arriba, posicionamos en absoluto, pegado a arriba y a los lados, con un width de 100% y un height del 45%, agregamos el background image con una imagen igualmente proporcionada por 100dayscss, con background-size en cover para que cubra todo el div y background-repeat en no-repeat para que la imagen no se repita para cubrir el div si no que se expanda

llegamos a .photo que es el div donde esta la foto de \"perfil\", posicionamos en absoluto, hacemos un cuadrado perfecto con 100px de alto y ancho, centramos usando el posicionamiento y margin, luego llamamos al tag dentro del div para que sea de alto y ancho 100% de el div padre (.photo), y le agregamos un border radius para que sea circular, un borde blanco para que se vea chingon y un box shadow para la ilusion de que esta flotando

luego tenemos .exit que es el boton que visalizamos en la esquina superior derecha, lo posicionamos con absolute, con un ancho y alto de 50px, el background, el border radius para hacerlo circular, line-height personalizado ya que la font que utilizo tiene un espacio en blanco arriba de las letras minusculas, text align center para que se centre horizontalmente, seteamos el color y el font-size y le añadimos la transicion

luego hacemos un hover del exit cambiando el background y color de las letras, añadiendo una sombra y el cursor en link, con el efecto de transicion se ve chido

una vez pasamos eso llegamos al down-background, que es toda la parte baja, lo que contiene el .name y .buttons, le seteamos el color principal, lo posicionamos con un 65% de alto y bottom 0, luego tenemos el .name que lo centre dandole width al 100 y text-align luego solo lo posicione en top, despues tenemos a los .buttons, con eso simplemente les puse un width personalizado como 210px, luego alinie el div en si al centro, luego dentro de ese alos .button-*, al 1 le puse left 0, al 3 le puse right 0 y al 2 lo alinie con posiconamiento

en buttons-* les hice un border radius con border blanco y dentro un icono de font-awesome, luego les añadi casi el mismo hover que el exit, sin mas misterios terminamos el estilo, ahora vamos al siguiente paso

Paso 3:

ahora es el momento donde pasamos a las animaciones, las animaciones en css principalmente se hacen con keyframes, en mi caso hice 4 animaciones, 2 para la entrada y 2 para la salida y cada una es con translateY para hacerlos subir o bajar y con display:block y display:hidden para hacerlos aparecer y desaparecer, una es para moverlo para arriba y otro para abajo, ya sea en la entrada o en la salida.

Una vez tenemos las animaciones seteadas con css llega la hora de javascript

chapuawe

en este caso he creado las variables de los elementos que cambiaran con la animacion y 3 funciones, una para abrir el .profile llamada open, otra para cerrar el .profile llamada close y una ultima de toggling que me funciona con el addeventlistener para desaparecer o aparecer el .profile al acabar la animacion

close() : cambia el estilo de background-1 (el de arriba) y le agrega la animacion con la propieda de forwards para quedarse al final de la animacion con 3s, y lo mismo hace con el background-2, ahora en photo y exit les pone la misma animacion y propieda que al background-1 pero con 2s asi le da un efecto de rapidez, luego añade un eventlistener al background-1 para que cuando acabe la animacion ejecute la funcion toggling, y un ciclo para las imgs y añadirles opacity 1 creando un efecto animacion con la propiedad de transicion que agregamos
open() : hace lo que dijimos anteriormente con los imgs pero ahora con opacity 0 para darle efecto animacion, luego remueve el eventlistener para que no se cierre al terminar la animacion, ejecuta un toggle al .profile con profile-on para añadirle el display block, a background-1 y -2 les añade la animacion para abrir y en este caso yo le puse el mismo tiempo a los 4,

y asi es como terminamos finalmente con la animacion completa y con un bonito efecto en un prototipo de galeria de usuario, no olvides seguirme y dar like a esta publicacion, pronto subiremos cursos de css, js, php entre otros asi que estate atento, deja tu comentario si tienes alguna pregunta

#Undefined