Artículos sobre diseño y desarrollo web
Te mantenemos informado de las últimas tendencias en Diseño y desarrollo web
En este tutorial os explicaré cómo cambiar el aspecto del Scroll del Navegador.
Para uno de mis proyectos, en el cual el scroll por defecto del navegador me ensuciaba el diseño, tuve que buscar cómo hacer para cambiar su aspecto.
Pues bien, hoy lo comparto por si os pasa lo mismo, y lo necesitais para uno de vuestros proyectos.
Es muy fácil de implementar y tiene algunas opciones para activar o desactivar funciones.
DEMO
Página Oficial del Plugin dónde os lo podreis descargar
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.
Este tutorial es la continuación del tutorial «Mantener fijo el header al hacer Scroll«, en la veíamos como mantener el menú de una página web fijo en el top de la pantalla al hacer scroll vertical.
Pues bien, a continuación añadiremos un efecto de scroll suave, también con Jquery, a lo anteriormente hecho. Con unas pocas líneas conseguiremos un efecto llamativo para nuestra página web.
Demostración: DEMO.
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.
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: