Hoy vamos a terminar nuestro tutorial cu3er de dos partes.
Para aquellos que no lo saben, Cu3er es un deslizador de imagen 3D increíble que es de uso gratuito y fácil de configurar.
Esta sección examinará cómo ajustar su presentación con algunas de las muchas opciones de personalización de Cu3er. Principalmente, estaremos editando una página XML, pero no te preocupes si se vuelve demasiado técnico. Incluso si no sabes qué es XML, todo es bastante sencillo y fácil de entender.
Anteriormente en Design Shack
En la parte 1 del tutorial de Cu3er, descargamos Cu3er y modificamos la página de ejemplo para ver qué fácil es incorporar la presentación de diapositivas en sus diseños.
Antes de comenzar, es posible que desee ver la demostración y descargar los archivos de origen.
El archivo de configuración
Si siguió la última vez, su archivo config.xml no se debe tocar del archivo original que descargamos del sitio web de cu3er.
La demo y los archivos asociados anteriores se han modificado ligeramente para incluir una función de inicio automático, pero hoy volveremos al archivo predeterminado solo para tener una pizarra limpia.
¡Prepare su ejemplo para abrir el archivo de configuración y comenzaremos! Solo debe haber dos secciones en este archivo: configuraciones y diapositivas. De forma predeterminada, la sección de configuración solo contiene el código de los botones anterior y siguiente para navegar por la presentación. Siéntase libre de jugar o eliminar estas configuraciones por su cuenta, pero las dejaremos como están porque me gusta tener la capacidad de navegar manualmente la presentación de diapositivas.
Autoencendido
De forma predeterminada, la presentación de Cu3er es estática y no cambiará las imágenes hasta que haga clic en el botón siguiente. Sin embargo, hay muchas instancias en las que es posible que desee que la presentación solo se ejecute automáticamente cuando se carga la página.
Para lograr esto, copie y pegue el siguiente código de la documentación de Cu3er en la sección de configuración de su archivo XML.
La primera parte de este código controla la duración del temporizador en cada diapositiva y su aspecto. Tienes dos opciones aquí: lineal o circular. La opción circular es un gráfico circular que se llena gradualmente y la opción lineal es un rectángulo con un barrido horizontal. El tiempo es el número de segundos que se mostrará la diapositiva antes de continuar.
La parte de interpolación es un principio de animación y tiene que ver con la linealidad de la velocidad de la animación a lo largo del tiempo. Los valores más importantes aquí son las coordenadas x, y, que le permiten establecer la posición del temporizador, la altura y el ancho, que le permiten configurar el tamaño del temporizador y el tinte, que le da control sobre el color del temporizador.
Entonces, si quisiéramos un temporizador circular, una duración de dos segundos, con un tamaño de 50 px y un color azul, usaríamos el siguiente código:
Personalizar diapositivas
Añadir diapositivas extra es super fácil. Simplemente vaya a la sección de diapositivas y copie y pegue una parte de la porción de código entre las etiquetas de diapositivas y cambie el nombre de la imagen al nombre de su jpg.
Si quisieras colocar una imagen llamada sunrise.jpg, el código se vería así:
Agregando enlaces a diapositivas
Use el siguiente fragmento de código para agregar un enlace de modo que cuando un usuario haga clic en una diapositiva, se abra el enlace (reemplace el enlace por el suyo).
Agregar descripciones a las diapositivas
Cu3er le da la posibilidad de agregar un encabezado y un párrafo a cada diapositiva. Esta descripción puede tener opcionalmente un enlace asociado que es diferente al enlace adjunto a la diapositiva.
El fragmento de código para lograr esto viene justo después de la URL de la diapositiva.
Esto dará un resultado similar al de abajo.
Personalizando el Cuadro de Descripción
Para personalizar la configuración de la descripción, inserte el siguiente código en el área de configuración y ajústelo a sus propias preferencias.
Aquí puede asignar fuentes, tamaño de texto, color de texto y margen de texto tanto para el encabezado como para el párrafo. La información de la interpolación le permite ubicar el cuadro que contiene el texto, así como decidir su altura, color y propiedades de animación. Como mis diapositivas tienen 600px de ancho, configuro mi valor de x y mi ancho de modo que x veces dos más el ancho es igual a 600 (150 * 2 + 300) para centrar la descripción horizontalmente en la diapositiva.
Estos ajustes me dan los siguientes resultados:
Definiendo la transición 3D
El atributo personalizable final que revisaremos es el más divertido: las transiciones 3D. Cu3er le da un control completo sobre la naturaleza de estas transiciones. Para ilustrar, veamos el siguiente código:
Como puede ver, aquí hemos colocado algunos atributos de transición entre dos diapositivas. Primero le decimos a Cu3er cuántas rebanadas queremos en la transición. Este puede ser el número que desee, solo tenga en cuenta que la animación comienza a distorsionarse alrededor de 30. También puede decidir si desea dividir la imagen vertical u horizontalmente. Si es vertical, elige si quieres que la dirección sea hacia arriba o hacia abajo. Si está horizontalmente, elige una dirección hacia la izquierda o hacia la derecha.
También se muestra arriba es el shader. Las opciones aquí son ninguna, plana y phong, la última de estas es una especie de viñeta.
También puede configurar el color del cubo (0x333333), la duración (en segundos) y el retraso (en segundos) para cada transición. Solo recuerde colocar siempre las propiedades de transición entre dos diapositivas y no dentro de una diapositiva.
Conclusión
Con suerte, ahora puede lanzar fácilmente una presentación de diapositivas de Cu3er en una página web y personalizar la mayoría de sus configuraciones. Para obtener más información sobre cómo ajustar la presentación de diapositivas, asegúrese de pasar por la página de documentación.
Cu3er es un elemento bastante popular y se utiliza en una serie de temas más vendidos en ThemeForest.Trabajar en su cartera de ofertas es una manera excelente y sencilla de sorprender a los potenciales clientes.
Háganos saber si hay otros complementos o juguetes web brillantes que le gustaría que revisemos. Siempre estamos buscando nuevas tecnologías para aprender y compartir.