Creando una presentación de diapositivas en html. Preparando imágenes para el control deslizante. Presentación de diapositivas jQuery en pantalla completa

• Traducción
• Tutorial

Gracias a CSS3 podremos crear efectos de animación sin utilizar JavaScript, lo que facilitará el trabajo de muchos desarrolladores.
No deberíamos abusar de CSS3 porque los navegadores más antiguos no admiten todas sus propiedades. De todos modos, todos vemos el potencial de CSS3 y en este artículo discutiremos cómo crear un control deslizante de imagen en bucle usando solo animación CSS3.

Secciones del artículo

Para comprender el proceso de principio a fin, a continuación se muestra el contenido del artículo. Tenga en cuenta que este efecto sólo funcionará correctamente en navegadores modernos, que admiten las propiedades CSS3 utilizadas.

1. Introducción
   Descripción de conceptos básicos relacionados con las transiciones CSS3 y la animación de fotogramas clave.
2. marcado HTML
   Creación de marcado HTML para un control deslizante de imagen.
3. Estilos CSS
   Cree una hoja de estilo para la visualización del control deslizante.
4. Animación de fotogramas clave CSS3
   Agregar animación al control deslizante. Analizaremos los diversos procesos que tienen lugar aquí.
5. 
   Agregando una barra de progreso para nuestro control deslizante.
6. 
   Agregar información sobre herramientas para mostrar títulos.
7. Transiciones CSS3
   Mostrar información sobre herramientas al pasar el mouse usando transiciones CSS3
8. Pausar y reiniciar
9. Demostración
   Mostremos el control deslizante en acción.
10. Conclusión
    Pensamientos finales.

1. Introducción

Para utilizar este tutorial, necesitará tener conocimientos básicos de CSS, específicamente transiciones CSS3 y animaciones de fotogramas clave.
Operando con estos conceptos simples, veremos como hacer control deslizante funcional imágenes.

Conceptos básicos Transiciones CSS3

Generalmente cuando haces trampa valor CSS, los cambios se muestran estáticamente. Ahora, gracias a la propiedad de transición, podemos realizar cambios fácilmente de un estado a otro.

Podemos utilizar cuatro propiedades de transición:

Propiedad de transición
Especifica los nombres Propiedades CSS, a los que se deben aplicar las transiciones.

Duración de la transición
Define el tiempo dentro del cual debe ocurrir la transición.

Función de sincronización de transición
Define cómo se calcula valores intermedios transición.

Retraso de transición
Determina cuándo se desencadena la transición.

Actualmente, las transiciones CSS3 son compatibles con Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ e IE 10. Dado que la tecnología aún es relativamente nueva, Se requieren prefijos del navegador. La sintaxis es la misma para todos los navegadores excepto por agregar los prefijos necesarios. Los omitiremos en este artículo, pero no olvides incluir los prefijos en el código.

Veamos cómo aplicar una transición simple a un enlace:
a ( color: #000; propiedad de transición: color; duración de transición: 0,7 s; función de sincronización de transición: entrada fácil; retraso de transición: 0,3 s; ) a: pasar el cursor ( color: #fff; )

Al asignar una animación a un elemento, también puedes utilizar la forma abreviada:
a ( color: #000; transición: color 0,7 s entrada fácil 0,3 s; ) a:hover ( color: #fff; )

Conceptos básicos de animación CSS3

La animación CSS nos permite crear animaciones sin JavaScript utilizando un conjunto de fotogramas clave.
A diferencia de las transiciones CSS, las animaciones de fotogramas clave actualmente solo son compatibles con los navegadores WebKit, Firefox y pronto IE 10. Los navegadores no compatibles simplemente ignorarán el código de animación.

La propiedad de animación tiene ocho subpropiedades:

Retraso de animación
Determina cuándo comienza la animación.

dirección de animación
Determina si la animación debe reproducirse hacia atrás en bucles alternos.

Duración de la animación
Determina el tiempo que tarda la animación en completar un bucle.

Recuento de iteraciones de animación
Determina el número de ciclos de animación antes de detenerse.

Nombre de la animación
Define el nombre de la regla en @keyframes.

Estado de reproducción de animación
Determina si la animación se está reproduciendo o en pausa.

Modo de relleno de animación
Define cómo la animación CSS debe aplicar estilos a su objetivo antes y después de la ejecución.

Veamos cómo aplicar. animacion sencilla bloquear:
/* El elemento al que aplicamos la animación. */ div (nombre-animación: movimiento; duración-animación: 1 s; función-timing-animación: entrada-salida fácil; retardo-animación: 0,5 s; recuento-iteración-animación: 2; dirección-animación: alternativa; - moz-animation-name: mover; -moz-animation-duration: 1s; -moz-animation-timing-function: facilidad de entrada-salida; -moz-animation-iteration-count: 2; alternativo; -webkit-animation-name: -webkit-animation-duration: retraso: 0,5 s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternativo) /* La animación en sí. */ @keyframes mover ( de ( transformar: traducirX(0); ) a ( transformar: traducirX(100px); ) ) @-moz-keyframes mover ( de ( -moz-transform: traducirX(0); ) a ( - moz-transform: traducirX(100px); ) ) @-webkit-keyframes mover ( de ( -webkit-transform: traducirX(0); ) a ( -webkit-transform: traducirX(100px); ) )

Podemos usar una abreviatura para configurar todas las propiedades de la animación a la vez:
div (animación: movimiento 1 entra y sale 0,5 s 2 alternativo; -moz-animation: movimiento 1 entra y sale 0,5 s 2 alternativo; -webkit-animation: movimiento 1 entra y sale 0,5 s 2 alternativo; )

Fotogramas clave

Cada fotograma clave describe cómo debe comportarse un elemento animado en un momento determinado de la animación. Los fotogramas clave toman valores porcentuales para determinar el tiempo: 0% es el inicio de la animación, mientras que 100% es el final. Puedes agregar adicionalmente marcos intermedios para animaciones.

/* Animación de 0% a 100% */ @keyframes move ( 0% ( transform: TranslateX(0); ) 100% ( transform: TranslateX(100px); ) ) /* Animación con frame intermedio */ @keyframes move ( 0% ( transformar: traducirX(0); ) 50% ( transformar: traducirX(20px); ) 100% ( transformar: traducirX(100px); ) )

El W3C tiene mucha información útil y información detallada sobre “animación CSS3”

La estructura básica de nuestro control deslizante.

Ahora que sabemos cómo funcionan las transiciones y animaciones, veamos cómo crear nuestro control deslizante usando solo CSS3. Este boceto muestra cómo debería funcionar la animación:

Como puedes ver, el control deslizante será el contenedor en el que se mostrarán las imágenes.
La animación es muy simple: la imagen sigue una dirección determinada, cambiando las propiedades "superior", "índice z" y "opacidad".
Saltemos directamente al marcado HTML para crear el control deslizante.

2. marcado HTML

El marcado HTML es muy simple. Está claramente organizado y es compatible con SEO. Echemos un vistazo primero código completo, y luego descubriremos en detalle cómo funciona todo.

ID de división="control deslizante"
Este es el contenedor deslizante principal. el no tiene función específica, pero lo necesitamos para pausar la animación.

ID de división = "máscara"
Usaremos este bloque para ocultar todo lo que sucede fuera del control deslizante. Además de esto, la máscara nos permite mostrar el contenido del slider.

Li id="primera" clase="primera animación"
Cada elemento de la lista tiene un ID y una clase. El ID muestra información sobre herramientas y la clase está vinculada a la animación que está a punto de ocurrir.

clase div = "información sobre herramientas"
Este bloque muestra el título de la imagen. Puede cambiarlo según sus necesidades, por ejemplo, haciendo clic en él o agregando una breve descripción.

Div clase = "barra de progreso"
Este bloque contiene una función que muestra el progreso de la animación.

Ahora es el momento de generar el archivo CSS.

3. Estilos CSS

vamos a crear estructura básica control deslizante. Será del mismo tamaño que la imagen. La propiedad de borde será útil para crear un borde alrededor de una imagen.

/* Estructura del control deslizante */ #slider ( fondo: #000; borde: 5px sólido #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); alto: 320px; ancho: 680px; margen: 40px auto 0; visible; posición: relativa)

La clase "máscara" ocultará todos los elementos que se encuentran fuera del control deslizante. Su altura debe ser igual altura control deslizante.

/* Ocultar todo lo que está fuera del control deslizante */ #mask ( overflow: oculto; altura: 320px; )

Finalmente, para ordenar la lista de imágenes, usaremos "posición: absoluta" y "arriba: -325px" para que todas las imágenes queden ubicadas fuera del control deslizante.

/* Lista de imágenes */ #slider ul ( margen: 0; padding: 0; posición: relativa; ) #slider li ( ancho: 680px; /* Ancho de imagen */ alto: 320px; /* Alto de imagen */ posición: absoluto; arriba: -325px /* Posición inicial(fuera del control deslizante) */ estilo de lista: ninguno; )

Con estas pocas líneas de código, creamos el marcado del control deslizante. Ahora solo necesitamos agregar animación.

4. Animación de fotogramas clave CSS3

Antes de comenzar con la animación, debemos definir algunos parámetros para que la animación sea correcta.
Como sabemos, la duración total de la animación será de 25 segundos, pero necesitamos saber cuántos fotogramas clave habrá en 1 segundo.
Resolvamos una serie de operaciones que nos darán el número exacto de fotogramas clave y la duración total de la animación. Aquí están los cálculos:
Determine el número total de imágenes en el control deslizante: 5 ;
Determinamos la duración de la animación para cada imagen: 5 segundos;
Determinamos la duración total de la animación multiplicando el número total de imágenes por la duración de cada una: 5 imágenes × 5 segundos = 25 segundos;
Calculamos cuántos fotogramas clave (porcentaje) habrá en un segundo.
Divida el número total de fotogramas clave por la duración total de la animación: 100%/25 = 4% ,
Hay 4 fotogramas clave en un segundo, o 1 segundo equivale al 4% de la animación.

Una vez hechos todos estos cálculos, ahora podemos aplicar animación CSS al control deslizante. Podemos poner la animación. bucle sin fin, porque Para cada imagen, se establecerá una animación separada, independiente de las otras imágenes.

#slider li.firstanimation (animación: ciclo 25s lineal infinito;) #slider li. secondanimation (animación: ciclodos 25s lineal infinito;) #slider li.thirdanimation (animación: ciclotres 25s lineal infinito;) #slider li.fourthanimation (animación: ciclocuatro 25s lineal infinito;) #slider li.fifthanimation (animación: ciclocinco 25s lineal infinito;)

Una vez asignadas las propiedades de la animación, debemos usar fotogramas clave para poner la animación en movimiento.
Siguiendo este principio, podemos conectar todas las animaciones entre sí, incluso si son independientes entre sí. Esto nos dará un bucle infinito.
Agregué propiedades de "opacidad" e "índice z" para hacer más atractiva la transición de una imagen a la siguiente.
Como puedes ver en el código, la primera animación tiene más fotogramas clave que las demás. La razón de esto es que cuando se inicia el control deslizante, la primera imagen deja espacio para la segunda, pero cuando la última imagen termina su animación, la primera imagen debe tener fotogramas clave adicionales para evitar crear interrupciones entre los bucles de animación.

Aquí está todo el código de las animaciones:
/* Animación */ @keyframes ciclo ( 0% ( top: 0px; ) /* Cuando se inicia el control deslizante, la primera imagen ya es visible */ 4% ( top: 0px; ) /* Posición inicial */ 16% ( top : 0px; opacidad:1; índice z:0; ) /* Del 4% al 16% (3 segundos) la imagen es visible */ 20% (arriba: 325px; opacidad: 0; índice z: 0; ) /* desde 16% hasta 20% (1 segundo) de salida de imagen */ 21% (arriba: -325px; opacidad: 0; índice z: -1; ) /* Regresar a la posición original fuera de la máscara */ 92 % (arriba: -325px; opacidad: 0; índice z: 0; ) 96% (arriba: -325px; opacidad: 0; ) /* Del 96% al 100% (1 segundo) – entrada */ 100%( arriba: 0px; opacidad: 1; ) ) @keyframes ciclodos ( 0% ( arriba: -325px; opacidad: 0; ) /* Posición inicial fuera de la máscara */ 16% ( arriba: -325px; opacidad: 0; ) / * Inicio del movimiento al 16% * / 20% ( arriba: 0px; opacidad: 1; ) 24% ( arriba: 0px; opacidad: 1; ) /* Del 20% al 24% (dentro de 1 segundo) - entrada */ 36% (arriba: 0px; opacidad: 1; índice z: 0; ) /* Del 24% al 36% (3 segundos) la imagen es visible */ 40% (arriba: 325px; opacidad: 0; índice z : 0; ) /* Desde 36% hasta 40% (1 segundo) - salir */ 41% (arriba: -325px; opacidad: 0; índice z: -1; ) /* Volver a la posición original */ 100%( arriba: -325px; opacidad: 0; índice z: -1; ) ) @keyframes ciclotres ( 0% ( arriba: -325px; opacidad: 0; ) 36% ( arriba: -325px; opacidad: 0; ) 40% ( arriba: 0px; opacidad: 1; ) 44% ( arriba: 0px; opacidad: 1; ) 56% ( arriba: 0px; opacidad: 1; ) 60% ( arriba : 325px; opacidad: 0; índice z: 0; ) 61% (arriba: -325px; opacidad: 0; índice z: -1; ) 100% (arriba: -325px; opacidad: 0; índice z: -1; ) ) @keyframes ciclocuatro ( 0% ( arriba: -325px; opacidad: 0; ) 56% ( arriba: -325px; opacidad: 0; ) 60% ( arriba: 0px; opacidad: 1; ) 64% ( arriba: 0px; opacidad: 1; ) 76% (arriba: 0px; opacidad: 1; índice z: 0; ) 80% (arriba: 325px; opacidad: 0; índice z: 0; ) 81% (arriba: -325px; opacidad: 0; índice z: -1; ) 100% (arriba: -325px; opacidad: 0; índice z: -1; ) ) @keyframes ciclocinco (0% (arriba: -325px; opacidad: 0; ) 76% (arriba: -325px; opacidad: 0; ) 80% (arriba: 0px; opacidad: 1; ) 84% (arriba: 0px; opacidad: 1; ) 96% (arriba: 0px; opacidad: 1 ; índice z: 0; ) 100% (arriba: 325px; opacidad: 0; índice z: 0; ) )

Una vez que hayamos creado la animación, debemos agregar una barra de progreso para mostrar la duración de cada animación.

El proceso de animación de la barra de progreso es el mismo que el del control deslizante. Creemos la barra de progreso en sí:

/* Barra de progreso */ .progress-bar ( posición: relativa; arriba: -5px; ancho: 680px; alto: 5px; fondo: #000; animación: expansión completa 25s, salida infinita;)

No tengas miedo de la sintaxis. Existe la misma función que "de a". Puedes ver que los fotogramas clave establecen la aparición y desaparición de cada imagen.

/* Barra de estado de la animación */ @keyframes fullexpand ( /* La animación es estacionaria en estos fotogramas clave */ 0%, 20%, 40%, 60%, 80%, 100% ( ancho: 0%; opacidad: 0; ) / * En estos - cobra vida */ 4%, 24%, 44%, 64%, 84% ( ancho: 0%; opacidad: 0.3; ) /* En estos - se llena suavemente */ 16%, 36 %, 56%, 76%, 96% ( ancho: 100%; opacidad: 0.7; ) /* En estos fotogramas clave la barra de progreso ha completado su recorrido */ 17%, 37%, 57%, 77%, 97% ( ancho: 100%; opacidad: 0.3; ) /* En estos fotogramas clave la barra de progreso desaparecerá y luego reanudará el bucle */ 18%, 38%, 58%, 78%, 98% (ancho: 100%; opacidad: 0; ) )

El control deslizante está más o menos completo. Agreguemos algunos detalles para hacerlo más funcional. Insertaremos información sobre herramientas para los títulos de las imágenes que serán visibles al pasar el mouse.

Estilos de información sobre herramientas:
#slider .tooltip (fondo: rgba(0,0,0,0.7); ancho: 300px; alto: 60px; posición: relativa; abajo: 75px; izquierda: -320px; ) #slider .tooltip h1 (color: #fff ; tamaño de fuente: 24 px; altura de línea: 60 px;

Aquí solo hemos hecho visibles los títulos de las imágenes, pero puedes hacer lo mismo con cualquier texto, enlace o cualquier otra cosa que desees.

7. Transiciones CSS3

Hemos visto cómo aplicar transiciones CSS3 a elementos, ahora hagámoslas como información sobre herramientas.
Si recuerda, agregamos un ID a cada lista ("primero", "segundo", etc.) para que al pasar el mouse, cada información sobre herramientas se asocie con imagen separada, pero no todas las indicaciones aparecieron a la vez.

#slider .tooltip (... transición: todos los 0.3s facilitan la entrada y salida; ) #slider li#first: hover .tooltip, #slider li#segundo: hover .tooltip, #slider li#third: hover .tooltip, #slider li#cuarto: hover .tooltip, #control deslizante li#quinto: hover .tooltip (izquierda: 0px;)

8. Pausa y reinicia

Para permitir a los usuarios detener el control deslizante para ver el contenido, debemos detener la animación al pasar el mouse. También tendremos que detener la animación de la barra de progreso.

#slider: hover li, #slider: hover .progress-bar (animación-play-state: pausado;)

9. Demostración

Finalmente, hemos llegado al final de la lección. ¡El control deslizante ahora está 100% listo!
(). Funciona en Firefox 5+, Safari 4+ y Google Chrome, así como iPhone y iPad. También puede descargar el archivo ().
Gracias a Massimo Righi por sus imágenes.

10. Conclusión

El efecto es impresionante, pero hay que reconocer que este control deslizante no es muy versátil. Por ejemplo, para agregar más imágenes, necesita editar todos los fotogramas clave. CSS3 tiene gran potencial, pero tiene sus límites y, a veces, es preferible JavaScript, según el público objetivo.
Este control deslizante tiene algunos características interesantes, como pausa (al pasar el mouse) y enlaces únicos para imágenes que permitan a los usuarios interactuar con el control deslizante. Si es necesario apoyo total En todos los navegadores, no es posible utilizar CSS3, por lo que se recomienda JavaScript. Desafortunadamente, la animación CSS3 tiene muchas limitaciones. En en este momento Debido a la falta de flexibilidad, no podemos utilizarlo ampliamente. Espero que este artículo te anime a explorar CSS3 más a fondo.
No dudes en compartir tus pensamientos en los comentarios.

Del traductor:
Si encuentra algún error de traducción, cancele la suscripción en mensajes privados. Gracias.

Etiquetas:

• CSS3
• presentación de diapositivas

Agregar etiquetas

diapositiva HTML una muestra de fotografías agregará brillo fácilmente a su página y atraerá la atención tanto de los visitantes como de motores de búsqueda. Cincopa te ofrece unos sorprendentes skins rápidamente personalizables que te permitirán mostrar numerosas fotos o vídeos en un espacio relativamente pequeño y sin utilizar la cuota del servidor, gracias a alojamiento gratuito y entrega (cuyo paquete se puede aumentar por una tarifa determinada). Todo el procedimiento de creación e inserción de una presentación de diapositivas HTML lleva unos minutos y es muy fácil de completar, incluso si no tienes conocimientos de programación.

El control deslizante de fotografías HTML de Cincopa es increíblemente eficiente, confiable y atractivo. Requisitos técnicos El creador de presentaciones de diapositivas las realiza automáticamente y todo lo que realmente necesita hacer para crear una presentación de diapositivas HTML es simplemente cargar archivos de alta calidad. archivos multimedia. Estos archivos se pueden descargar desde cualquiera de sus dispositivos o desde redes sociales, como Facebook o Instagram.

PRESENTACIÓN DE DIAPOSITIVAS HTML DE SKINS de Cincopa

Cómo funciona esto

1 Elige una de nuestras increíbles máscaras.

2 Sube tus archivos a la nube” Cincopa

3 Obtenga un código simple y péguelo en su sitio web

ELIJA UNA PRESENTACIÓN DE DIAPOSITIVAS HTML DE SKIN

Elige uno de presentación de diapositivas HTML máscaras compatibles y configuración de ajustes como panel de control de ubicación, control de ubicación, vista Cooliris, reproducción aleatoria, reproducción automática, etc.; luego, observe la piel en ventana separada. Asegúrese de probar varias máscaras antes de tomar una decisión.

CARGAR ARCHIVOS MULTIMEDIA

Puede descargar tantos archivos como desee desde su escritorio, dispositivos portátiles o directamente desde la cámara web, así como desde cualquier fuente web externa. Organiza tus archivos en la nube” Cincopa; Cincopa se encarga de convertir tus fotos, cambiar el tamaño y otras adaptaciones. El diseño de la presentación de diapositivas HTML se puede cambiar más adelante desde cualquier dispositivo que posea.

INSERTAR EL CÓDIGO GENERADO

Simple interfaz paso a paso Cincopa le pedirá que elija un método; esto significa que si está ejecutando un sitio web en basado en HTML debes seleccionar la opción “Presentación de diapositivas HTML”. Copie la línea de código generada por la aplicación y péguela en cualquier lugar de su sitio.

¿Por qué utilizar el creador de presentaciones HTML de Cincopa?

Cincopa le ofrece paquetes de productos y servicios exclusivos y ricos en medios que han sido diseñados para responder a cualquier posibles requisitos, que puede obtener desde un control deslizante HTML del sitio. El creador de presentaciones de diapositivas tiene una interfaz sencilla paso a paso que lo guía a través del proceso de creación y administración, a través de software clase alta y a través de servidores dedicados que brindan confiabilidad, fluidez y rendimiento rápido Y sistema progresivo seguridad, garantizando que sus archivos estén completamente protegidos.

Cincopa te permite tomar decisiones creativas, pero te libera de todo problemas tecnicos. puedes descargar cantidad ilimitada archivos de prácticamente cualquier fuente y mostrar presentaciones de diapositivas HTML en cualquier número de sitios y canales sociales.

PRINCIPALES CARACTERÍSTICAS DE LA PRESENTACIÓN DE DIAPOSITIVAS HTML:

1. Compatible con todos los principales navegadores
2. Escalabilidad total
3. Acceso remoto
4. Especies de Cooliris
5. sistema CDN
6. Agregue una cantidad ilimitada de archivos, ilimitados según la cuota de su servidor
7. muchas pieles
8. Conversiones automáticas de fotografías y cambio de tamaño
9. Permitir o denegar la descarga de sus archivos
10. Automático respaldo e informes
11. SEO optimizado
12. Muchas opciones de personalización (tamaño, posición, reproducción aleatoria, rotación automática etc.)
13. Fácil gestión mediante un sencillo asistente
14. Alojamiento y entrega gratuitos (hasta 400 MB de memoria y 200 MB de tráfico por mes)

Complemento para crear los controles deslizantes más bellos-iView. Muchas configuraciones, navegación, temporizador, API, soporte dispositivos táctiles, inserción de vídeo y adaptabilidad.

04.03.2013 1 692

Complemento para crear una micro galería en un sitio web. Visualización automática, la posibilidad de agregar una descripción para cada imagen y un modo de desplazamiento circular, es decir. bucle.

01.02.2013 1 153

El complemento jQuery.popeye es una solución elegante y hermosa para mostrar una galería de imágenes sin salir de la página. Solo se muestra una foto en la página; cuando pasa el cursor, puede desplazarse o ampliar todas las imágenes en este conjunto. El complemento es fácil de instalar y configurar y fue desarrollado como una alternativa a los comúnmente utilizados lightbox2, fancybox o colorbox, que usan ventanas modales.

23.11.2012 7 286

Excelente jQuery responsivo control deslizante - FlexSlider. Incluye la capacidad de navegar con viñetas (puntos), le permite usar miniaturas junto con la navegación, la capacidad de insertar un video como diapositiva, una opción de carrusel y el complemento también tiene una pequeña API.

12.09.2012 4 667

Mobilyslider es un complemento jQuery simple que pesa solo 5 KB, pero tiene un aspecto minimalista y elegante. Hay varios opciones adicionales, incluida la activación/desactivación de la navegación, la flecha hacia adelante/atrás, la presentación automática de diapositivas, la selección del tipo de transición, etc.

07.06.2012 1 403

Creemos una presentación de diapositivas a pantalla completa, cuya idea principal es cortar la diapositiva actualmente abierta al navegar a la siguiente o anterior. Usando jQuery y animación css, podemos obtener transiciones únicas entre diapositivas.

09.05.2012 778

Presentación de diapositivas en jQuery con acompañamiento musical utilizando la biblioteca jPlayer multiplataforma. Las diapositivas cambian a intervalos específicos en la composición musical.

04.05.2012 892

Rhinoslider es un complemento de presentación de diapositivas jQuery bastante flexible. No sólo hay una variedad de efectos disponibles, sino que también es posible agregar estilos propios, efectos y funciones al control deslizante. En pagina oficial El complemento tiene un generador de efectos conveniente: un generador; una vez que haya hecho su elección, puede descargar inmediatamente el ejemplo de trabajo generado.

03.05.2012 2 061

Complemento de presentación de diapositivas basado en jQuery y complemento de aceleración. Se agregó la capacidad de desplazarse por las diapositivas usando la rueda del mouse. Las páginas de demostración muestran varias opciones utilizando la navegación por diapositivas.

12.04.2012 1 387

Usando jmpress, hagamos complemento jquery Para crear presentaciones de diapositivas con interesantes efectos 3D para diapositivas.

Hoy le mostraremos cómo crear una presentación de diapositivas a pantalla completa con un fondo usando solo código CSS. Usamos varios efectos para transiciones entre imágenes y también hacer que aparezca un título mediante animación implementada en CSS.

Las imágenes fueron enviadas amablemente por Mark Sebastian () y se comparten en acuerdo de licencia Creative Commons Atribución-CompartirIgual 2.0 Genérico.

Por favor tenga en cuenta que este efecto sólo funcionará en navegadores equipados con .

Disposición

Aquí usaremos una lista desordenada para la presentación de diapositivas y también agregaremos un intervalo para cada imagen y una sección con un título:

• 
  Imagen 01
  
  
  

  relajación

  
  
  
  

Los intervalos serán elementos con una imagen de fondo configurada en la presentación de diapositivas.

código CSS

Comencemos con una lista desordenada. Se arreglará y lo extenderemos por toda la ventana gráfica. También usamos el pseudoelemento :after para colocar la textura en la parte superior de la imagen:

presentación de diapositivas cb,
.cb-presentación de diapositivas: después (
posición: fija;
ancho: 100%;
altura: 100%;
arriba: 0px;
izquierda: 0px;
índice z: 0;
}
.cb-presentación de diapositivas: después (
contenido: "";
fondo: URL transparente (../images/pattern.png) repetir arriba a la izquierda;
}
Usaremos una textura de puntos repetitivos, pero también puedes usar una gradación ligeramente transparente, por ejemplo, implementada usando CSS.

Un Span que contenga una imagen de una presentación de diapositivas tendrá posicionamiento absoluto, y sus parámetros de ancho y alto se establecerán en 100%. Ya que tenemos algunos dentro. texto adicional, haremos que su color sea un poco transparente ya que no necesitamos prestarle atención. El parámetro de tamaño de fondo se establecerá en cubrir; esto nos permitirá estar seguros de que la imagen de fondo cubra toda el área del elemento y, por lo tanto, la ventana gráfica. El nivel de densidad se establece en 0. A continuación cambiaremos este parámetro a través de animación:

Cb-presentación de diapositivas li span (
ancho: 100%;
altura: 100%;
posición: absoluta;
arriba: 0px;
izquierda: 0px;
color: transparente;
tamaño de fondo: portada;
posición de fondo: 50% 50%;
repetición de fondo: ninguna;
opacidad: 0;
índice z: 0;
animación: imageAnimation 36s lineal infinito 0s;
}
La animación para cada tramo durará 36 segundos y se ejecutará. numero infinito una vez. Pero veamos los detalles un poco más adelante, pero por ahora diseñemos la sección con un encabezado:

Presentación de diapositivas cb li div (
índice z: 1000;
posición: absoluta;
abajo: 30px;
izquierda: 0px;
ancho: 100%;
alineación de texto: centro;
opacidad: 0;
color: #fff;
animación: titleAnimation 36s lineal infinito 0s;
}
.cb-presentación de diapositivas li div h3 (
familia de fuentes: "BebasNeueRegular", "Arial Narrow", Arial, sans-serif;
tamaño de fuente: 240px;
relleno: 0;
altura de línea: 200 px;
}
La animación de la sección del título también tendrá una duración de 36 segundos.

Ahora definiremos imágenes de fondo para todos los intervalos, así como un retraso en la animación para que cada imagen y título de la presentación de diapositivas aparezca 6 segundos después del elemento anterior:

Cb-presentación de diapositivas li:nth-child(1) span (
imagen de fondo: URL(../images/1.jpg)
}
.cb-presentación de diapositivas li:nth-child(2) span (
imagen de fondo: url(../images/2.jpg);
retardo de animación: 6s;
}
.cb-presentación de diapositivas li:nth-child(3) span (
imagen de fondo: url(../images/3.jpg);
retardo de animación: 12 s;
}
.cb-presentación de diapositivas li:nth-child(4) span (
imagen de fondo: url(../images/4.jpg);
retardo de animación: 18 s;
}
.cb-presentación de diapositivas li:nth-child(5) span (
imagen de fondo: url(../images/5.jpg);
retardo de animación: 24 s;
}
.cb-presentación de diapositivas li:nth-child(6) span (
imagen de fondo: url(../images/6.jpg);
retardo de animación: 30 s;
}

Presentación de diapositivas cb li:nth-child(2) div (
retardo de animación: 6s;
}
.cb-presentación de diapositivas li:nth-child(3) div (
retardo de animación: 12 s;
}
.cb-presentación de diapositivas li:nth-child(4) div (
retardo de animación: 18 s;
}
.cb-presentación de diapositivas li:nth-child(5) div (
retardo de animación: 24 s;
}
.cb-presentación de diapositivas li:nth-child(6) div (
retardo de animación: 30 s;
}
Ahora pasemos a la animación de la presentación de diapositivas. Cada tramo tendrá una animación que tendrá una duración de 36 segundos. Durante estos 36 segundos cambiaremos el nivel de densidad de 0 a 1 (esto sucederá aproximadamente al 8% del progreso de la animación). Y luego este valor del nivel de densidad durará hasta el 17% del progreso. Al alcanzar el 25% de progreso, el nivel de densidad debería volver a bajar a 0 y permanecer así hasta el final.

¿Por qué exactamente estos valores? Solo queremos que cada imagen sea visible durante 6 segundos y sabemos que al final del bucle queremos que se muestre nuevamente la primera imagen. Sólo tenemos 6 imágenes, por lo que necesitaremos 36 segundos para todo el bucle. Ahora necesitamos distribuir los niveles de densidad en consecuencia. Sabiendo que nuestra segunda imagen comenzará a cambiar a los 6 segundos, necesitamos saber el porcentaje que tomará esta animación en el caso de la primera imagen. Dividimos 6 entre 36 y obtenemos 0,166... ​​lo que significa que nuestro umbral de fotogramas será del 16%. Ahora, como no queremos que la imagen desaparezca todo el tiempo, definimos el siguiente umbral, el intermedio, que será la mitad de lo que calculamos, es decir, el 8%. Este es el período en el que necesitamos mostrar una imagen completa, y debería comenzar a desvanecerse al 17% y la desaparición completa debería ocurrir al 25%.

@keyframes animación de imagen (
0% (opacidad: 0; función de sincronización de animación: fácil entrada;)
8% (opacidad: 1; función de sincronización de animación: salida gradual;)
17% (opacidad: 1)
25% (opacidad: 0)
100% (opacidad: 0)
}
Lo mismo hay que hacer con el título, sólo que hay que hacerlo desaparecer un poco más rápido. Por lo tanto, el nivel de densidad debería llegar a 0 ya con un 19% de progreso:

@keyframes títuloAnimación (
0% (opacidad: 0)
8% (opacidad: 1)
17% (opacidad: 1)
19% (opacidad: 0)
100% (opacidad: 0)
}
En cuanto a los navegadores sin soporte de animación, en tal caso simplemente mostramos la última imagen de la presentación de diapositivas estableciendo el nivel de densidad del intervalo en 1:

No-cssanimations .cb-slideshow li span(
opacidad: 1;
}
La clase no-cssanimations se agrega usando Modernizr.

Ahora también cuidemos el tamaño de fuente de los encabezados para aquellos momentos en los que el tamaño de la ventana gráfica será más pequeño. Usamos consultas de medios para reducir la fuente a un ancho determinado:

@media pantalla y (ancho máximo: 1140px) (
.cb-slideshow li div h3 (tamaño de fuente: 140px)
}
@pantalla multimedia y (ancho máximo: 600 px) (
.cb-slideshow li div h3 (tamaño de fuente: 80px)
}
¡Y eso es todo con el desarrollo de una versión simplificada de la presentación de diapositivas! Ahora veamos cómo podemos mejorar las transiciones.

Ejemplo de animación alternativa

Ahora podemos jugar con algunas animaciones para mostrar la imagen y los títulos.

La siguiente animación implica ampliar la imagen y luego girarla ligeramente:

@keyframes animación de imagen (
0% {
opacidad: 0;
función de sincronización de animación: entrada fácil;
}
8% {
opacidad: 1;
transformar: escala (1,05);
función de sincronización de animación: salida gradual;
}
17% {
opacidad: 1;
}
25% {
opacidad: 0;
transformar: escala (1.1) rotar (3 grados);
}
100% (opacidad: 0)
}
El encabezado irá con lado derecho(tendremos que cambiar la alineación del texto del título a la derecha) y luego atenuarlo, moviéndolo hacia la izquierda:

@keyframes títuloAnimación (
0% {
opacidad: 0;
transformar: traducirX(200px);
}
8% {
opacidad: 1;
transformar: traducirX(0px);
}
17% {
opacidad: 1;
transformar: traducirX(0px);
}
19% {
opacidad: 0;
transformar: traducirX(-400px);
}
25% (opacidad: 0)
100% (opacidad: 0)
}
¡No olvides que puede haber muchas opciones, lo principal es no tener miedo de experimentar!

Manifestación

Aquí puedes ver varias opciones para usar la animación.

• Traducción
• Tutorial

Gracias a CSS3 podremos crear efectos de animación sin utilizar JavaScript, lo que facilitará el trabajo de muchos desarrolladores.
No deberíamos abusar de CSS3 porque los navegadores más antiguos no admiten todas sus propiedades. De todos modos, todos vemos el potencial de CSS3 y en este artículo discutiremos cómo crear un control deslizante de imagen en bucle usando solo animación CSS3.

Secciones del artículo

Para comprender el proceso de principio a fin, a continuación se muestra el contenido del artículo. Tenga en cuenta que este efecto sólo funcionará correctamente en navegadores modernos que admitan las propiedades CSS3 utilizadas.

1. Introducción
   Descripción de conceptos básicos relacionados con las transiciones CSS3 y la animación de fotogramas clave.
2. marcado HTML
   Creación de marcado HTML para un control deslizante de imagen.
3. Estilos CSS
   Cree una hoja de estilo para la visualización del control deslizante.
4. Animación de fotogramas clave CSS3
   Agregar animación al control deslizante. Analizaremos los diversos procesos que tienen lugar aquí.
5. 
   Agregando una barra de progreso para nuestro control deslizante.
6. 
   Agregar información sobre herramientas para mostrar títulos.
7. Transiciones CSS3
   Mostrar información sobre herramientas al pasar el mouse usando transiciones CSS3
8. Pausar y reiniciar
9. Demostración
   Mostremos el control deslizante en acción.
10. Conclusión
    Pensamientos finales.

1. Introducción

Para utilizar este tutorial, necesitará tener conocimientos básicos de CSS, específicamente transiciones CSS3 y animaciones de fotogramas clave.
Con estos conceptos simples, veremos cómo hacer un control deslizante de imagen funcional.

Conceptos básicos de transiciones CSS3

Normalmente, cuando cambia un valor CSS, los cambios se muestran estáticamente. Ahora, gracias a la propiedad de transición, podemos realizar cambios fácilmente de un estado a otro.

Podemos utilizar cuatro propiedades de transición:

Propiedad de transición
Especifica los nombres de las propiedades CSS a las que se deben aplicar las transiciones.

Duración de la transición
Define el tiempo dentro del cual debe ocurrir la transición.

Función de sincronización de transición
Determina cómo se calculan los valores de transición intermedios.

Retraso de transición
Determina cuándo se desencadena la transición.

Actualmente, las transiciones CSS3 son compatibles con Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ e IE 10. Dado que la tecnología aún es relativamente nueva, Se requieren prefijos del navegador. La sintaxis es la misma para todos los navegadores excepto por agregar los prefijos necesarios. Los omitiremos en este artículo, pero no olvides incluir los prefijos en el código.

Veamos cómo aplicar una transición simple a un enlace:
a ( color: #000; propiedad de transición: color; duración de transición: 0,7 s; función de sincronización de transición: entrada fácil; retraso de transición: 0,3 s; ) a: pasar el cursor ( color: #fff; )

Al asignar una animación a un elemento, también puedes utilizar la forma abreviada:
a ( color: #000; transición: color 0,7 s entrada fácil 0,3 s; ) a:hover ( color: #fff; )

Conceptos básicos de animación CSS3

La animación CSS nos permite crear animaciones sin JavaScript utilizando un conjunto de fotogramas clave.
A diferencia de las transiciones CSS, las animaciones de fotogramas clave actualmente solo son compatibles con los navegadores WebKit, Firefox y pronto IE 10. Los navegadores no compatibles simplemente ignorarán el código de animación.

La propiedad de animación tiene ocho subpropiedades:

Retraso de animación
Determina cuándo comienza la animación.

dirección de animación
Determina si la animación debe reproducirse hacia atrás en bucles alternos.

Duración de la animación
Determina el tiempo que tarda la animación en completar un bucle.

Recuento de iteraciones de animación
Determina el número de ciclos de animación antes de detenerse.

Nombre de la animación
Define el nombre de la regla en @keyframes.

Estado de reproducción de animación
Determina si la animación se está reproduciendo o en pausa.

Modo de relleno de animación
Define cómo la animación CSS debe aplicar estilos a su objetivo antes y después de la ejecución.

Veamos cómo aplicar una animación simple a un bloque:
/* El elemento al que aplicamos la animación. */ div (nombre-animación: movimiento; duración-animación: 1 s; función-timing-animación: entrada-salida fácil; retardo-animación: 0,5 s; recuento-iteración-animación: 2; dirección-animación: alternativa; - moz-animation-name: mover; -moz-animation-duration: 1s; -moz-animation-timing-function: facilidad de entrada-salida; -moz-animation-iteration-count: 2; alternativo; -webkit-animation-name: -webkit-animation-duration: retraso: 0,5 s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternativo) /* La animación en sí. */ @keyframes mover ( de ( transformar: traducirX(0); ) a ( transformar: traducirX(100px); ) ) @-moz-keyframes mover ( de ( -moz-transform: traducirX(0); ) a ( - moz-transform: traducirX(100px); ) ) @-webkit-keyframes mover ( de ( -webkit-transform: traducirX(0); ) a ( -webkit-transform: traducirX(100px); ) )

Podemos usar una abreviatura para configurar todas las propiedades de la animación a la vez:
div (animación: movimiento 1 entra y sale 0,5 s 2 alternativo; -moz-animation: movimiento 1 entra y sale 0,5 s 2 alternativo; -webkit-animation: movimiento 1 entra y sale 0,5 s 2 alternativo; )

Fotogramas clave

Cada fotograma clave describe cómo debe comportarse un elemento animado en un momento determinado de la animación. Los fotogramas clave toman valores porcentuales para determinar el tiempo: 0% es el inicio de la animación, mientras que 100% es el final. Opcionalmente puedes agregar fotogramas intermedios para las animaciones.

/* Animación de 0% a 100% */ @keyframes move ( 0% ( transform: TranslateX(0); ) 100% ( transform: TranslateX(100px); ) ) /* Animación con frame intermedio */ @keyframes move ( 0% ( transformar: traducirX(0); ) 50% ( transformar: traducirX(20px); ) 100% ( transformar: traducirX(100px); ) )

El W3C tiene mucha información útil y detallada sobre la “animación CSS3”

La estructura básica de nuestro control deslizante.

Ahora que sabemos cómo funcionan las transiciones y animaciones, veamos cómo crear nuestro control deslizante usando solo CSS3. Este boceto muestra cómo debería funcionar la animación:

Como puedes ver, el control deslizante será el contenedor en el que se mostrarán las imágenes.
La animación es muy simple: la imagen sigue una dirección determinada, cambiando las propiedades "superior", "índice z" y "opacidad".
Saltemos directamente al marcado HTML para crear el control deslizante.

2. marcado HTML

El marcado HTML es muy simple. Está claramente organizado y es compatible con SEO. Primero veamos el código completo y luego descubramos en detalle cómo funciona todo.

ID de división="control deslizante"
Este es el contenedor deslizante principal. No tiene una función específica, pero la necesitamos para pausar la animación.

ID de división = "máscara"
Usaremos este bloque para ocultar todo lo que sucede fuera del control deslizante. Además de esto, la máscara nos permite mostrar el contenido del slider.

Li id="primera" clase="primera animación"
Cada elemento de la lista tiene un ID y una clase. El ID muestra información sobre herramientas y la clase está vinculada a la animación que está a punto de ocurrir.

clase div = "información sobre herramientas"
Este bloque muestra el título de la imagen. Puede cambiarlo según sus necesidades, por ejemplo, haciendo clic en él o agregando una breve descripción.

Div clase = "barra de progreso"
Este bloque contiene una función que muestra el progreso de la animación.

Ahora es el momento de generar el archivo CSS.

3. Estilos CSS

Creemos una estructura deslizante básica. Será del mismo tamaño que la imagen. La propiedad de borde será útil para crear un borde alrededor de una imagen.

/* Estructura del control deslizante */ #slider ( fondo: #000; borde: 5px sólido #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); alto: 320px; ancho: 680px; margen: 40px auto 0; visible; posición: relativa)

La clase "máscara" ocultará todos los elementos que se encuentran fuera del control deslizante. Su altura debe ser igual a la altura del control deslizante.

/* Ocultar todo lo que está fuera del control deslizante */ #mask ( overflow: oculto; altura: 320px; )

Finalmente, para ordenar la lista de imágenes, usaremos "posición: absoluta" y "arriba: -325px" para que todas las imágenes queden ubicadas fuera del control deslizante.

/* Lista de imágenes */ #slider ul ( margen: 0; padding: 0; posición: relativa; ) #slider li ( ancho: 680px; /* Ancho de imagen */ alto: 320px; /* Alto de imagen */ posición: absoluto; arriba: -325px; /* Posición inicial (fuera del control deslizante) */ estilo de lista: ninguno)

Con estas pocas líneas de código, creamos el marcado del control deslizante. Ahora solo necesitamos agregar animación.

4. Animación de fotogramas clave CSS3

Antes de comenzar con la animación, debemos definir algunos parámetros para que la animación sea correcta.
Como sabemos, la duración total de la animación será de 25 segundos, pero necesitamos saber cuántos fotogramas clave habrá en 1 segundo.
Resolvamos una serie de operaciones que nos darán el número exacto de fotogramas clave y la duración total de la animación. Aquí están los cálculos:
Determine el número total de imágenes en el control deslizante: 5 ;
Determinamos la duración de la animación para cada imagen: 5 segundos;
Determinamos la duración total de la animación multiplicando el número total de imágenes por la duración de cada una: 5 imágenes × 5 segundos = 25 segundos;
Calculamos cuántos fotogramas clave (porcentaje) habrá en un segundo.
Divida el número total de fotogramas clave por la duración total de la animación: 100%/25 = 4% ,
Hay 4 fotogramas clave en un segundo, o 1 segundo equivale al 4% de la animación.

Una vez hechos todos estos cálculos, ahora podemos aplicar animación CSS al control deslizante. Podemos poner la animación en un bucle infinito porque... Para cada imagen, se establecerá una animación separada, independiente de las otras imágenes.

#slider li.firstanimation (animación: ciclo 25s lineal infinito;) #slider li. secondanimation (animación: ciclodos 25s lineal infinito;) #slider li.thirdanimation (animación: ciclotres 25s lineal infinito;) #slider li.fourthanimation (animación: ciclocuatro 25s lineal infinito;) #slider li.fifthanimation (animación: ciclocinco 25s lineal infinito;)

Una vez asignadas las propiedades de la animación, debemos utilizar fotogramas clave para poner la animación en movimiento.
Siguiendo este principio, podemos conectar todas las animaciones entre sí, incluso si son independientes entre sí. Esto nos dará un bucle infinito.
Agregué propiedades de "opacidad" e "índice z" para hacer más atractiva la transición de una imagen a la siguiente.
Como puedes ver en el código, la primera animación tiene más fotogramas clave que las demás. La razón de esto es que cuando se inicia el control deslizante, la primera imagen deja espacio para la segunda, pero cuando la última imagen termina su animación, la primera imagen debe tener fotogramas clave adicionales para evitar crear interrupciones entre los bucles de animación.

Aquí está todo el código de las animaciones:
/* Animación */ @keyframes ciclo ( 0% ( top: 0px; ) /* Cuando se inicia el control deslizante, la primera imagen ya es visible */ 4% ( top: 0px; ) /* Posición inicial */ 16% ( top : 0px; opacidad:1; índice z:0; ) /* Del 4% al 16% (3 segundos) la imagen es visible */ 20% (arriba: 325px; opacidad: 0; índice z: 0; ) /* desde 16% hasta 20% (1 segundo) de salida de imagen */ 21% (arriba: -325px; opacidad: 0; índice z: -1; ) /* Regresar a la posición original fuera de la máscara */ 92 % (arriba: -325px; opacidad: 0; índice z: 0; ) 96% (arriba: -325px; opacidad: 0; ) /* Del 96% al 100% (1 segundo) – entrada */ 100%( arriba: 0px; opacidad: 1; ) ) @keyframes ciclodos ( 0% ( arriba: -325px; opacidad: 0; ) /* Posición inicial fuera de la máscara */ 16% ( arriba: -325px; opacidad: 0; ) / * Inicio del movimiento al 16% * / 20% ( arriba: 0px; opacidad: 1; ) 24% ( arriba: 0px; opacidad: 1; ) /* Del 20% al 24% (dentro de 1 segundo) - entrada */ 36% (arriba: 0px; opacidad: 1; índice z: 0; ) /* Del 24% al 36% (3 segundos) la imagen es visible */ 40% (arriba: 325px; opacidad: 0; índice z : 0; ) /* Desde 36% hasta 40% (1 segundo) - salir */ 41% (arriba: -325px; opacidad: 0; índice z: -1; ) /* Volver a la posición original */ 100%( arriba: -325px; opacidad: 0; índice z: -1; ) ) @keyframes ciclotres ( 0% ( arriba: -325px; opacidad: 0; ) 36% ( arriba: -325px; opacidad: 0; ) 40% ( arriba: 0px; opacidad: 1; ) 44% ( arriba: 0px; opacidad: 1; ) 56% ( arriba: 0px; opacidad: 1; ) 60% ( arriba : 325px; opacidad: 0; índice z: 0; ) 61% (arriba: -325px; opacidad: 0; índice z: -1; ) 100% (arriba: -325px; opacidad: 0; índice z: -1; ) ) @keyframes ciclocuatro ( 0% ( arriba: -325px; opacidad: 0; ) 56% ( arriba: -325px; opacidad: 0; ) 60% ( arriba: 0px; opacidad: 1; ) 64% ( arriba: 0px; opacidad: 1; ) 76% (arriba: 0px; opacidad: 1; índice z: 0; ) 80% (arriba: 325px; opacidad: 0; índice z: 0; ) 81% (arriba: -325px; opacidad: 0; índice z: -1; ) 100% (arriba: -325px; opacidad: 0; índice z: -1; ) ) @keyframes ciclocinco (0% (arriba: -325px; opacidad: 0; ) 76% (arriba: -325px; opacidad: 0; ) 80% (arriba: 0px; opacidad: 1; ) 84% (arriba: 0px; opacidad: 1; ) 96% (arriba: 0px; opacidad: 1 ; índice z: 0; ) 100% (arriba: 325px; opacidad: 0; índice z: 0; ) )

Una vez que hayamos creado la animación, debemos agregar una barra de progreso para mostrar la duración de cada animación.

El proceso de animación de la barra de progreso es el mismo que el del control deslizante. Creemos la barra de progreso en sí:

/* Barra de progreso */ .progress-bar ( posición: relativa; arriba: -5px; ancho: 680px; alto: 5px; fondo: #000; animación: expansión completa 25s, salida infinita;)

No tengas miedo de la sintaxis. Existe la misma función que "de a". Puedes ver que los fotogramas clave establecen la aparición y desaparición de cada imagen.

/* Barra de estado de la animación */ @keyframes fullexpand ( /* La animación es estacionaria en estos fotogramas clave */ 0%, 20%, 40%, 60%, 80%, 100% ( ancho: 0%; opacidad: 0; ) / * En estos - cobra vida */ 4%, 24%, 44%, 64%, 84% ( ancho: 0%; opacidad: 0.3; ) /* En estos - se llena suavemente */ 16%, 36 %, 56%, 76%, 96% ( ancho: 100%; opacidad: 0.7; ) /* En estos fotogramas clave la barra de progreso ha completado su recorrido */ 17%, 37%, 57%, 77%, 97% ( ancho: 100%; opacidad: 0.3; ) /* En estos fotogramas clave la barra de progreso desaparecerá y luego reanudará el bucle */ 18%, 38%, 58%, 78%, 98% (ancho: 100%; opacidad: 0; ) )

El control deslizante está más o menos completo. Agreguemos algunos detalles para hacerlo más funcional. Insertaremos información sobre herramientas para los títulos de las imágenes que serán visibles al pasar el mouse.

Estilos de información sobre herramientas:
#slider .tooltip (fondo: rgba(0,0,0,0.7); ancho: 300px; alto: 60px; posición: relativa; abajo: 75px; izquierda: -320px; ) #slider .tooltip h1 (color: #fff ; tamaño de fuente: 24 px; altura de línea: 60 px;

Aquí solo hemos hecho visibles los títulos de las imágenes, pero puedes hacer lo mismo con cualquier texto, enlace o cualquier otra cosa que desees.

7. Transiciones CSS3

Hemos visto cómo aplicar transiciones CSS3 a elementos, ahora hagámoslas como información sobre herramientas.
Si recuerda, agregamos una identificación a cada lista ("primera", "segunda", etc.) para que al pasar el mouse, cada información sobre herramientas se asocie con una imagen separada, sin que todas las sugerencias aparezcan a la vez.

#slider .tooltip (... transición: todos los 0.3s facilitan la entrada y salida; ) #slider li#first: hover .tooltip, #slider li#segundo: hover .tooltip, #slider li#third: hover .tooltip, #slider li#cuarto: hover .tooltip, #control deslizante li#quinto: hover .tooltip (izquierda: 0px;)

8. Pausa y reinicia

Para permitir a los usuarios detener el control deslizante para ver el contenido, debemos detener la animación al pasar el mouse. También tendremos que detener la animación de la barra de progreso.

#slider: hover li, #slider: hover .progress-bar (animación-play-state: pausado;)

9. Demostración

Finalmente, hemos llegado al final de la lección. ¡El control deslizante ahora está 100% listo!
(). Funciona en Firefox 5+, Safari 4+ y Google Chrome, así como en iPhone y iPad. También puede descargar el archivo ().
Gracias a Massimo Righi por sus imágenes.

10. Conclusión

El efecto es impresionante, pero hay que reconocer que este control deslizante no es muy versátil. Por ejemplo, para agregar más imágenes, debe editar todos los fotogramas clave. CSS3 tiene mucho potencial, pero tiene sus límites y, a veces, es preferible JavaScript, dependiendo del público objetivo.
Este control deslizante tiene algunas características interesantes como pausa (al pasar el mouse) y enlaces de imágenes únicos que permiten a los usuarios interactuar con el control deslizante. Si se requiere compatibilidad total en todos los navegadores, no es posible utilizar CSS3, por lo que se recomienda JavaScript. Desafortunadamente, la animación CSS3 tiene muchas limitaciones. Por el momento, debido a la falta de flexibilidad, no podemos utilizarlo ampliamente. Espero que este artículo te anime a explorar CSS3 más a fondo.
No dudes en compartir tus pensamientos en los comentarios.

Del traductor:
Si encuentra algún error de traducción, cancele la suscripción en mensajes privados. Gracias.

Etiquetas: Agregar etiquetas