Artículos sobre diseño y desarrollo web
Te mantenemos informado de las últimas tendencias en Diseño y desarrollo web
¿Tienes una página web en WordPress? ¿Necesitas migrarla de servidor?
En esta entrada explico cómo migrar un wordpress de servidor, conservando el dominio y sin conservarlo.
Puedes echar un vistazo a las entradas relacionadas de WordPress:
En este tuturial, os explicaré cómo hacer un efecto lupa en una imagen, es decir, hacer zoom por donde pases el ratón. Como casi siempre, esto se consigue con JQuery.
Como veis Jquery es bastante potente y te permite hacer cosas visualmente atractivas. Podeis echar un vistazo a otros de mis tutoriales para aprender más efectos interesantes para tu página web: «Matener el menú en el top al hacer scroll«, «Scroll vertical suave«, «Cómo hacer un menú responsivo«, «Efecto Parallax Scrolling«… entre otros. Seguiré subiendo más tutoriales de diseño web, para que vuestras páginas web sean muy atractivas.
De momento, volvemos al lio.
Aquí os dejo una DEMOSTRACIÓN en funcionamiento de este tutorial.
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.
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
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.
Te ofrecemos una serie de servicios que ayudarán a tu negocio a crecer
Nuestra Agencia de Marketing Online te ofrece un servicio integral con todo lo que necesitas para hacer que tu empresa funcione en Internet.
Podemos ayudarte a posicionar tu web en Google, ayudarte a captar clientes mediante el sistema de anuncios de Google o bien fidelizar clientes y aumentar tus ventas gracias al email marketing.
Descubre nuestros servicios haciendo clic
¿Quieres mejorar tu presencia en Internet?
Rellena el formulario de contacto
O bien, contactar por teléfono en horario de 9:00h a 18:00 de Lunes a Viernes: