Hoy estoy trabajando en otra descarga gratuita impresionante para PixelsDaily. Aquí podrás ver mis procesos de pensamiento, objetivos y código, y luego podrás descargar todo el proyecto para usarlo en tu propio trabajo.
Básicamente, nuestro objetivo aquí es crear un efecto simple para que cuando el usuario se desplace sobre una imagen, aparezca una etiqueta de texto oculta. Por supuesto, esto es extremadamente fácil de hacer, por lo que vamos a ir un paso más allá al crear un montón de opciones para que el desarrollador elija. Esto le proporcionará algunas buenas prácticas sobre cómo crear efectos flexibles que puedan aplicarse de diferentes maneras sin demasiada repetición de código.
Vistazo
Si está ansioso por ver el resultado antes de revisar el código, vea la demostración a continuación y desplácese sobre cada imagen para ver cómo es diferente.
Manifestación: Haga clic aquí para iniciar.
El plan
Esto es lo que queremos: una etiqueta de texto simple con un fondo negro que aparezca sobre la imagen cuando el usuario se desplaza. Ahora, como se va a animar en su lugar, se me ocurrió un total de diez variaciones diferentes que equivalen a aproximadamente el mismo elemento que se usa de diferentes maneras:
Tenemos dos parámetros principales para establecer aquí. El primero es donde la etiqueta quedará en reposo (arriba, centro o abajo) y el segundo es de dónde vendrá (arriba, derecha, abajo, izquierda). Lo que querremos hacer es proporcionar una estructura HTML repetible básica para que los desarrolladores la utilicen cuando agreguen una imagen, luego les daremos algunas clases que se pueden aplicar para controlar todo el comportamiento de la etiqueta. Con esto en mente, podemos proceder al primer paso.
El HTML
Actualización de estado
Como puede ver en la imagen de abajo, todas nuestras etiquetas funcionan ahora y se ven perfectas. Tenga en cuenta que todos están posicionados en la parte superior de forma predeterminada, tenga esto en cuenta a medida que avanzamos y los empujamos.
Posicionar cada etiqueta
A partir de aquí, tenemos mucho estilo para hacer. Realmente tenemos un poco de estilo que hacer, pero tenemos que hacerlo diez veces diferentes porque cada etiqueta es única. Para cada etiqueta, debemos colocar el elemento de párrafo fuera de los límites de la imagen y luego volver a colocarlo en el estado de espera.
Para comenzar, queremos una etiqueta que comience justo encima de una imagen que se desplace hacia abajo al pasar el cursor y descanse en la parte superior. Para hacer esto, establecemos el valor superior en -50%, que luego cambia a 0% al pasar el mouse. De manera similar, para el mismo efecto desde la parte inferior, comenzamos con un valor inferior de -50% y lo cambiamos a 0%.
Mi método aquí es muy específico, así que toma nota. La parte más complicada de toda esta idea es descubrir cómo hacer que funcione en una amplia gama de tamaños de imagen. No queremos que el desarrollador tenga que ingresar manualmente un tamaño cada vez, solo debería funcionar cuando alguien golpea las clases requeridas.
Al utilizar las propiedades superior e inferior tal como somos, nos aseguramos de que nada sea específico del tamaño de la imagen. El valor del 0% en la propiedad inferior será siempre Empuje nuestra etiqueta hacia la parte inferior de la imagen a la que la aplicamos, sin importar qué tan lejos pueda estar.
A continuación, debemos diseñar nuestras etiquetas que se mueven desde los lados. Podemos desplazarnos desde la parte superior izquierda, superior derecha, inferior izquierda e inferior derecha. Aquí están los valores para estos. El método es sencillo y al igual que los dos que acabamos de revisar. Cada vez que establecemos la posición de reposo justo a un lado, luego la devolvemos a la vista con el hover. Para estos, las propiedades izquierda y derecha entran en juego, además de las propiedades superior e inferior.
Para terminar, necesitamos codificar nuestras etiquetas centradas. Estos son los más difíciles de resolver. Sobre la marcha, desea colocarlos en un cincuenta por ciento hacia abajo o hacia arriba, menos la mitad de la altura de la etiqueta. Entonces, cuando queremos deslizarnos desde arriba, establecemos el valor máximo en 50% y aplicamos un margen negativo de 20px (la mitad de la altura de nuestras etiquetas). Desafortunadamente, esto supone una sola línea de texto y el tamaño de fuente específico que hemos configurado. Si cualquiera de los cambios cambia, la altura será diferente y el elemento no estará centrado. La única forma que conozco de eso es usar algún tipo de pantalla: mesa preparar.
Opcional: ir más allá
Ahora, si está loco por la repetición, puede ir aún más lejos al asegurarse de que su código sea lo más breve posible. Separamos cada etiqueta de arriba para facilitar la lectura, pero el resultado son muchos valores que se repiten. Podríamos entrar y combinar manualmente los selectores o usar Sass @extend y obtener un resultado mucho más conciso. La compensación aquí, por supuesto, es que estás repitiendo tus selectores porque algunos aparecen en múltiples lugares.
Verlo en acción
¡Todos hemos terminado! Asegúrese de ver la demostración en vivo a continuación y pase el ratón sobre cada imagen para ver el efecto diferente.
Manifestación: Haga clic aquí para iniciar.
Conclusión
Este proyecto nos obligó a pensar mucho. Tuvimos que considerar varias veces cómo mantener nuestro código breve y libre de repetición. También preguntamos constantemente qué era lo mejor, dado que queremos que otros puedan descargar y cambiar nuestro código con muy poco problema. A veces, cuando vimos una manera de hacer nuestro código más conciso, llegó al precio de la legibilidad y la facilidad de uso, lo que no es el mejor método para una descarga gratuita.
Siéntete libre de tomar este código y usarlo como quieras. También manténgase atento a la descarga en las próximas semanas en PixelsDaily.