Blog de Diseño Web

Tutorial: Mantener fijo el menú al hacer Scroll (Parte I)

mantener div al hacer scroll

HAY UN TUTORIAL MEJORADO CON ESTE MISMO EFECTO: PODEIS VERLO EN: MANTENER FIJO EL MENÚ AL HACER SCROLL

Cada vez está más de moda este efecto; se trata de mantener el menú fijo en el top de la pantalla al hacer scroll vertical.

Puede parecer complicado, pero la verdad que es muy facilito de hacer.

Este pequeño código lo que hará es añadir una clase al menú y al contenedor posterior mediante jquery.

Es importante que al aplicar estas líneas no ocurra ningún salto raro que ensucie nuestra página Web. Para ello lo que vamos a hacer es darle un alto (height) fijo a nuestro header (por ejemplo 250px), para que cuando se haga scroll más de esa cantidad de píxeles (250px), el código lo detecte y añada una clase al menú; en concreto una clase cuya propiedad sea “position:fixed”, y una clase al contenedor, dándole un “margin-top”, para que no se produzca un feo salto, entre otras.

Por otro lado, seguro que estas pensado, ¿Y qué pasa si volvemos a subir hasta arriba haciendo scroll? ¿el header ya no se verá?

Pues, la solución para esto lo vereis más adelante en código. Simplemente se quita esa clase que le hemos añadido mediante jquery, para que, efectivamente se vuelva a ver el header.

DEMO

Ir al artículo

Los mejores Sliders Jquery para tu Página Web

slider-jquery
Con jquery podrás hacer cosas que jamás habías imaginado que podrías hacer. A mí personalmente no me gusta programar en php, por ejemplo, aunque a veces tenga que hacerlo, la programación es un dolor de cabeza para la mayoría de diseñadores.

Yo no iba a ser menos, por eso cuando me planteé aprender a programar en jquery, pensé que iba a ser aburrido y tedioso, pero la verdad, todo lo contrario. Me resulta bastante ameno, ya que con poquitas lineas de código puedes hacer efectos muy interesantes, además, hay multitud de plugins ya desarrollados que con poco esfuerzo podrás implementar en tu página web.

Hoy os traigo unos cuantos sliders en jquery que están muy bien y son muy faciles de implementar. Algunos de ellos los trataré en próximas entradas, así como algun que otro tutorial básico de jquery, por ejemplo, para hacer desaparecer y aparecer una caja texto… cositas básicas de momento.

Ir al artículo

Tutorial: Cómo hacer un Menu Responsivo / Responsive

Tutorial, crear menú responsivo
Buscando información para uno de mis proyectos, en el cual necesitaba crear un menú responsivo, encontré este valiosísimo Plugin JavaScript, que comparto con vosotros.

Se trata de un Plugin que convierte tu menú, en un menú responsivo, adaptable a cualquier dispositivo. Además dispone de varios temas o ejemplos que te ayudarán a crearlo a la derecha, a la izquierda, arriba…

Aquí teneis el ejemplo funcionando: DEMO

Ir al artículo

Tutorial efecto parallax Scrolling

efecto-parallax

Actualmente están muy de moda los efectos Parallax en las Webs, no obstante, la página de Google Nexus (los dispositivos móviles Android de Google) entre otras muchas, tienen implementado este diseño en su Web.

Para quien no lo sepa, el efecto parallax es aquel que nos da una sensación de 3 dimensiones, de cierta profundidad en la web. Al hacer scroll, los elementos de la misma, se mueven a velocidades distintas, creando así este curioso efecto.

Ir al artículo

10 motivos para renovar tu Página Web

web-vieja

1. Tu página web tiene más de 3 años

Por regla general es una buena idea actualizar el diseño de nuestra página web íntegramente cada 2 o 3 años máximo, pero eso no quita de realizar pequeñas actualizaciones periodicas cada cierto tiempo más pequeño. El mundo de internet está en constante cambio; siempre hay novedades que crean una mejor experiencia, da facilidades al usuario… Debes mantenerte al día con las tendencias de diseño actuales y nuevas técnicas de usabilidad para crear una mejor experiencia para los usuarios que visiten tu web, para mantenerte así en la vanguardia del diseño.

Ir al artículo

Contacta conmigo para pedir presupuesto

Puedes rellenar el siguiente formulario de contacto:





O bien, contactar por teléfono en horario de 9:00h a 18:00 de Lunes a Viernes:

660 102 509

loader Unai Calleja