IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM TRANSICIONES. Bernardo Chenlo

Transcripción

1 IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM 1 TRANSICIONES Bernardo Chenlo

2 2 ANIMANDO CON CSS3 Cómo animar con 3 líneas de CSS en lugar de 60 de JS

3 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.

4 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; }

5 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.

6 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

7 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; }

8 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; }

9 Segundo ejemplo simplificado a.boton-verde { padding: 10px 20px; background: #9c3; transition: all 3s; } a.boton-verde:hover { padding: 100px 200px; background: #690; }

10 10 TRANSFORMANDO CON ANIMACIÓN Efectos especiales con pocas líneas de CSS3

11 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

12 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.

13 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 14 TRANSITION TIMING FUNCTIONS Animando a varias velocidades

15 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

16 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

17 Transition Timing Functions

18 PROYECTOS Manos a la obra

19 PRACTICA 1 Galería de fotos con efectos

20 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)

21 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>

22 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; }

23 Galería de fotos con efectos Resultado parcial

24 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;

25 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;

26 Galería de fotos con efectos Resultado final

27 PRACTICA 2 Montón de fotografías

28 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)

29 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>

30 Montón de fotografías CSS inicial Div con las imágenes #fotografias, #fotografias img { width: 640px; height: 480px; } #fotografias { margin: 0 auto; }

31 Montón de fotografías Resultado parcial

32 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

33 Montón de fotografías Resultado parcial

34 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;

35 Montón de fotografías Resultado final

36 PRACTICA 3 Menú desplegable

37 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>

38 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; }

39 Menú desplegable CSS inicial Menú desplegable nav a { color: #fff; text-decoration: none; display: block; padding: 10px; }

40 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); }

41 Menú desplegable Resultado parcial

42 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

43 Menú desplegable Resultado final

44 PRACTICA 4 Navegación horizontal con pestañas

45 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>

46 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);

47 Navegación horizontal con pestañas Resultado parcial

48 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; }

49 Navegación horizontal con pestañas Resultado parcial

50 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

51 Navegación horizontal con pestañas Resultado final

52 Extra Con la librería jquery (para facilitar el Javascript) vamos a hacer que tras hacer click sobre un enlace del menú, destaque

53 Extra Importar jquery en index.html $(function(){ $('a').click(function() { $('a.actual').removeclass('actua l'); $(this).addclass('actual'); }); });