Share
Estamos abordando uno grande hoy: la página de marketing de iPad "Elevating the expedition" de Apple.
Podría decirse que es un sitio impresionante en sí mismo, mostrando algunos poderosos JavaScript y CSS. Apple también ha tomado muy en serio el concepto de público objetivo en sus decisiones con este sitio. Vamos a bucear en!
Este sitio se presenta como una adición a una larga lista de sitios que utilizan el desplazamiento para mejorar la presentación del contenido y activar animaciones diseñadas. A medida que se desplaza por el sitio, puede ver contenido a medida que se desplaza, incluido un recuento de elevaciones en el lado derecho que aumenta a medida que se desplaza hacia abajo; Este es un indicador que sigue junto con la narración de la historia del ascenso del escalador..
También vemos algunas animaciones de paralaje sutil (las nubes, por ejemplo), algunos disparadores de ilustración que se producen cuando aparecen a la vista, y algunas animaciones infinitas que no dependen de ninguna interacción..
Se utilizan imágenes muy grandes en todo el sitio (más sobre esto en la siguiente sección), tanto como imágenes de fondo como imágenes de contenido en línea..
Apple tomó algunas decisiones interesantes con esta página de marketing. Quizás la decisión más evidente es el tamaño de los activos en la página. A continuación, puedes ver una captura de pantalla del inspector de Chrome. En una conexión rápida a Internet, el sitio tarda más de 2 segundos en cargar los recursos en la página. El tamaño total de descarga para el sitio supera los 12.5Mb. Apple, por supuesto, ha optimizado algunas cosas (que cubriremos), pero la pregunta sigue siendo: ¿cómo podría alguien justificar un PNG de 4Mb por lo que técnicamente es una animación de nube "extra"??
La respuesta, muy probablemente, es que el objetivo de Apple para esta página nunca experimentará ningún problema de retraso en la descarga de los activos gigantescos, y si lo hacen, es posible que no les importe. El público objetivo es más probable en una Mac u otra pantalla de dispositivo moderno, y es probable que estén en una red rápida. Por lo tanto, Apple ha tomado la decisión de apoyar una experiencia particularmente atractiva y permitir una experiencia menor para aquellos que probablemente no estén en su mercado objetivo..
También debe tenerse en cuenta que esta página es una campaña de marketing que existe fuera del flujo de ventas de Apple, lo que significa que nadie tiene prohibido comprar un iPad de su teléfono de Dell en un monitor SD CRT, si así lo desean..
Otra decisión interesante que Apple ha tomado (tanto aquí como en muchos otros proyectos web) es el uso de imágenes para titulares de texto..
Esto es un pngLa mayoría de la gente sabe que Apple, durante muchos años, se ha enorgullecido de una tipografía clara y consistente; El fallecido Steve Jobs incluso tomó una clase de caligrafía en la universidad Reed, que según él lo inspiró a llevar el control de fuente articulado al sistema operativo Mac. Con esta prioridad en mente, Apple elige regularmente representar imágenes de texto en lugar de fuentes para la mayoría de sus titulares, presumiblemente para que tengan control sobre lo que todos ven. Si bien esta decisión conlleva algún gasto, Apple cambia ese gasto por la calidad constante y el control total sobre el producto final..
Curiosamente, incluso han ido tan lejos como para hacer esto con el indicador de número en la tabla de oxígeno.
Ver por ti mismo, aquí está el sprite SVG Apple empleó algunas técnicas simples de mejora progresiva en este sitio; a saber, el diseño permanece intacto en todos los navegadores, mientras que las interacciones pueden variar según las capacidades del navegador. Apple usa css transformar; y la mayoría de las mejoras progresivas giran en torno a ese aspecto. Otros elementos, como la entrada del control deslizante en la segunda sección, se muestran solo en los navegadores compatibles. Apple usa hacks como los siguientes, que se usan para ocultar elementos en IE 7-9, pero se muestran en todos los demás navegadores. Esto es útil para representar elementos estáticos para IE, como el gráfico de altitud de cumbre.
.gráfico .oxygen-slider posición: absoluta; arriba: 246px; izquierda: 45px; pantalla: ninguna \ 9; .ie-graph display: none; pantalla: bloque \ 9; posición: relativa; arriba: 0;
La línea pantalla: ninguna \ 9; y pantalla: bloque \ 9; las líneas sólo son válidas en IE 7-9; Este pequeño truco evita el uso de hojas de estilo específicas de IE.
El control deslizante y la animación en este gráfico no se muestran en IE.Apple también emplea JavaScript para hacer cosas simples como reemplazar imágenes con sus versiones de alta resolución según sea necesario. Si bien Chromium ha implementado oficialmente imágenes de respuesta, aún está muy lejos de la adopción total, por lo que hacerlo a través de JavaScript es actualmente una de las únicas opciones disponibles..
¿Cómo cargar archivos masivos y salirse con la suya? Tomemos algunas lecciones de este sitio.
Es increíblemente importante optimizar, cuando sea posible. En este caso, Apple ha optimizado bastante algunas imágenes. Por ejemplo, la imagen del encabezado de 1024 × 1766 es de 341 KB, y el paquete sprite es de 49.9 KB. Si bien ningún byte debe considerarse prescindible, estos tamaños se descargan relativamente rápido a la mayoría de las velocidades de conexión modernas, incluidas muchas velocidades de operadores móviles..
Las imágenes y los scripts pueden ralentizar significativamente la velocidad de representación de una página. Cuando sea posible, use algo como carga lenta (cargar con JavaScript una vez que la página ya se haya cargado) para cargar imágenes grandes, o inclúyalas en su CSS como imágenes de fondo si no son parte del flujo de contenido semántico. Apple está empleando una técnica de JavaScript posterior a la carga con todas las imágenes de alta resolución, como se explicó anteriormente, y también utiliza CSS para configurar las imágenes de fondo PNG de gran nube..
¿Quieres que tu página se sienta rápido? Enfócate en hacer que los mejores 2000px lo más rápido posible. Independientemente de lo que se encuentre debajo de esos 2000 píxeles, si carga el contenido de dos alturas de ventanas, es mucho más probable que el contenido posterior a 2000 píxeles se cargue en el momento en que el usuario se desplace hacia él. Apple ha hecho de esto una prioridad al empujar los PNG grandes a aproximadamente 4400px desde la parte superior de la página, y ha colocado las imágenes de carga rápida en la parte superior.
El elemento deslizante ofrece al usuario su primera interacción en la página (excepto el desplazamiento). Apple ha usado un distancia entrada, y algo de magia CSS, para lograr esto. Como se mencionó anteriormente, el número a la derecha del cuadro se realiza con imágenes, pero usaremos tipografía regular para mantener el punto. (Si estás interesado en aprender esta técnica, comienza por aprender sobre los sprites de CSS).
Puedes ver este control deslizante en acción en CodePen Hay algunas cosas a tener en cuenta en este ejemplo. Primero, hay un poco de CSS dedicado a hacer que la entrada del control deslizante se vea adecuada. La mayor parte del resto del CSS está orientado hacia el posicionamiento y los trucos anteriores y anteriores..
Otro aspecto interesante de esta demo es el elemento indicador. Veamos el JavaScript por un momento..
Accentsconagua
var slider = $ (". bgslider"); var max = slider.attr ("max"); var min = slider.attr ("min"); var colBg = $ (". fg"); var indic = $ (". indicador"); slider.on ("change", function () var val = slider.val () / max * 100; colBg.css ("height", val + "%"); indic.css ("top", val * .7 + "%") [0] .innerHTML = Math.round (val);); Inmediatamente vemos que el control deslizante es donde se centra toda la interacción. Pero mirando el indicador, vemos esta línea:
indic.css ("top", val * .7 + "%") [0] .innerHTML = Math.round (val); ¿Qué está haciendo esta línea? Primero, está configurando el valor superior del indicador para que sea el valor porcentual del control deslizante, multiplicado por .7; esto nos da un indicador que no va a la parte inferior del elemento. En el ejemplo dado por Apple, el indicador sigue la imagen; en este ejemplo, nuestro indicador se mueve a una velocidad diferente de nuestra imagen. Esto nos da más control sobre la propia animación..
A continuación, vemos la animación JavaScript..
$ ("input"). animate ("value": 20000, step: function () slider.val (this.value); slider.trigger ("change");, complete: function () slider.val (max) .trigger ("change");, duration: 3000); Debido a que la función animada de jQuery admite la animación de propiedades CSS por defecto, escribimos nuestros propios pasos y funciones completas. Esto nos permite utilizar las funciones de cola y de aceleración integradas de jQuery, y evitar la escritura personalizada setInterval o recursivo setTimeout llamadas.
Intencionalmente no hemos hecho esto exactamente de la manera en que Apple logró este efecto, para que podamos mostrarle cómo podría abordar el mismo problema con una solución diferente..
A continuación, veamos la animación del pack gear..
Podemos ver que los diferentes elementos de engranajes están, en cierto sentido, dispuestos en su navegador mientras se desplaza. Este efecto se logra utilizando el evento de desplazamiento de JavaScript, las transformaciones de CSS y los sprites de CSS. Apple ha colocado cincuenta artículos diferentes usando : nth-child y sprites, que se parece a esto:
.paquete de artículos: nth-child (49) arriba: 52.5px; izquierda: 199px; ancho: 82px; altura: 69.5px; posición de fondo: -199px -52.5px;
La parte más interesante de esta técnica, sin embargo, es la animación de desplazamiento de JavaScript. El JavaScript original fue reducido, pero la configuración básica recorre todos los elementos del paquete y recopila su posición en relación con el centro de los elementos del paquete, y los mueve más en esa dirección. No cubriremos todas las matemáticas en este artículo; En cambio, nos centraremos en una forma de explorar el tema..
http://codepen.io/jcutrell/full/krIAp
Este CodePen muestra una aproximación cruda de la técnica utilizada por Apple. Ajustar diferentes partes de este JavaScript te dará resultados diferentes y te ayudará a explorar la técnica más a fondo..
Aquí hay un desafío para ti: desvanece los bloques de elementos, como en la técnica de Apple.
Las animaciones en la nube utilizan una técnica de desplazamiento de paralaje simple, así como una animación de CSS infinita. No cubriremos la técnica de paralaje (puede ver muchas de las técnicas de paralaje que se tratan aquí en Tuts +), pero veamos la animación infinita que utilizan esas nubes..
Directamente desde el CSS de Apple:
.nubes posición: absoluta; izquierda: 0; fondo: 0 0 repetición-x; tamaño de fondo: 100% 100%; .basecamp-clouds, .ascent-clouds z-index: 2; izquierda: -788px; .basecamp-clouds arriba: -500px; ancho: 2600px; altura: 2413px; imagen de fondo: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_basecamp_01.png); / * pantalla visible máxima * 2 = 5200, que no debe confundirse con el activo @ 2x. * / .ascent-clouds-1 .tile arriba: 50px; ancho: 5200px; altura: 2000px; imagen de fondo: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_01.png); .ascent-clouds-2 arriba: 600px; ancho: 2600px; altura: 1846px; abajo: 0; imagen de fondo: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_02.png); @keyframes cloudAnim de transform: translateX () translateZ () a transform: translateX (-50%) translateZ () .ascent-clouds-1.visible .tile -webkit-animation: cloudAnim 80s linear infinito; -moz-animation: cloudAnim 80s linear infinite; Animación: cloud anime 80s lineal infinito;
Podemos ver de inmediato que la animación en la nube es sencilla: usando transformar: traducirX. Sin embargo, lo que hace que esta técnica sea tan poderosa es la duración y claridad del PNG utilizado. La gran nube PNG se desplaza infinitamente durante ochenta segundos, lo que es lo suficientemente largo como para que el patrón de repetición del PNG sea olvidado. Si bien no es demasiado difícil de lograr, ciertamente es un uso efectivo de las animaciones CSS..
Apple puede estar dominando un territorio controvertido con los predicadores de "mejores prácticas" del desarrollo web, pero todos en la profesión del diseño web tienen que tomar decisiones. Siempre debe considerar los valores de una compensación; si debe o no implementar una característica determinada no debe ser dictado simplemente por las mejores prácticas, ni solo por limitaciones tecnológicas, sino por las necesidades y deseos de quienes verán lo que crea. No permita que las reglas se interpongan en el camino de hacer algo sorprendente, pero asegúrese de considerar las compensaciones.
