IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM 1 TRANSICIONES Bernardo Chenlo
2 ANIMANDO CON CSS3 Cómo animar con 3 líneas de CSS en lugar de 60 de JS
Transiciones CSS3 Desarrolladas inicialmente por el equipo de WebKit para Safari, actualmente están especificadas por el W3C. Ejemplo de cómo al aumentar las funcionalidades del navegador, la complejidad de codificar a la hora del desarrollo disminuye. El navegador se encarga de animar los elementos que muestra por pantalla. Se terminó tener que usar largos programas con Javascript.
Un primer ejemplo Vamos a hacer una transición de color en un enlace al colocar el puntero encima. a.boton-verde { padding: 10px 20px; background: #9c3; } a.boton-verde:hover { background: #690; }
Suave es la animación El cambio de color del ejemplo, se produce de golpe al situar el cursor sobre el elemento. Vamos a hacer una transición suave entre los dos colores usando animación CSS3. De momento hay que añadir los vendorprefixes para conseguir la mayor compatibilidad.
Propiedades CSS3 por la transición transition-property Propiedad CSS que queremos animar transition-duration Tiempo que durará la animación transistion-timing-function Velocidad a la que se producirá la animación
Primer ejemplo animado a.boton-verde { padding: 10px 20px; background: #9c3; transition-property: background; transition-duration: 3s; transition-timing-function: ease; } a.boton-verde:hover { background: #690; }
Segundo ejemplo animado a.boton-verde { padding: 10px 20px; background: #9c3; transition-property: all; transition-duration: 3s; transition-timing-function: ease; } a.boton-verde:hover { padding: 100px 200px; background: #690; }
Segundo ejemplo simplificado a.boton-verde { padding: 10px 20px; background: #9c3; transition: all 3s; } a.boton-verde:hover { padding: 100px 200px; background: #690; }
10 TRANSFORMANDO CON ANIMACIÓN Efectos especiales con pocas líneas de CSS3
CSS3 FX Podemos aplicar transiciones CSS3 a muchas propiedades. En general, a todas las que pasen de un valor finito a otro. Por ejemplo las que pasan de un tamaño, posición o color a otro. Pero los efectos son más espectaculares si las combinamos con transformaciones
Girando a Iron Man.bocaabajo:hover { } transform: rotate(180deg); transition: all 2s; Buen efecto, pero al retirar el cursos, vuelve bruscamente a la posición original.
Girando a Iron Man v2.bocaabajo { transition: all 2s; }.bocaabajo:hover { transform: rotate(180deg); } Ahora el efecto se produce tanto en el hover, como en la vuelta al estado original.
14 TRANSITION TIMING FUNCTIONS Animando a varias velocidades
Transition Timing Functions Con transition-duration indicamos el tiempo que va a pasar entre que empieza el cambio, hasta que se llega al estado final. Pero podemos hacer que ese cambio se produzca linealmente, o que empiece lento y se vaya acelerando, entre otras muchas opciones. Para ello disponemos de distintas funciones de tiempo de transición
Transition Timing Functions linear Velocidad constante ease (función por defecto) Comienzo suave, acelera y final despacio ease-in Comienzo despacio, acelera y termina de golpe ease-out Empieza de golpe, acelera y termina despacio ease-in-out Comienzo despacio, acelera y termina despacio
Transition Timing Functions
PROYECTOS Manos a la obra
PRACTICA 1 Galería de fotos con efectos
Galería de fotos con efectos Haremos una galería para 3 imágenes Descargar 3 pares de imágenes: Imagen a tamaño original (1024x768) Miniatura de la imagen original (200x150)
Galería de fotos con efectos HTML inicial Lista de imágenes <ul il="galeria"> <li class="miniatura"> <img src="images/imagen1_thumb.jpg" alt=""> </li> <li> <img src="images/imagen1.jpg" alt=""> </li> <! Igual con las otras dos imágenes --> </ul>
Galería de fotos con efectos CSS inicial Lista de imágenes ul#galeria { position: relative; list-style: none; } ul#galeria li.miniatura img { width: 200px; height: 150px; margin: 2.2em; } ul#galeria li.imagen { position: absolute; left: 300px; top: 2.2em; }
Galería de fotos con efectos Resultado parcial
Galería de fotos con efectos Ocultar las imágenes completas opacity:0; Al colocar el cursor sobre la miniatura, hacer visible la imagen completa ul#galeria li.miniatura:hover + li.imagen Animar este cambio para suavizar la transición transition: 0.85s opacity linear;
Galería de fotos con efectos Ocultar las imágenes completas opacity:0; Al colocar el cursor sobre la miniatura, hacer visible la imagen completa ul#galeria li.miniatura:hover + li.imagen Animar este cambio para suavizar la transición transition: 0.85s opacity linear;
Galería de fotos con efectos Resultado final
PRACTICA 2 Montón de fotografías
Montón de fotografías Haremos una galería para 3 imágenes Descargar 3 pares de imágenes: Imagen a tamaño original (1024x768) Miniatura de la imagen original (200x150)
Montón de fotografías HTML inicial Div con las imágenes <div id="fotografias"> <img src="images/imagen1.jpg" alt=""> <img src="images/imagen2.jpg" alt=""> <img src="images/imagen3.jpg" alt=""> </div>
Montón de fotografías CSS inicial Div con las imágenes #fotografias, #fotografias img { width: 640px; height: 480px; } #fotografias { margin: 0 auto; }
Montón de fotografías Resultado parcial
Montón de fotografías Colocamos todas las imágenes sobre puestas position: absolute; Les ponemos un borde blanco a las imágenes y una sombra negra exterior
Montón de fotografías Resultado parcial
Montón de fotografías Cuando pongamos el cursos encima vamos a rotar la primera y la última imagen Rotamos la primera imagen 24deg #fotografias:hover img:first-child Rotamos la última imagen -24deg #fotografias:hover img:first-child Fijamos un eje de giro transform-origin: center 1200px;
Montón de fotografías Resultado final
PRACTICA 3 Menú desplegable
Menú desplegable HTML inicial Menú desplegable <nav> <ul> <li><a href="#">inicio</a> <li><a href="#">servicios</a> <ul class="submenu"> <li><a href="#">consultoría</a> <li><a href="#">diseño</a> <li><a href="#">desarrollo</a> </ul> <li><a href="#">contacto</a> </ul> </nav>
Menú desplegable CSS inicial Menú desplegable nav { height: 41px; background: #35f; } nav ul li { display: block; width: 150px; text-align: center; float: left; margin: 0; padding: 0; }
Menú desplegable CSS inicial Menú desplegable nav a { color: #fff; text-decoration: none; display: block; padding: 10px; }
Menú desplegable CSS inicial Menú desplegable nav ul.submenu { background: rgba(0,0,0,0.8); position: relative; border-radius: 0 0 5px 5px; } nav ul.submenu li { float: none; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.3); }
Menú desplegable Resultado parcial
Menú desplegable Ocultamos el submenú deplegable height: 0px; overflow: hidden; Al colocar el cursos encima de los elementos del menu, aumentar al altura del submenú para que se vea nav ul li:hover ul.submenu Añadir una transición para suavizar la animación
Menú desplegable Resultado final
PRACTICA 4 Navegación horizontal con pestañas
Navegación horizontal con pestañas HTML inicial <nav> <ul role="navigation"> <li>inicio</li> <li>novedades</li> <li>empresa</li> <li>contacto</li> </ul> </nav>
Navegación horizontal con pestañas Alineamos las pestañas Letra mayúscula, familia Futura Añadimos a las pestañas Borde fino gris Redondeamos las esquinas superiores Añadimos sombra a las pestaña y a los enlaces Gradiente como fondo background: linear-gradient(#dfc891, #776c51);
Navegación horizontal con pestañas Resultado parcial
Navegación horizontal con pestañas CSS ul[role=navigation] { background: #000; padding-top: 3.2em; padding-bottom: 1em; overflow: hidden; margin-top: 0; } ul[role=navigation] li { margin-left: -.5em; }
Navegación horizontal con pestañas Resultado parcial
Navegación horizontal con pestañas Al colocar el cursor sobre una de las pestañas hacer que se eleve y se superponga la resto de las pestañas
Navegación horizontal con pestañas Resultado final
Extra Con la librería jquery (para facilitar el Javascript) vamos a hacer que tras hacer click sobre un enlace del menú, destaque
Extra Importar jquery en index.html https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js $(function(){ $('a').click(function() { $('a.actual').removeclass('actua l'); $(this).addclass('actual'); }); });