Cómo dar a su logotipo el efecto de desplazamiento deslizante

En el tutorial de hoy, usaremos JavaScript para crear un efecto de paralaje simple y flexible en el que un logotipo parece cambiar de color con el fondo que se muestra cuando el usuario se desplaza..

El efecto Slip Scroll en acción.

Crearemos un elemento "predeterminado" que se mantenga fiel a su ubicación (posición: fijo), y un montón de elementos "móviles" cuya posición depende de ese elemento "predeterminado". Usaremos JavaScript para que esto suceda cada vez que el usuario se desplace..

Nota: Para cubrir todas las bases he proporcionado la explicación en video y en forma escrita.. 

Ver el vídeo

Suscríbete a Tuts + Diseño Web en Youtube.

Lee el tutorial

Marcado base

Comenzaremos por crear un par de elementos que contienen. Hagamos que uno de sus fondos sea oscuro y uno claro para que podamos tener una imagen de contraste contenida en ellos. Continuemos también y hagamos de nuestra primera imagen la imagen "predeterminada" dándole una clase de defecto, mientras que las otras imagenes obtendrán la clase de movible.

Estilos base

Ahora asegurémonos de que nuestras imágenes no terminen desplazándose fuera de sus contenedores configurando desbordamiento: oculto. También continuaremos diciendo que estos contenedores tienen una posición relativa, por lo que los elementos posicionados absolutamente se alinearán con estos contenedores en lugar de directamente con el elemento fijo cuando escribamos nuestro JavaScript. 

En aras de la capacidad de desplazamiento, demos a estos contenedores una min-height de alrededor 400px. Y para mantener nuestros logotipos lejos de los bordes, vamos a darles algunos relleno de 1em.

.contenedor desbordamiento: oculto; posición: relativa; min-height: 400px; relleno: 1em;  

Cada envase necesita un color contrastante, así que:

.oscuro fondo: # 333;  .light background: #fff;  

Y finalmente, según lo prometido, configuremos nuestro CSS predeterminado y móvil para que uno quede atascado en la página a medida que el usuario se desplaza, y el otro se mueve junto con ella sin chocar con otros elementos:

.por defecto posición: fija;  .moveable posición: absoluta; 

Eso debería hacerse cargo del marcado y el estilo. Si ve la página, debería ver el logotipo predeterminado desplazándose hacia abajo y escondiéndose detrás de los otros contenedores, mientras que todos los logotipos móviles deberían aparecer como elementos normales en la parte superior izquierda de sus respectivos contenedores..

Introduciendo JavaScript

Ahora para la parte divertida, hacer que funcione con JavaScript.

Primero cargaremos jQuery y nuestro script personalizado en la parte inferior de nuestro index.html:

Crea y abre un archivo llamado js / slipScroll.js.

Dentro de ese archivo, lo primero que haremos es crear una función llamada setlogo y coloque esta función en un evento de desplazamiento de jQuery para que cada vez que el usuario desplace un píxel, este evento se active. También queremos asegurarnos de que desencadenemos este evento cuando el usuario llegue a la página (antes de que se desplace):

var setLogo = function () ; $ (document) .scroll (function () setLogo ();); setLogo (); 

Haciendo que las cosas funcionen

Ahora por la magia. Digamos que cada instancia de .movible en la página debe cambiar su CSS parte superior sin embargo, la posición de la imagen predeterminada es desde la parte superior de la página, pero sin embargo, esta .movible El contenedor del elemento está en la parte superior de la página..

var setLogo = function () $ ('. moveable'). each (function () $ (this) .css ('top', $ ('. default'). offset (). top - $ (this) .closest ('. container'). offset (). top);); ; 

Actualiza tu página, y listo! Acaba de crear un efecto de desplazamiento de pseudo-paralaje desde cero en solo unas pocas líneas de código.

Conclusión

Te animo a que juegues con esta solución. Intenta jugar con la propia función JavaScript para ver qué tipo de compensaciones extrañas obtienes si agregas o eliminas algunos píxeles. Intente utilizar diferentes elementos (¿navegar a alguien?) En lugar de solo imágenes para su contenido desplazable.

Espero que hayas aprendido mucho y no dudes en enviar comentarios a continuación si tienes alguna pregunta..