Construyendo el sitio web StartupGiraffe

Lanzamos nuestro nuevo StartupGiraffe sitio web hace unos meses, y hemos tenido la intención de escribir una publicación sobre cómo hicimos una parte de la interfaz para cualquier persona interesada.

Nuestro objetivo era crear un sitio divertido y receptivo que mostrara nuestra marca. Una vez que nuestros amigos en Barrel NY Acordamos hacer el diseño gráfico para el sitio, sabíamos que también podríamos sacar algunos trucos aseados. Les dijimos que queríamos una jirafa muy alta, pero realmente no vimos todas las posibilidades hasta que recuperamos los diseños: había polígonos de diferentes colores, ángulos y formas en el fondo; en primer plano, había todo tipo de elementos que podrían funcionar bien en un sitio web de paralaje ... y allí estaba esa enorme jirafa.

El desafío para nosotros fue asegurarnos de no ir demasiado lejos con el Javascript para gravar el rendimiento del sitio y distraer la experiencia del usuario. Finalmente, decidimos descartar la idea de una paralaje a favor de un efecto de "jirafa creciente".

Puedes ver un ejemplo del efecto aquí , y si desea seguir el código, puede descarga los archivos fuente aquí .

Estructura del sitio

En un nivel básico, el sitio contiene 3 secciones de hermanos apiladas una encima de la otra. La copia y el contenido principal del sitio se encuentran en la capa superior, la jirafa en la segunda capa y el fondo poligonal en la capa posterior:

Para esta demostración, omitiremos el contenedor de fondo porque no hay mucho para eso.

Creciente efecto jirafa

Básicamente, nuestro objetivo era arreglar el logo de "Jirafa de inicio" mientras la jirafa se eleva, y luego liberar el logotipo en el flujo normal de la página en un momento determinado. Debido a que la jirafa debería comenzar a subir tan pronto como el usuario comience a desplazarse, su nariz debe estar justo debajo del doblez, sin importar la altura de la pantalla.

En realidad, hay muchas maneras de hacerlo (y definitivamente estamos abiertos a sugerencias), pero el que elegimos utiliza jQuery.waypoints como un medio para detectar y responder eventos de desplazamiento.

Para asegurarnos de que la jirafa se desliza detrás del logotipo, colocamos el logotipo en una envoltura fija dentro de la sección "contenido". La jirafa es un hermano de la sección de contenido. Ambas secciones están absolutamente posicionadas.

HTML

CSS

body {background-color: #000;}#content-wrapper, #giraffe-wrapper {position: absolute;top: 0px;left: 0px;width: 100%;}#first-content {position: relative;}#big-logo-wrapper {position:fixed;top: 250px;width: 100%;max-width: 1920px;}#big-logo {width:465px; height:231px;display:block; margin:0 auto;}#giraffe {position: relative;left: 100px;height: 3200px;}

JavaScript

El siguiente paso fue configurar la jirafa y el logotipo. Usamos JavaScript para configurar la jirafa justo debajo de la tapa. Luego configure la altura de la primera sección para que sea la altura de la ventana más la cantidad de píxeles que queremos mostrar para la jirafa antes de permitir que el logotipo se desplace hacia arriba.

$(function() {var windowHeight = $(window).height(),giraffe = $("#giraffe"),firstHeight = windowHeight + 380,firstContent = $("#first-content");giraffe.css("top", windowHeight + "px");firstContent.css("height", firstHeight + "px")});

Con la jirafa escondida justo debajo del pliegue, pudimos verla desplazarse hacia arriba debajo del logotipo fijo. A continuación, tuvimos que dejar que el logotipo se desplazara para que no permaneciera fijo en la página.

El complemento de waypoints nos permite llamar a una función cuando el usuario se desplaza pasando un determinado elemento DOM. También nos permite detectar en qué dirección se desplaza el usuario. Usamos estos eventos "arriba" y "abajo" para agregar o eliminar una clase que alterna la propiedad de posición del logo entre fija y absoluta.

También utilizamos la propiedad de desplazamiento de la función de punto de referencia para cambiar la posición del punto de ruta por un valor de píxel entero. Debido a que la clase absoluta (logotipo desplazable) alineará el logotipo con la parte inferior de su elemento primario, queríamos que el desplazamiento sea la altura del logotipo más la distancia del logotipo desde la parte superior del sitio menos la altura total del primer contenido div (que establecemos en la carga de la página).

 var logo = $('#big-logo-wrapper');firstContent.waypoint(function( direction) {if ( direction === 'down' ) {logo.addClass("first-scroll");} else {logo.removeClass('first-scroll');}},{offset: logo.height() + (parseInt(logo.css("top"))) - firstHeight});

Además de algunas otras campanas y silbatos, eso es más o menos. El logotipo ahora permanece fijo hasta que la jirafa haya obtenido aproximadamente 380 píxeles en la página.

¿Tienes preguntas? ¿Tienes una mejor manera de hacerlo? Háganos saber en los comentarios.