Hoy vamos a construir una página web que utiliza no una, sino tres presentaciones de diapositivas separadas que se unen para parecer un elemento realmente dinámico. Este efecto es perfecto para cualquier diseñador o portafolio de fotógrafos.
En el camino usaremos algunos HTML, CSS y jQuery extremadamente básicos. ¡Abre un editor de texto y sigue para construir el tuyo!
Inspiración
Recientemente estuve hojeando nuestra impresionante galería de diseño y encontré la cartera de fotografías de Jessica Kripp, que se muestra a continuación. Me impresionó al instante el tipo de pared de presentación de fotos que ocupaba la página de inicio.
Aquí no solo tenemos una, sino tres presentaciones de diapositivas distintas que se ejecutan de forma independiente, pero diseñadas de forma sinérgica como una sola unidad. Es un efecto realmente genial que nunca he visto antes. Puede que requiera un poco de procesador, pero sigue siendo bastante divertido.
Hoy vamos a saltar y construir uno de estos para ver cómo se hace. Usaremos HTML, CSS y jQuery, pero no dejes que nada de eso te intimide, todo es muy fácil y será perfecto para cualquier principiante.
Paso 1: HTML básico
La forma más sencilla de abordar este proyecto es conseguir que el diseño básico de la página y el diseño funcionen antes de comenzar a jugar con JavaScript. Lo que eso significa es que diseñaremos la página con imágenes estáticas y luego regresaremos y agregaremos la funcionalidad de presentación de diapositivas.
Para comenzar, cree un contenedor básico seguido de tres divs, cada uno con una imagen. Lo sé, ya nos estamos poniendo un poco pesados, pero el complemento jQuery que usaremos más adelante para la presentación de diapositivas requiere que cada una de estas imágenes tenga su propio contenedor principal.
A continuación, diseñamos los divs de fotos. Lo más importante aquí es que coloco el flotador de smallPhoto1 a la izquierda y el de smallPhoto2 a la derecha. Esto asegurará que fluyan correctamente y se topen entre sí (si aún tienes problemas de diseño, experimenta con un div Clearfix). También agregué en valores de altura para cada uno. A largo plazo, esto no parece ser necesario, pero en esta etapa tuve algunos problemas de diseño sin ellos.
Paso 2: Vista previa
Después de la CSS anterior, su página debe tener un aspecto agradable y limpio con un fondo oscuro y una cuadrícula de fotos ajustada como se muestra en la vista previa a continuación.
Paso 3: Herramientas de terceros
Ahora que nuestra página está básicamente terminada en lo que se refiere al diseño, es hora de prepararse para hacer que la página sea más dinámica. Para hacer esto, tendremos que cargar en dos herramientas de JavaScript.
La primera es una biblioteca que no requiere presentación. jQuery es la extensión de JavaScript favorita de todos, que generalmente hace la vida más fácil, ya sea que esté creando animaciones complejas o simplemente desee una mejor manera de apuntar a elementos específicos.
Para asegurarme de que tengo la versión más reciente de jQuery, siempre salto a ScriptSrc, donde simplemente hace clic en un botón para copiar el enlace de la última compilación al portapapeles.
El verdadero motor detrás de nuestras presentaciones de diapositivas hoy será jQuery Cycle, un complemento que hace que sea muy fácil crear presentaciones de diapositivas de jQuery sobre la marcha.
Veremos cómo implementar esto en el siguiente paso. Por ahora puedes incluir el siguiente script en tu encabezado.
Modernizar
Si, como yo, le gusta usar HTML5 y CSS3, también querrá agregar Modernizr para asegurarse de que todo se mantenga lo más compatible posible con IE.
Paso 4: Dar vida a las presentaciones de diapositivas
Implementar jQuery Cycle es super fácil. Hay toneladas de opciones y efectos, pero para los fines de hoy vamos a utilizar un mínimo de la funcionalidad disponible.
Para empezar, vamos a refinar nuestro HTML un poco. jQuery Cycle buscará algo con la clase de? slideshow? y crear una presentación de diapositivas a partir de sus hijos. Para adaptarse a esto, agregamos la clase de presentación de diapositivas a nuestros tres divs de imagen y agregamos dos imágenes más a cada uno. Esto hará que cada imagen pase por tres iteraciones.
Ahora vamos a añadir un poco de estilo. Haremos que el fondo sea del mismo color que el título para mayor consistencia y agregaremos un poco de relleno para darle un poco de peso. Además, establecí la posición en absoluta y le di un margen negativo para que sobresalga un poco de la presentación en el lado izquierdo.Finalmente, agregué un cuadro básico de sombra para ayudarlo a aparecer en diferentes colores.
El problema aquí es que, a pesar de que la etiqueta es más alta en la jerarquía de HTML, termina siendo cubierta por la presentación de diapositivas. Solo puedes echarle un vistazo rápido entre las diapositivas:
Esto es bastante fácil de arreglar con un poco de magia de índice z. Simplemente establezca el índice z de la etiqueta en? 1? y la del bigPhoto div a? -1 ?. Esto hará que la etiqueta quede encima de la presentación.
Producto terminado: Demo en vivo
Con eso, todos hemos terminado! Siéntase libre de echar un vistazo a la demostración en vivo para ver nuestra creación en acción.
Conclusión
Felicitaciones al diseñador detrás del sitio de Jessica por la genial idea de combinar múltiples presentaciones de diapositivas. Duplicar este efecto hecho para un gran tutorial sobre el uso de HTML, CSS y JavaScript para crear presentaciones de diapositivas simples pero impresionantes.
Asegúrese de ir más allá del ejemplo anterior y experimente con diferentes diseños y efectos. Obviamente, a medida que agregue más presentaciones de diapositivas, más se atascará su página, pero de lo contrario, estará limitado solo por su creatividad.