Presentamos el menú de navegación de Jelly: cuando Canvas se encuentra con PaperJS

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • SmashingConf Nueva York 2024

  • Índice
    1. Antes que empecemos
  • Primer paso: cambiar la forma de la sección
  • Segundo paso: calcular la velocidad de desplazamiento
  • Paso tres: ¡Hazlo gelatina!
    1. 3.1 Determinar cuándo se detiene el desplazamiento
    2. 3.2 Animar el identificador del punto a "0"
  • En conclusión
    1. Comentario
    2. Otras lecturas
  • Web ayuda a diseñadores y desarrolladores a encontrar la mejor inspiración y recursos para sus proyectos. Aunque hay diferentes tutoriales y consejos disponibles en línea, Oleg Solomka cree que las técnicas de lienzo HTML5 son las que más faltan. Buenas noticias: tuvo la oportunidad de cubrir esa amplia brecha. En este artículo, a Oleg le gustaría compartir su experiencia y la historia de cómo dio vida al “Menú de navegación Jelly”.

     

    No hay duda de que la Web ayuda a diseñadores y desarrolladores a encontrar la mejor inspiración y recursos para sus proyectos. Aunque hay muchos tutoriales y consejos diferentes disponibles en línea, creo que las técnicas de lienzo HTML5 son las que más faltan. Buenas noticias: tuve la oportunidad de llenar este amplio vacío. En este artículo, me gustaría compartir mi experiencia y la historia de cómo le di vida al “Menú de navegación Jelly”. Los créditos van a Capptivate.co y a los íconos de Ashleigh Brennan : fueron mi inspiración para este proyecto.

    Antes que empecemos

    El código fuente de este proyecto se escribió originalmente en CoffeeScript; creo que es una mejor manera de expresar y compartir código JavaScript de esa manera. Me referiré a la fuente de CoffeScript en las secciones de código de esta publicación y también notará enlaces a CodePens que se han reescrito en JavaScript y que también representan partes locales del código. Recomiendo descargar el código fuente en GitHub para que puedas seguirme fácilmente mientras te explico detalladamente el código necesario.

     

    Utilicé PaperJS para los gráficos del lienzo y TweenJS para las animaciones. Ambos tienden a asustar a algunas personas, pero no te preocupes, son realmente intuitivos y fáciles de entender. Si desea aprender cómo configurar los entornos PaperJS y TweenJS, puede usar este excelente lápiz de arranque para divertirse en línea o este repositorio de git si desea experimentar localmente.

    Una vista previa del menú de navegación Jelly .

    Primer paso: cambiar la forma de la sección

    Nuestro primer objetivo es cambiar la forma de la sección del menú manipulando las curvas. Cada objeto se compone de puntos de anclaje. Estos puntos están conectados entre sí por curvas. Por lo tanto, cada punto tiene controladores de “entrada” y “salida” para definir la ubicación y dirección de curvas específicas. Las personas que trabajan con editores vectoriales deberían sentirse cómodas con este paso.

    En Paper.js, las rutas están representadas por una secuencia de segmentos conectados por curvas. Un segmento consta de un punto y dos controladores que definen la ubicación y dirección de las curvas. Vea las manijas en acción .

    Todo lo que tenemos que hacer es cambiar la handleOutposición de los puntos top-lefty bottom-right. Para lograr esto, escribí funciones simples llamadas "toppie" y "bottie":

    toppie:(amount)- @base.segments[1].handleOut.y = amount @base.segments[1].handleOut.x = (@wh/2)

    bottie:(amount)- @base.segments[3].handleOut.y = amount @base.segments[3].handleOut.x = - @wh/2

    @wh/2 is section center.

    @base variable holds section’s rectangle path.

    Es importante establecer la posición X del mango exactamente en el centro de la sección, para que la curva resulte simétrica.

    Segundo paso: calcular la velocidad de desplazamiento

    Entonces, lo siguiente que hay que hacer es calcular la velocidad y dirección de desplazamiento y luego pasar estos datos a las funciones bottiey . toppiePodemos escuchar el evento de desplazamiento del contenedor y determinar la posición de desplazamiento actual (en mi caso, el "contenedor" es un #wrapperelemento, mientras que en los ejemplos del lápiz es un objeto de ventana).

    # get current scroll valuewindow.PaperSections.next = window.PaperSections.$container.scrollTop()# and calculate the difference with previous scroll positionwindow.PaperSections.scrollSpeed = (window.PaperSections.next - window.PaperSections.prev)# to make it all work, all we have left to do is to save current scroll position to prev variablewindow.PaperSections.prev = window.PaperSections.next

    Esto se repite para cada evento de desplazamiento. En este fragmento de código, window.PaperSectionses solo una variable global. También hice algunas adiciones menores en mi implementación:

    • Un coeficiente tonto para aumentar la velocidad de desplazamiento multiplicándola por 1.2(solo jugué con él),
    • Corté el resultado de la velocidad de desplazamiento por su máximo para que no sea mayor que sectionHeight/2,
    • También agregué un coeficiente de dirección (podría ser 1o -1, puedes cambiarlo en dat.guila parte superior derecha de la página). De esta manera puedes controlar la dirección de reacción de las secciones.

    Aquí está el código final: Todo sobre Hoteles

     

    if window.PaperSections.i % 4 is 0 direction = if window.PaperSections.invertScroll then -1 else 1 window.PaperSections.next = window.PaperSections.$container.scrollTop() window.PaperSections.scrollSpeed = direction*window.PaperSections.slice 1.2*(window.PaperSections.next - window.PaperSections.prev), window.PaperSections.data.sectionheight/2 window.PaperSections.prev = window.PaperSections.next window.PaperSections.i++

    En este ejemplo, if window.PaperSections.i % 4 is 0nos ayuda a reaccionar cada cuatro eventos de desplazamiento, similar a un filtro. Esa función vive en window.PaperSections.scrollControl.

    ¡Eso es todo! ¡Ya casi hemos terminado! No podría ser más fácil, ¿verdad? Pruebe el desplazamiento aquí .

    Paso tres: ¡Hazlo gelatina!

    En este paso final, necesitamos animar las funciones toppiey con la relajación elástica de TweenJS cada vez que se detiene el desplazamiento.bottie0

    3.1 Determinar cuándo se detiene el desplazamiento

    Para hacer esto, agreguemos la setTimeoutfunción a nuestra window.PaperSections.scrollControlfunción (o scroll) con un retraso de 50 ms. Cada vez que se activa el evento de desplazamiento, el tiempo de espera se borra excepto el último, es decir, una vez que se detiene el desplazamiento, se ejecutará el código en nuestro tiempo de espera.

    clearTimeout window.PaperSections.timeOutwindow.PaperSections.timeOut = setTimeout - window.PaperSections.$container.trigger ‘stopScroll’ window.PaperSections.i = 0 window.PaperSections.prev = window.PaperSections.$container.scrollTop() , 50

    El foco principal aquí es el window.PaperSections.$container.trigger stopScrollevento. Podemos suscribirnos y lanzar la animación adecuadamente. Las otras dos líneas de código simplemente se utilizan para restablecer las variables auxiliares para scrollSpeedcálculos posteriores.

    3.2 Animar el identificador del punto a "0"

    A continuación, escribiremos la translatePointYfunción para darle vida a nuestra animación de gelatina. Esta función tomará el objeto como parámetro con los siguientes conjuntos clave-valor:

    { // point to move (our handleOut point) point: @base.segments[1].handleOut,

    // destination point to: 0, duration}

    El cuerpo funcional está compuesto por lo siguiente:

    translatePointY:(o)- # create new tween(from point position) to (options.to position, with duration) mTW = new TWEEN.Tween(new Point(o.point)).to(new Point(o.to), o.duration)

    # set easing to Elastic Out mTW.easing TWEEN.Easing.Elastic.Out

    # on each update set point’s Y to current animation point mTW.onUpdate - o.point.y = @y

     

    # finally start the tween mTW.start()

    La TWEEN.update()función también debe agregarse a cada cuadro del bucle de animación de PaperJS:

    onFrame = - TWEEN.update()

    Además, debemos detener todas las animaciones al desplazarnos. Agregué la siguiente línea a la función de escucha de desplazamiento:

    TWEEN.removeAll()

    Finalmente, debemos suscribirnos al stopScrollevento y lanzar las animaciones llamando a nuestra translatePointYfunción:

    window.PaperSections.$container.on ‘stopScroll’, = # calculate animation duration duration = window.PaperSections.slice(Math.abs(window.PaperSections.scrollSpeed*25), 1400) or 3000

    # launch animation for top left point @translatePointY( point: @base.segments[1].handleOut to: 0 duration: duration ).then = # clear scroll speed variable after animation has finished # without it section will jump a little when new scroll event fires window.PaperSections.scrollSpeed = 0

    # launch animation for bottom right point @translatePointY point: @base.segments[3].handleOut to: 0 duration: duration

    ¡Y voilá!

    Nota : En mi código fuente de la translatePointYfunción, agregué un objeto diferido para encadenamiento, flexibilización opcional y función onUpdate. Se omite aquí por razones de simplicidad.

    En conclusión

    Por último, pero no menos importante, se debe agregar una clase para las secciones. Por supuesto, puedes crear tantas instancias como quieras; sólo necesita definir el desplazamiento Y inicial y los colores. Además, deberá asegurarse de que la sección de su diseño tenga la misma altura que la sección del lienzo. Entonces podemos aplicar translated3dtanto al scrollevento como a las animaciones. Esto hará que las secciones HTML se muevan correctamente, al igual que las secciones del lienzo, y por lo tanto producirán una animación realista.

    La razón por la que necesitamos usar translate3den lugar de translateYes para asegurarnos de que los motores de renderizado de Webkit utilicen aceleración de hardware mientras los renderizan, para no salirnos del presupuesto de animación de 60 fps. Pero mantén los ojos bien abiertos si tus secciones contienen texto. Las transformaciones 3D eliminarán el suavizado de subpíxeles a escala de grises, por lo que puede verse un poco borroso.

    Comentario

    Espero sus pensamientos, preguntas y/o comentarios sobre el menú de navegación de Jelly en la sección de comentarios a continuación. ¡También puedes comunicarte conmigo a través de Twitter en cualquier momento!

    Otras lecturas

    • Documentación de código, simplificada
    • Escriba mejor CSS tomando prestadas ideas de funciones de JavaScript
    • Aprender JavaScript con imaginación
    • Esos atributos HTML que nunca usas

    (vf, il, mrn)Explora más en

    • Codificación
    • CSS
    • javascript
    • HTML





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Presentamos el menú de navegación de Jelly: cuando Canvas se encuentra con PaperJS

    Presentamos el menú de navegación de Jelly: cuando Canvas se encuentra con PaperJS

    Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX SmashingConf Nueva York 2024 Índice

    programar

    es

    https://pseint.es/static/images/programar-presentamos-el-menu-de-navegacion-de-jelly-cuando-canvas-se-encuentra-con-paperjs-822-0.jpg

    2024-04-04

     

    Presentamos el menú de navegación de Jelly: cuando Canvas se encuentra con PaperJS
    Presentamos el menú de navegación de Jelly: cuando Canvas se encuentra con PaperJS

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20