Cómo lo hicieron Crowdpilot

Lo que vas a crear

La página de inicio de Crowdpilot muestra cuán simple e impresionante es SVG en combinación con JavaScript y animaciones CSS. En este tutorial, aprenderá a recrear el rotador y la cortina de mensajes diagonales de Crowdpilot, además hablaremos un poco sobre el diseño "plano" y lo que significa diseñar elementos nativos digitales.

Tomar un respiro.

Crowdpilot es una aplicación que te permite llevar los oídos (y las opiniones) de tus amigos a cualquier lugar. Volveremos a recrear algo de lo que hace el sitio web de Crowdpilot, pero por brevedad, este tutorial ignorará las discusiones sociales y de privacidad que la aplicación exigiría de otra manera..

Una perorata rápida

Quizás hayas oído hablar de la tendencia plana. Está haciendo las cosas con rapidez: si eres un diseñador web, es probable que aceptes este cambio de una forma u otra..

Pero por el bien de elevar nuestra discusión de diseño, "plano" no hace justicia al cambio. Para una perspectiva más completa sobre los factores que impulsan la "tendencia plana", eche un vistazo a esta increíble pieza de Frank Chimero, "What Screens Want", de noviembre de 2013. En la pieza, Chimero presenta el argumento de que nuestros cerebros se están adaptando. para el panorama digital, y que lo que antes se necesitaba para que entendiéramos, por ejemplo, una carpeta "eliminada" en una computadora, era una representación de la basura que equiparamos con nuestra representación tangible de descarte; Un bote de basura de aspecto 3d. Pero a medida que nuestros cerebros se adaptan a más representaciones nativas de eliminación digital, ya no necesitaremos estas metáforas, lo que Chimero denomina "relleno" (en referencia al recubrimiento adicional en una píldora de aspirina más allá del ingrediente activo que lo hace fácil de entender). 

De la pieza:

Entonces, si bien el tamaño de una píldora de aspirina está limitado por sus pequeños y rechonchos dedos, su cerebro puede normalizar los patrones de una interfaz y dar paso a abstracciones más matizadas..

Dicho esto, veamos un buen ejemplo de un elemento de diseño digital nativo empleado por Crowdpilot.

Volver al Tutorial

La página relativamente simple tiene un gran botón de reproducción, y la pantalla está dividida horizontalmente por dos triángulos de colores. Al hacer clic en el botón de reproducción se muestra un video en pantalla completa detrás de los triángulos..

Vamos a recrear este efecto..

SVG: Haciendo Triángulos Fácil desde 2001

La salsa secreta de Crowdpilot son dos SVG muy simples. Hemos tomado el código fuente de uno de estos SVG directamente de su código:

Podemos mirar esta pieza a la vez..

enable-background = "new 0 0 100 100"

Esta propiedad no se admite en gran medida y se refiere a la composición de fondo, que en realidad no es relevante para este caso de uso, por lo que la omitiremos en nuestro ejemplo.

anchura altura

También ignoraremos los atributos de ancho y alto del SVG, ya que podemos usar las propiedades CSS para lograr el efecto que se ve en el ejemplo..

preserveAspectRatio = "none", viewBox = "0 0 100 100"

Esto permite a nuestro SVG escalar a cualquier proporción. Nuestros valores de viewBox configuran un lienzo para nuestro SVG y se usan principalmente en referencia al elemento polígono secundario. El lienzo de SVG (no debe confundirse con el lona Elemento) en este caso es 100x100 unidades arbitrarias. (Una buena suposición: quien haya creado la página de inicio de Crowdpilot quería utilizar un viewBox de 100x100 para aludir a "100 por ciento").

puntos de polígono = "100,0 0,100 0,0"

Esto crea un polígono en las ubicaciones enumeradas como coordenadas x / y, que produce: x = 100, y = 0 (arriba a la derecha) x = 0 y = 100 (abajo a la izquierda) x = 0, y = 0 (arriba a la izquierda)

Esta combinación de polígonos con nuestro viewBox cuadrado en la svg etiqueta de los padres es lo que crea nuestro triángulo.

Construyendo nuestro telón de fondo

Una versión simplificada de nuestro SVG se verá así:

Por extraño que parezca, podemos colocar esto directamente dentro de nuestra etiqueta de cuerpo.

Para nuestro ejemplo, colocaremos un logotipo en el centro y revelaremos una imagen de fondo cuando hagas clic en el logotipo, luego cerraremos la cortina haciendo clic en el logotipo nuevamente. Para esto, solo agregaremos una etiqueta de anclaje y la posicionaremos absolutamente en el centro de la pantalla.

.envato-logo ancho: 120px; altura: 120px; posición: absoluta; superior: 50%; izquierda: 50%; imagen de fondo: url (envato-logo.png); tamaño de fondo: cubierta; margen izquierdo: -60px; margen superior: -60px; 

Para nuestra animación de revelación, podemos usar un poco de JavaScript para escuchar un clic en el elemento delimitador y cambiar una clase en el cuerpo.

$ (". envato-logo"). on ("click", function (e) e.preventDefault (); $ ("body"). toggleClass ("curtain-open"););

Luego queremos asegurarnos de que nuestros polígonos tengan una transformación CSS y una transición aplicada. Como sabemos que también queremos animar el color más adelante, usemos el todos Valor para la propiedad a ser animada..

.polígono de cortina abierta: primer hijo transformación: translate3d (0, -100%, 0);  .curtain-open polygon: last-child transform: translate3d (0, 100%, 0);  polígono posición: relativo; transición: todos los 0.4s; 

Tenga en cuenta que estas reglas también deberán tener el prefijo del navegador correctamente. 

Insinuación: prueba algo como Prefijo Gratis para resolver tus problemas de prefijo.

Una cosa importante a entender aquí es que todo nuestro poder de animación se logra con CSS. Esto hace que nuestro JavaScript sea muy ligero y nuestra presentación flexible..

Colores de ciclismo

Para alternar entre diferentes colores para el triángulo superior izquierdo, estableceremos un intervalo para recorrer una serie de información. En el ejemplo de Crowdpilot, vemos un color de fondo giratorio del triángulo superior, así como un texto giratorio en la parte superior izquierda. Aquí hay una explicación rápida de cómo lograr esto.

Primero, configuraremos una matriz de objetos, cada uno con un color de fondo y texto..

 // mensaje de datos var cycle_array = [color: "# c479b7", texto: "Aquí hay algo de texto y todo eso". , color: "# c4a179", texto: "SVG es increíblemente poderoso". , color: "# 222", texto: "Las diagonales están dentro". ]

A continuación, configuraremos un intervalo para recorrer los colores y mensajes cada dos segundos..

var i = 0, messageHolder = $ (". message"), poly = $ ("svg polygon"). first (); var interval = setInterval (function () i = i% cycle_array.length; var nextObj = cycle_array [i]; $ ("svg polygon"). first (). css (fill: nextObj.color); $ ( ".message"). html (nextObj.text); i ++;, 2000);

Usamos un truco inteligente en la segunda línea del setInterval función. Nosotros creamos yo para iterar hasta el último elemento, y lo establecemos de nuevo en 0 utilizando el operador de módulo %, que devuelve el resto de una división. En otras palabras, en la tercera iteración., yo será igual a 3; 3/3 no tiene resto, por lo que yo será puesto a 0.

El resto de este código es relativamente sencillo; Suponemos que hay un elemento con la clase de mensaje. También te habrás dado cuenta de que estamos configurando la propiedad CSS (y no estamos usando la función de animación jQuery); esto se debe a que ya hemos configurado transiciones en nuestro CSS.

Bonus: Cambios de color al azar

Claro, probablemente quieras los colores en los que tu texto se vea bien. Pero si quieres un color aleatorio, usemos un truco genial que se encuentra en el blog de Paul Irish para generar un hex aleatorio. El JavaScript utilizado anteriormente cambiaría a esto:

var i = 0, messageHolder = $ (". message"), poly = $ ("svg polygon"). first (); var interval = setInterval (function () i = i% cycle_array.length; var nextObj = cycle_array [i]; $ ("svg polygon"). first (). css (fill: '#' + Math.floor ( Math.random () * 16777215) .toString (16)); $ (". Message"). Html (nextObj.text); i ++;, 2000);

Segundo Bono: jQuery-less

Si no necesita admitir todos los navegadores y quiere perder algo de peso con jQuery-less, puede hacerlo con este código.

// versión jQuery-less (function () // logo click, polygon move var envatoLogo = document.querySelector (". envato-logo"); envatoLogo.onclick = function () document.querySelector ("body"). classList.toggle ("curtain-open"); // datos del mensaje var cycle_array = [color: "# c479b7", texto: "Aquí hay algo de texto y otras cosas.", color: "# c4a179", texto: "SVG es increíblemente poderoso.", Color: "# 222", texto: "Las diagonales están dentro."] // intervalos de mensajes var i = 0, messageHolder = document.querySelector (". Message"), poly = document.querySelector ("polygon"); var interval = setInterval (function () i = i% cycle_array.length; var nextObj = cycle_array [i]; poly.style.fill = nextObj.color; document.querySelector (". mensaje "). innerHTML = nextObj.text; i ++;, 3000); ());

Hemos reemplazado muchas de las llamadas basadas en jQuery con JavaScript simple, gracias a la evolución de las API nativas de selección y manipulación de DOM..

Conclusión

La simplicidad de las interfaces digitales nativas combinada con la flexibilidad y el poder de las animaciones SVG y CSS3 nos da el poder de crear experiencias, como la que se ve en Crowdpilot, con el mínimo esfuerzo.. 

Es importante mantener un poco informado de la evolución de las API y las tecnologías; para lograr el mismo efecto que hemos creado en aproximadamente 100 líneas de código, habríamos tenido que confiar en formas mucho más difíciles e ineficientes de crear formas relativamente simples. A medida que la web evoluciona, también lo hacen las herramientas que utilizamos para construirla; Este ejemplo muestra cuán poderosas se han convertido esas herramientas..