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
¿Cómo se instala WordPress? Muchos de los que esteis empezando en el mundillo del Diseño y Páginas Web no sabreis hacerlo.
Con este tutorial, os digo paso a paso cómo instalar WordPress de las dos maneras posibles; la manera fácil y la manera díficil.
Recuerda que, resumiendo, WordPress es un Gestor de Contenidos, potente, escalable y muy recomendable, tanto para el diseñador web como para el cliente.
Recuerda que en siguientes entradas, explicaré y haré un pequeño Tour por los diferentes paneles del Gestor de Contenidos WordPress así como su migración de servidor.
También puedes consultar la información básica sobre WordPress en esta otra entrada.
Si estais haciendo un Página Web responsiva, o estais haciendo su diseño, posiblemente puede que os entre la duda: ¿y ahora, cómo hago que un video de Youtube, Vimeo, o los Mapas de Google sean Responsivos?
En próximas entradas os daré una breve introducción a Bootstrap, un Framework interesante, con el que podeis hacer Páginas y Diseños Web responsivos facilmente, así como un tutorial de Bootstrap para que veais, cómo funciona y todo lo que se puede hacer con él.
Cómo diseñador web que soy, me surgen ideas y más ideas, tanto de diseños web, como de tutoriales para compartir, así que, antes de ver cómo funciona Bootstrap, os explico cómo hacer que un video de Youtube, Vimeo o los Mapas de Google sean responsivos.
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: