es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Crear un encabezado fijo de ocultación automática con Headroom.js

Los encabezados que se ocultan automáticamente han sido constantemente populares en el diseño web por bastante tiempo. Muchos blogs y revistas en línea usan el encabezado fijo para mantener a los usuarios conectados y darles acceso directo a la navegación .

Medium ha redefinido esta característica con un concepto básico que oculta la navegación mientras se desplaza hacia abajo, pero la muestra mientras se desplaza hacia arriba . Este concepto se ha convertido en una tendencia tremendamente popular y ahora puedes replicarlo fácilmente usando Headroom.js .

Headroom.js es una biblioteca de JavaScript libre de vainilla sin dependencias ni funciones de API excesivas. Simplemente agrégalo a tu HTML, selecciona el encabezado de la página y déjalo funcionar.

Headroom simplemente agrega y elimina ciertas clases de CSS que se animan para mostrar / ocultar el encabezado usando JavaScript para detectar el movimiento.

Puede hacer esta funcionalidad usted mismo, pero ¿para qué molestarse? El espacio libre se prueba y es compatible con todos los principales navegadores . Incluso funciona bien con jQuery o Zepto si ya tienes una biblioteca JS instalada en tu sitio.

Encontrará muchos ejemplos de código en el repositorio de GitHub, pero aquí hay un ejemplo simple que se dirige al elemento #header :

 var myElement = document.querySelector ("# header"); // crea un objeto de espacio libre que pasa en el elemento #header var headroom = new Headroom (myElement); // inicializa la biblioteca headroom.init (); 

La función init() tiene muchas opciones para personalizar . Puede personalizar las diferentes clases de elementos, junto con diferentes devoluciones de llamada de eventos, donde puede incrustar sus propias funciones . Por ejemplo, si desea que el elemento se desvanezca después de que se haya onUnpin, utilizará la onUnpin llamada onUnpin .

Todas estas opciones se enumeran en la página principal del complemento, así que compruébalo y mira lo que piensas. Si desea ver Headroom en acción, eche un vistazo al siguiente bolígrafo que contiene una clonación completa de la página de demostración principal .

Use consultas de cantidad para hacer que su CSS sea consciente de la cantidad

Use consultas de cantidad para hacer que su CSS sea consciente de la cantidad

Las consultas de cantidad son selectores de CSS especialmente configurados que permiten a los desarrolladores hacer que su código sea consciente de la cantidad . En el diseño receptivo, generalmente usamos consultas de medios para adaptar nuestro diseño a diferentes ventanas gráficas. Sin embargo, en algunos casos, es posible que deseemos cambiar a un diseño diferente o usar otras dimensiones o estética después de que haya cierta cantidad del mismo tipo de contenido en la pantalla.Es un

(Consejos de tecnología y diseño)

Telegram ahora le permite deshacerse de mensajes, monitorear el uso de la red y más

Telegram ahora le permite deshacerse de mensajes, monitorear el uso de la red y más

Los usuarios de Telegram están de enhorabuena ya que la actualización v.3.16 ha traído consigo algunas nuevas características que mejorarán la experiencia de Telegram.La primera de las nuevas características es la capacidad de deshacerse de mensajes. Con la actualización v.3.16, Telegram ahora le permitirá deshacer cualquier mensaje que se haya enviado en las últimas 48 horas .Para aqu

(Consejos de tecnología y diseño)