Cómo construí el complemento de desplazamiento de una página

 

 

 

  • ¡Registro!
  • Listas de verificación de diseño de interfaz inteligente

  • Índice
    1. ¿Qué es el desplazamiento de una página?
      1. ¿Cual es su propósito?
    2. 1. A la mesa de dibujo
    3. 2. Construyendo los cimientos
    4. 3. Prepare el diseño y coloque las secciones
    5. 4. Activación manual y transformación de página
    6. 5. Funciones adicionales
    7. 6. Pruebas en varios navegadores
    8. 7. Acceso abierto a su complemento
      1. Estructura del repositorio
      2. Estructura Léame
    9. 8. Ampliación del apoyo
    10. Versión pura de JavaScript y Zepto
      1. Reconstrucción del complemento en JavaScript puro
      2. Reconstrucción del complemento en Zepto
      3. ¿Por qué pasar por todos los problemas?

    La mayoría de los complementos intentan hacer demasiadas cosas, lo que dificulta que los diseñadores y desarrolladores los integren en sus proyectos. Apple presentó el iPhone 5S, que iba acompañado de un sitio web de presentación en el que los visitantes eran guiados por secciones de una página y cuyos mensajes se reducían a una función clave por sección. Pete Rojwongsuriya descubrió que esta era una excelente manera de presentar un producto, minimizando el riesgo de que los visitantes pasaran accidentalmente por información clave, y se propuso encontrar un complemento que hiciera precisamente esto. Para su sorpresa, no encontró una solución sencilla para integrar en sus proyectos actuales. Fue entonces cuando nació One Page Scroll.

     

    Los efectos de desplazamiento existen en el diseño web desde hace años y, si bien hay muchos complementos disponibles para elegir, solo unos pocos tienen la simplicidad y el peso liviano que la mayoría de los desarrolladores y diseñadores buscan. La mayoría de los complementos que he visto intentan hacer demasiadas cosas, lo que dificulta que los diseñadores y desarrolladores los integren en sus proyectos.

    No hace mucho, Apple presentó el iPhone 5S, que iba acompañado de un sitio web de presentación en el que los visitantes eran guiados por secciones de una página y cuyos mensajes se reducían a una función clave por sección. Descubrí que esta es una excelente manera de presentar un producto, minimizando el riesgo de que los visitantes pasen accidentalmente por información clave.

    Me propuse encontrar un complemento que hiciera precisamente esto. Para mi sorpresa, no encontré una solución sencilla para integrar en mis proyectos actuales. Fue entonces cuando nació One Page Scroll.

    ¿Qué es el desplazamiento de una página?

    One Page Scroll es un complemento de jQuery que le permite crear un diseño de desplazamiento único para un grupo de secciones en una página con un marcado mínimo.

    Explicaré cómo construí este complemento, desde su inicio hasta la planificación, las pruebas y finalmente la publicación del código de forma gratuita.

    Nota: Antes de crear este complemento, estaba al tanto de la controversia sobre el "secuestro de desplazamiento", mediante el cual un sitio web anula el comportamiento de desplazamiento nativo del navegador para crear su propia interacción, lo que confunde a algunos visitantes. One Page Scroll inevitablemente iría en contra de este principio, así que decidí encontrar formas de aliviar la frustración. Una cosa buena del complemento es que los desarrolladores pueden establecer un respaldo que revierte el desplazamiento desde su estado "secuestrado" a su comportamiento nativo para ciertos tamaños de pantalla. De esta manera, los desarrolladores pueden mantener el alto rendimiento y la calidad de sus sitios web en dispositivos de bajo consumo, como teléfonos inteligentes y tabletas. Aparte de eso, también puedes controlar la duración de la animación que lleva al visitante de una sección a la siguiente, lo que te permite evitar la transición lenta que se ve en el sitio web del iPhone 5S de Apple.

    ¿Cual es su propósito?

    Como mencioné, la mayoría de los complementos que encontré ofrecen demasiadas funciones innecesarias, lo que dificulta su integración. El propósito de este complemento es resolver este problema. El complemento tenía que:

    • ser fácil de usar,
    • ser fácil de integrar,
    • requieren un marcado mínimo,
    • hacer una cosa bien (es decir, desplazarse por una página como lo hace el sitio web del iPhone 5S).

    1. A la mesa de dibujo

    Comencé visualizando el complemento como un todo. Debería permitir a los visitantes desplazarse por cada sección de la página individualmente. Para hacer eso, necesitaba una forma de deshabilitar el comportamiento de desplazamiento predeterminado del navegador, mientras apilaba cada sección en orden y movía la página manualmente cuando se activa el desplazamiento.

     

    Después de eso, dividí el concepto en pequeñas tareas, tratando de encontrar una solución para cada tarea en mi mente. Aquí hay una lista de las funciones y tareas que se me ocurrieron:

    1. Prepare el diseño y coloque las secciones.
      Deshabilite el comportamiento de desplazamiento predeterminado del navegador con CSS aplicándolo overflow: hiddena la bodyetiqueta. Coloque cada sección en secuencia, mientras calcula y adjunta toda la información y clases necesarias.
    2. Configure el disparador de desplazamiento manual.
      Detecte el activador de desplazamiento usando jQuery, luego determine la dirección y luego mueva el diseño usando CSS.
    3. Agrega características.
      Agregue capacidad de respuesta, bucle, compatibilidad con deslizamiento móvil, paginación, etc.
    4. Pruebe en todos los navegadores.
      Asegúrese de que el complemento funcione correctamente en todos los navegadores modernos (Chrome, Safari, Firefox, Internet Explorer 10) y en los sistemas operativos más populares (Windows, Mac OS X, iOS y Android 4.0+).
    5. Abra el complemento de código abierto.
      Cree un nuevo repositorio, estructurándolo y escribiendo instrucciones sobre cómo utilizar el complemento.
    6. Ampliar el apoyo.
      Explore otras formas de aumentar la compatibilidad del complemento.

    2. Construyendo los cimientos

    Ahora que había visualizado todo el concepto, comencé a crear el complemento con esta plantilla:

    !function($) { var defaults = { sectionContainer: "section", … }; $.fn.onepage_scroll = function(options) { var settings = $.extend({}, defaults, options); … }}($)

    La plantilla comienza con un !function($) { … }($)módulo que proporciona alcance local a la variable global para jQuery. El propósito de esta función es reducir la sobrecarga de la búsqueda jQuery ( $) y evitar conflictos con otras bibliotecas de JavaScript.

    La defaultsvariable en la parte superior contiene las opciones predeterminadas para el complemento. Por lo tanto, si no define ninguna opción, recurrirá a estos valores.

    La $.fn.onepage_scrollfunción es la función principal que inicia todo. No olvide reemplazar onepage_scrollcon su propio nombre de función si está creando el suyo propio.

    Se puede deshabilitar fácilmente el comportamiento de desplazamiento agregando overflow: hiddena la bodyetiqueta mediante CSS un nombre de clase específico del complemento. Es importante crear una convención de nomenclatura de clases específica del complemento para evitar conflictos con los estilos CSS existentes. Normalmente uso una abreviatura del nombre del complemento, seguida de un guión y una palabra descriptiva: por ejemplo, .onepage-wrapper.

     

    Ahora que todos los fundamentos están establecidos correctamente, construyamos la primera función.

    3. Prepare el diseño y coloque las secciones

    Vayamos a la parte más interesante: hacer el cálculo y abandonar instantáneamente todo mi esfuerzo más adelante en el proceso. Pensé que necesitaba colocar cada sección en secuencia recorriendo cada una de ellas y luego colocándolas para que no se superpongan entre sí. Aquí está el fragmento que se me ocurrió:

    var sections = $(settings.sectionContainer);var topPos = 0;$.each(sections, function(i) { $(this).css({ position: "absolute", top: topPos + "%" }).addClass("ops-section").attr("data-index", i+1); topPos = topPos + 100;});

    Este fragmento recorre cada selector presentado ( sectionContainerse define en la defaultsvariable), aplica position: absolutey asigna a cada uno la posición correcta topque necesita para alinearse correctamente.

    La topposición se almacena en la topPosvariable. El valor inicial es 0y aumenta a medida que recorre cada uno. Para hacer que cada sección sea una página completa y apilarse correctamente, todo lo que tenía que hacer era establecer la altura de cada sección al 100% y aumentar la topPosvariable en 100 cada vez que recorre una sección. Ahora, cada sección debe apilarse correctamente, mientras que solo la primera sección es visible para los visitantes.

    Esto puede parecer fácil, pero me tomó un par de horas implementarlo y ver qué tan confiable es, solo para darme cuenta en el siguiente paso de que no necesitaba nada de esto en absoluto.

    4. Activación manual y transformación de página

    Se podría pensar que el siguiente paso sería mover cada sección a su nueva posición cuando se active el desplazamiento; yo también lo pensé. Resulta que existe una solución mejor. En lugar de mover cada sección cada vez que el usuario se desplaza, lo que requeriría otro bucle y otro cálculo, envolví todas las secciones en un contenedor y usé CSS3 translate3dpara mover todo el contenedor hacia arriba y hacia abajo. Debido a translate3dque admite valores basados ​​en porcentajes, podemos usar nuestro topcálculo de posición anterior para mover cada sección a la ventana gráfica sin tener que volver a calcularla. Otro beneficio es que esto le brinda control sobre la configuración de sincronización y facilitación de su animación.

    Como habrás notado, esta solución hace que el fragmento de posicionamiento ilustrado en el paso anterior sea innecesario porque el contenedor que hemos introducido hace que cada sección se apile correctamente sin necesidad de ningún estilo adicional.

    Ahora, todo lo que tenemos que hacer es detectar la dirección del desplazamiento del usuario y mover el contenedor en consecuencia. Aquí está el código para detectar la dirección de desplazamiento:

    function init_scroll(event, delta) { var deltaOfInterest = delta, timeNow = new Date().getTime(), quietPeriod = 500; // Cancel scroll if currently animating or within quiet period if(timeNow - lastAnimation quietPeriod + settings.animationTime) { event.preventDefault(); return; } if (deltaOfInterest 0) { el.moveDown() } else { el.moveUp() } lastAnimation = timeNow;}$(document).bind('mousewheel DOMMouseScroll', function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta);});

    En el fragmento anterior, primero vinculo una función al mousewheelevento (o DOMMouseScrollpara Firefox), de modo que pueda interceptar los datos de desplazamiento para determinar la dirección del desplazamiento. Al vincular mi propia init_scrollfunción en estos eventos, puedo pasar lo disponible wheelDatay init_scrolldetectar la dirección.

     

    En un mundo perfecto, todo lo que tendría que hacer para detectar y mover cada sección es recuperar el delta de la wheelDatavariable, usar el valor para determinar la dirección y realizar la transformación. Sin embargo, eso no es posible. Cuando se trata de una animación de secuenciación, debe crear un mecanismo de seguridad para evitar que el disparador se duplique, lo que provocaría que la animación se superponga. Podemos utilizar setIntervalpara solucionar este problema llamando a cada animación individualmente, con su propio tiempo reservado para crear una secuencia. Pero en términos de precisión y confiabilidad, setIntervalse queda corto porque cada navegador lo maneja de manera diferente. Por ejemplo, en Chrome y Firefox, setIntervalse limita en pestañas inactivas, lo que hace que las devoluciones de llamada no se realicen a tiempo. Al final, decidí recurrir a una marca de tiempo.

    var timeNow = new Date().getTime(),quietPeriod = 500;…if(timeNow - lastAnimation quietPeriod + settings.animationTime) { event.preventDefault(); return;}…lastAnimation = timeNow;

    En el fragmento de arriba (extraído del anterior), puede ver que asigné la marca de tiempo actual a la timeNowvariable antes de la detección, para que pueda verificar si la animación anterior se realizó durante más de 500 milisegundos. Si la animación anterior se realizó durante menos de 500 milisegundos, entonces la condición evitaría que la transformación se superponga a la animación en curso. Al utilizar una marca de tiempo, en lugar de setInterval, podemos detectar el tiempo con mayor precisión porque la marca de tiempo se basa en los datos globales.

    if (deltaOfInterest 0) { el.moveDown()} else { el.moveUp()}

    Los moveUpy moveDownson funciones que cambian todos los atributos del diseño para reflejar el estado actual del sitio web. En estas funciones se agregan datos como el índice actual, el nombre de la clase de la sección actual, etc. Cada una de estas funciones llamará al transformmétodo final para mover la siguiente sección a la ventana gráfica.

    $.fn.transformPage = function(settings, pos, index) { … $(this).css({ "-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, "-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing, "-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing, "transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "transition": "all " + settings.animationTime + "ms " + settings.easing }); …}

    Arriba está el transformmétodo que maneja el movimiento de cada sección. Como puedes ver, he usado la transformación CSS3 para manejar toda la manipulación con JavaScript. La razón por la que hice esto en JavaScript, en lugar de en una hoja de estilo separada, es para permitir a los desarrolladores configurar el comportamiento del complemento (principalmente la sincronización y la aceleración de la animación) a través de sus propias llamadas a funciones, sin tener que ingresar a una hoja de estilo separada. y busque la configuración. Otra razón es que la animación requiere un valor dinámico para determinar el porcentaje de la transición, que solo se puede calcular en JavaScript contando el número de secciones. ¿QUÉ SARTÉN COMPRAR? Comparativa, precios y análisis de LAS MEJORES SARTENES

     

    5. Funciones adicionales

    Al principio era reacio a agregar funciones, pero después de recibir tan buenos comentarios de la comunidad de GitHub, decidí mejorar el complemento poco a poco. Lancé la versión 1.2.1, que agrega un montón de devoluciones de llamadas y bucles y, lo más difícil de todo, capacidad de respuesta.

    Al principio, no me concentré en crear un complemento para dispositivos móviles (lo cual todavía me arrepiento hoy). Más bien, utilicé una solución simple (gracias a Eike Send por sus eventos de deslizamiento) para detectar y convertir datos de deslizamiento en datos delta utilizables, para poder usarlos en mi init_scrollfunción. Eso no siempre produce el mejor resultado en navegadores móviles, como los navegadores personalizados de Android, por lo que terminé implementando una opción alternativa que permite que el complemento vuelva a su comportamiento de desplazamiento nativo cuando el navegador alcanza un cierto ancho. Aquí está el script que hace eso:

    var defaults = { responsiveFallback: false …};function responsive() { if ($(window).width() settings.responsiveFallback) { $("body").addClass("disabled-onepage-scroll"); $(document).unbind('mousewheel DOMMouseScroll'); el.swipeEvents().unbind("swipeDown swipeUp"); } else { if($("body").hasClass("disabled-onepage-scroll")) { $("body").removeClass("disabled-onepage-scroll"); $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast"); } el.swipeEvents().bind("swipeDown", function(event) { if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); }).bind("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); $(document).bind('mousewheel DOMMouseScroll', function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); }); }}

    Primero, definí una variable predeterminada para activar este respaldo. Se responsiveFallbackutiliza para determinar cuándo el complemento debe activar el respaldo.

     

    El fragmento anterior detectará el ancho del navegador para determinar si se debe ejecutar la función de respuesta. Si el ancho alcanza el valor definido en responsiveFallback, entonces la función desvinculará todos los eventos, como deslizar el dedo y desplazarse, devolverá al usuario a la parte superior de la página para prepararse para la realineación de cada sección y luego volverá a habilitar el comportamiento de desplazamiento predeterminado del navegador. para que el usuario pueda deslizarse por la página como de costumbre. Si el ancho excede el valor definido, entonces el complemento busca una clase disabled-onepage-scrollpara determinar si ya se ha inicializado; si no es así, se reinicializa nuevamente.

    La solución no es ideal, pero ofrece a los diseñadores y desarrolladores la opción de elegir cómo manejar sus sitios web en dispositivos móviles, en lugar de obligarlos a abandonar los dispositivos móviles.

    6. Pruebas en varios navegadores

    Las pruebas son una parte esencial del proceso de desarrollo y, antes de poder lanzar un complemento, debes asegurarte de que funciona bien en la mayoría de las máquinas que existen. Chrome es mi navegador preferido y siempre empiezo a desarrollar en él. Tiene muchos beneficios como navegador de desarrollo principal, pero sus preferencias personales pueden variar. Para mí, Chrome tiene una herramienta de inspección más eficiente. Además, cuando consigo que un complemento funcione en Chrome, sé que probablemente también funcionará en Safari y Opera.

    Utilizo principalmente mi Macbook Air para desarrollar complementos, pero también tengo una PC en casa para comprobar entre plataformas. Cuando consigo que un complemento funcione en Chrome, lo probaré manualmente en Safari, Opera y (por último) Firefox en Mac OS X, seguido de Chrome, Firefox e Internet Explorer (IE) 10 en Windows.

    La razón por la que pruebo sólo estos navegadores es que la mayoría de los usuarios los utilizan. Podría haber probado IE 9 e incluso IE 8, pero eso me habría impedido lanzar el complemento a tiempo con el lanzamiento del sitio web del iPhone 5S.

    En general, esta no es una buena práctica y evitaré hacerlo en el futuro. Pero lo bueno de hacer que el complemento sea de código abierto es que otros desarrolladores pueden ayudar a parchearlo después de su lanzamiento. Después de todo, el propósito de un proyecto de código abierto no es crear el producto perfecto, sino crear un punto de partida para que otros desarrolladores extiendan el proyecto para que sea lo que quieran que sea.

    Para aliviar la molestia de las pruebas en varios navegadores, cada vez que completo un complemento, crearé una página de demostración para mostrar todas las características del complemento y luego la subiré a mi sitio web y la probaré antes de compartirla. el complemento en GitHub. Esto es importante porque le permite ver cómo funciona el complemento en un entorno de servidor real y corregir cualquier error que quizás no pueda replicar localmente. Una vez que la página de demostración esté operativa en mi sitio web, aprovecharé la oportunidad para probar el complemento en otros dispositivos, como teléfonos y tabletas.

     

    Con estas pruebas, habrá cubierto la gran mayoría de navegadores que existen y habrá preparado el complemento para el mundo real.

    7. Acceso abierto a su complemento

    Cuando creas que el complemento está listo, el último paso es compartirlo en GitHub. Para hacer esto, cree una cuenta en GitHub, configure Git y cree un nuevo repositorio . Una vez hecho esto, clone el repositorio en su máquina local. Esto debería generar una carpeta con el nombre de su complemento en su máquina local. Copie el complemento a la carpeta recién creada y estructure su repositorio.

    Estructura del repositorio

    La forma en que estructura su repositorio depende de usted. Así es como lo hago:

    • La carpeta de demostración consta de demostraciones funcionales, con todos los recursos necesarios.
    • Las versiones minimizada y normal del complemento se encuentran en la carpeta raíz.
    • El CSS y los recursos de muestra, como las imágenes (si el complemento lo requiere), se encuentran en la carpeta raíz.
    • El archivo Léame está en el directorio raíz de la carpeta generada.

    Estructura Léame

    Otro paso importante es escribir instrucciones claras para la comunidad de código abierto. Por lo general, todas mis instrucciones están en un archivo Léame, pero si las suyas requieren una estructura más compleja, puede optar por una página wiki en GitHub. Así es como estructuro mi archivo Léame:

    1. Introducción
      Expliqué el propósito del complemento, acompañado de una imagen y un enlace a la demostración.
    2. Requisitos y compatibilidad
      Coloque esto al frente para que los desarrolladores puedan ver de inmediato si querrán usar el complemento.
    3. Uso básico
      Esta sección consta de instrucciones paso a paso, desde incluir la biblioteca jQuery hasta agregar el marcado HTML y llamar a la función. Esta sección también explica las opciones disponibles para que jueguen los desarrolladores.
    4. Uso avanzado
      Esta sección contiene instrucciones más complejas, como métodos públicos, devoluciones de llamada y cualquier otra información que los desarrolladores puedan encontrar útil.
    5. Otros recursos
      Esta sección consta de enlaces al tutorial, créditos, etc.

    8. Ampliación del apoyo

    Este complemento realmente no necesita la biblioteca jQuery para hacer lo que hace, pero debido a la presión de abrirlo a tiempo para el sitio web del iPhone 5S, decidí tomar un atajo y confiar en jQuery.

    Para hacer las paces, y exclusivamente para los lectores de Smashing Magazine, he reconstruido One Page Scroll usando JavaScript puro (también hay disponible una versión Zepto). Con la versión de JavaScript puro, ya no es necesario incluir jQuery. El complemento funciona desde el primer momento.

    Versión pura de JavaScript y Zepto

    • Repositorio de JavaScript puro
    • repositorio zepto

    Reconstrucción del complemento en JavaScript puro

    El proceso de generar soporte para las bibliotecas puede parecer desalentador al principio, pero es mucho más fácil de lo que piensas. La parte más difícil de crear un complemento es hacer los cálculos correctos. Como ya lo había hecho para este, transformar el complemento jQuery en uno de JavaScript puro fue solo unas pocas horas de trabajo.

     

    Debido a que el complemento depende en gran medida de la animación CSS3, todo lo que tuve que hacer fue reemplazar los métodos específicos de jQuery con métodos JavaScript idénticos. Además, aproveché la oportunidad para reorganizar JavaScript en la siguiente estructura estándar:

    • Variables predeterminadas
      Esto es esencialmente lo mismo que la versión jQuery, en la que definí todas las variables, incluidas las variables predeterminadas para las opciones que usarán otras funciones.
    • Función de inicialización
      Esta función se utiliza para preparar y posicionar el diseño y para la inicialización que se ejecuta cuando onePageScrollse llama a la función. Todos los fragmentos que asignan nombres de clases, atributos de datos y estilos de posicionamiento y que vinculan todas las entradas del teclado residen aquí.
    • Métodos privados
      La sección de métodos privados contiene todos los métodos que el complemento llamará internamente. Aquí residen métodos como los eventos de deslizamiento, la transformación de la página, el respaldo responsivo y la detección de desplazamiento.
    • Métodos públicos
      Esta sección contiene todos los métodos que los desarrolladores pueden llamar manualmente. Métodos como moveDown()y moveUp()residen moveTo()aquí.
    • Métodos de utilidad
      Esta sección contiene todos los ayudantes que replican una función jQuery para acelerar el tiempo de desarrollo y reducir el tamaño del archivo JavaScript. Aquí residen ayudantes como Object.extend, que replica la jQuery.extendfunción.

    Me encontré con algunas molestias, como cuando tuve que escribir un método solo para agregar o eliminar un nombre de clase, o cuando tuve que usar document.querySelectoren lugar del simple $. Pero todo eso contribuye a un complemento mejor y más estructurado, que al final beneficia a todos.

    Reconstrucción del complemento en Zepto

    La razón por la que decidí admitir Zepto, a pesar de que solo admite navegadores modernos (IE 10 y superiores), es que ofrece a los desarrolladores una alternativa más eficiente y liviana a jQuery versión 2.0 y superiores, con una API más versátil. El tamaño del archivo de Zepto (alrededor de 20 KB) es considerablemente menor que el de jQuery 2.0 (alrededor de 80 KB), lo que marca una gran diferencia en la velocidad de carga de la página. Debido a que cada vez se accede más a los sitios web desde teléfonos inteligentes, Zepto podría ser una mejor alternativa a jQuery.

    Reconstruir un complemento jQuery con Zepto es una tarea mucho más sencilla porque Zepto es similar a jQuery en su enfoque de la API, pero más rápido y liviano. La mayor parte del script es idéntico a la versión jQuery excepto por la parte de animación. Debido a que Zepto $.fn.animate()admite la animación CSS3 y la animationEnddevolución de llamada desde el principio, puedo sacar este feo fragmento:

    $(this).css({ "-webkit-transform": "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "-webkit-transform " + settings.animationTime + "ms " + settings.easing, "-moz-transform": "translate3d(0, " + pos + "%, 0)", "-moz-transition": "-moz-transform " + settings.animationTime + "ms " + settings.easing, "-ms-transform": "translate3d(0, " + pos + "%, 0)", "-ms-transition": "-ms-transform " + settings.animationTime + "ms " + settings.easing, "transform": "translate3d(0, " + pos + "%, 0)", "transition": "transform " + settings.animationTime + "ms " + settings.easing});$(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { if (typeof settings.afterMove == 'function') settings.afterMove(index, next_el);});

    Y lo reemplacé con esto:

    $(this).animate({ translate3d: "0, " + pos + "%, 0" }, settings.animationTime, settings.easing, function() { if (typeof settings.afterMove == 'function') settings.afterMove(index, next_el); });}

    Con Zepto, puedes animar con CSS3 sin tener que definir todos los estilos CSS o vincular la devolución de llamada tú mismo. Zepto maneja todo eso por usted a través del $.fn.animate()método familiar, que funciona de manera similar al $.fn.animate()método en jQuery pero con soporte CSS3.

    ¿Por qué pasar por todos los problemas?

    Debido a que jQuery se ha convertido en la biblioteca de referencia de muchas personas, también se ha vuelto cada vez más compleja y torpe y, en ocasiones, tiene un rendimiento deficiente. Al proporcionar versiones para otras plataformas, aumentará el alcance de su complemento.

    Volver a la base también le ayudará a crear un complemento mejor y más compatible para el futuro. jQuery y otras bibliotecas son muy indulgentes con problemas estructurales menores, como comas faltantes y $(element)el tipo de cosas que me han vuelto un poco perezoso y podrían comprometer la calidad de mis complementos. Sin todos estos atajos en JavaScript puro, estaba más consciente de lo que sucede en mi complemento, qué métodos están afectando el rendimiento y qué puedo hacer exactamente para optimizar el rendimiento.

    Aunque las bibliotecas de JavaScript como jQuery nos han hecho la vida más fácil, usar una puede no ser la forma más eficiente de lograr su objetivo. Algunos com






    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

    Cómo construí el complemento de desplazamiento de una página

    Cómo construí el complemento de desplazamiento de una página

    ¡Registro! Listas de verificación de diseño de interfaz inteligente Índice ¿Qué es el desplazamiento

    programar

    es

    https://aprendeprogramando.es/static/images/programar-como-construi-el-complemento-de-desplazamiento-de-una-pagina-854-0.jpg

    2024-05-20

     

    Cómo construí el complemento de desplazamiento de una página
    Cómo construí el complemento de desplazamiento de una página

    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