Recientemente comencé a dibujar en mi iPad usando la aplicación Procreate con Apple Pencil. Disfruto de la flexibilidad de dibujar de esta manera. Lo que generalmente me impide pintar en casa son cosas básicas, como la instalación, la limpieza de los pinceles, la ventilación adecuada y otros factores que no están realmente relacionados con la pintura en sí. Procreate hace un buen trabajo emulando procesos de pintura y dibujo, pero agregando funciones digitales como deshacer / rehacer, capas y efectos de capa.
Aquí hay una pintura de Procreate que hice y terminé exportando y animando en la web.
Ver la pluma
Zebra Page: animación web a partir de un dibujo de Procreate de Sarah Drasner (@sdras)
en CodePen.
¡Tú también puedes hacer esto! Hay dos efectos de animación básicos que cubriremos aquí: el efecto de paralaje que tiene lugar al pasar el mouse (con la capacidad de desactivarlo para aquellos con trastornos vestibulares) y el pequeño efecto de dibujo cuando se carga la página.
Paralaje con capas de dibujo
Mencioné que parte de la razón por la que disfruto dibujar en el iPad es la capacidad de trabajar en capas. Al crear capas, me cuido de mantener ciertos “temas” en la misma capa, por ejemplo, las rayas de cebra están en una capa y los puntos están en su propia capa debajo de las rayas.
Extenderé el dibujo más allá de los límites de donde termina la línea de la capa superior, principalmente porque podrás mirar un poco alrededor mientras movemos el dibujo en el efecto de paralaje. Si las líneas son nítidas en algún punto, esto no parecerá natural.
Una vez que termine de crear mis capas, puedo exportar cosas como un archivo de Photoshop (PSD), gracias a las opciones de exportación de Procreate.
El mismo dibujo se abrió en Photoshop.
Luego uniré algunas, de modo que solo trabaje con unas 8 capas como máximo. Utilizo un complemento de Photoshop llamado tinyPNG para exportar cada capa individualmente. Escuché que hay mejores herramientas de compresión, pero estoy bastante contento con esta.
A continuación, iré a mi editor de código y crearé un div para albergar todas las imágenes que están contenidas en las capas. Le doy a ese div posicionamiento relativo mientras que todas las imágenes dentro de él obtienen un posicionamiento absoluto. Esto coloca las imágenes una encima de la otra.
<div id="zebra-ill" role="presentation">
<img class="zebraimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport6.png" />
<img class="zebraimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport5.png" />
…
</div>#zebra-ill {
position: relative;
min-height: 650px;
max-width: 500px;
}
.zebraimg {
position: absolute;
top: 0;
left: 0;
perspective: 600px;
transform-style: preserve-3d;
transform: translateZ(0);
width: 100%;
}El ancho del 100% de la imagen limitará todas las imágenes al tamaño del div principal. Hago esto para controlarlos todos a la vez con las mismas restricciones, lo que funciona bien para condiciones de respuesta. El max-width y min-height en el padre me permite limitar la forma en que el div se encoge y crece, especialmente cuando se coloca en un diseño de cuadrícula CSS. Deberá ser flexible, pero también tendrá algunas restricciones y CSS Grid es ideal para eso.
A continuación, agrego un mousemove detector de eventos en el div principal con JavaScript. Eso me permite capturar información sobre las coordenadas del mouse usando e.clientX y e.clientY.
const zebraIll = document.querySelector('#zebra-ill')
// Hover
zebraIll.addEventListener('mousemove', e => {
let x = e.clientX;
let y = e.clientY;
})Luego, revisaré cada uno de los dibujos y usaré esas coordenadas para mover las imágenes. Incluso aplicaré estilos de transformación conectados a esas coordenadas.
const zebraIll = document.querySelector('#zebra-ill')
const zebraIllImg = document.querySelectorAll('.zebraimg')
const rate = 0.05
//hover
zebraIll.addEventListener('mousemove', e => {
let x = e.clientX;
let y = e.clientY;
zebraIllImg.forEach((el, index) => {
el.style.transform =
`rotateX(${x}deg) rotateY(${y}deg)`
})
})Ver la pluma
página de cebra por Sarah Drasner (@sdras)
en CodePen.
¡Vaya, más despacio, compañero! Eso es demasiado movimiento, queremos algo un poco más sutil. Así que tendré que ralentizarlo multiplicándolo por una tasa baja, como 0.05. También quiero cambiarlo un poco por capa, así que usaré el índice de capas para acelerar o ralentizar el movimiento.
const zebraIll = document.querySelector('#zebra-ill')
const zebraIllImg = document.querySelectorAll('.zebraimg')
const rate = 0.05
// Hover
zebraIll.addEventListener('mousemove', e => {
let x = e.clientX;
let y = e.clientY;
zebraIllImg.forEach((el, index) => {
let speed = index += 1
let xPos = speed + rate * x
let yPos = speed + rate * y
el.style.transform =
`rotateX(${xPos - 20}deg) rotateY(${yPos - 20}deg) translateZ(${index * 10}px)`
})
})Finalmente, puedo crear una casilla de verificación que le pregunte al usuario si desea desactivar este efecto.
<p>
<input type="checkbox" name="motiona11y" id="motiona11y" />
<label for="motiona11y">If you have a vestibular disorder, check this to turn off some of the effects</label>
</p>const zebraIll = document.querySelector('#zebra-ill')
const zebraIllImg = document.querySelectorAll('.zebraimg')
const rate = 0.05
const motioncheck = document.getElementById('motiona11y')
let isChecked = false
// Check to see if someone checked the vestibular disorder part
motioncheck.addEventListener('change', e => {
isChecked = e.target.checked;
})
// Hover
zebraIll.addEventListener('mousemove', e => {
if (isChecked) return
let x = e.clientX;
let y = e.clientY;
// ...
})Ahora el usuario tiene la capacidad de ver la dimensionalidad en capas del dibujo al pasar el mouse, pero también puede desactivar el efecto si le molesta.
Efecto de dibujo
La capacidad de hacer que algo parezca que ha sido dibujado en la página ha existido por un tiempo y hay muchos artículos sobre cómo se hace. También lo cubro en un curso que hice para Frontend Masters.
La premisa es la siguiente:
- Tome una ruta SVG y hágalo punteado con
dashoffset. - Haz el guión a lo largo de toda la forma.
- Animar el
dashoffset(el espacio entre guiones).
Lo que obtienes al final es una especie de efecto de “arrastre”.
Pero en este dibujo en particular, habrás notado que las partes que animé parecen dibujadas a mano, lo cual es un poco más único. Verá, aunque ese efecto funcionará bien para dibujos más mecánicos, la red aún no admite el uso de líneas cónicas (líneas que varían en grosor, como es típico de una sensación más dibujada a mano).
Para este enfoque, llevé el archivo a Illustrator, tracé las líneas de esa parte de mi dibujo e hice que esas líneas se estrecharan entrando en el panel Trazo, donde seleccioné “Más opciones” y hice clic en la opción ahusada del menú desplegable.
Dupliqué esas líneas y creé caminos más gruesos y uniformes debajo. Luego tomé esas líneas gruesas y las animé en la página. Ahora mi dibujo se muestra a través de la forma:
Esto es lo que hice:
- Tracé con la herramienta Pluma y usé un pincel cónico.
- Dupliqué la capa y cambié las líneas para que fueran uniformes y más gruesas.
- Tomé la primera capa y creé un camino compuesto.
- Simplifiqué los puntos de ruta.
- Creé una máscara de recorte.
A partir de ahí, puedo animar todo con drawSVG y GreenSock. Aunque no es necesario, puede usar CSS para este tipo de animación. Hay un montón de puntos de ruta, así que en este caso, tiene sentido usar algo más poderoso. Escribí otra publicación que profundiza sobre cómo comenzar a crear este tipo de animaciones. Te recomendaría que comiences por ahí si eres nuevo.
Para usar drawSVG, debemos hacer algunas cosas:
- Cargue el script del complemento.
- Registre el complemento en la parte superior del archivo JavaScript.
- Asegúrese de que se estén utilizando rutas y que haya trazos en esas rutas.
- Asegúrese de que esos caminos estén dirigidos en lugar de los grupos que los albergan. En su lugar, los elementos principales se podrían orientar.
Aquí hay un ejemplo muy básico de drawSVG (cortesía de GreenSock):
Ver la pluma
DrawSVGPlugin Values por GreenSock (@GreenSock)
en CodePen.
Entonces, en el editor de gráficos, hay una máscara de recorte con líneas más ingeniosas, que exponen líneas gruesas y uniformes debajo. Desde aquí, tomaremos esos caminos más gruesos y usaremos el complemento drawSVG para animarlos en la página.
//register the plugin
gsap.registerPlugin(DrawSVGPlugin);
const drawLines = () => {
gsap.set('.cls-15, #yellowunderline, .cls-13', {
visibility: 'visible'
})
const timeline = gsap.timeline({
defaults: {
delay: 1,
ease: 'circ',
duration: 2
}
})
.add('start')
.fromTo('.cls-15 path', {
drawSVG: '0%'
}, {
drawSVG: '100%',
immediateRender: true
}, 'start')
.fromTo('#yellowunderline path', {
drawSVG: '50% 50%'
}, {
drawSVG: '100%',
immediateRender: true
}, 'start+=1')
.fromTo('.cls-13', {
drawSVG: '50% 50%'
}, {
drawSVG: '100%',
immediateRender: true
}, 'start+=1')
}
window.onload = () => {
drawLines()
};¡Y ahí lo tenemos! Una ilustración inicial para nuestro sitio que se crea a partir de un dibujo en capas en la aplicación Procreate para iPad. Espero que esto te ayude a hacer que tus proyectos web sean únicos con maravillosas ilustraciones dibujadas a mano. Si haces algo genial, ¡háznoslo saber en los comentarios a continuación!