Desplaza y anima tu página fácilmente con Force.js

La animación web es más fácil que nunca, y las animaciones de CSS3 se convierten en la norma. Sin embargo, JavaScript sigue siendo increíblemente valioso y es uno de los pocos idiomas confiables para las animaciones técnicas.

La biblioteca Force.js es una secuencia de comandos gratuita de código abierto creada en torno a animaciones de página dinámicas .

Puede crear animaciones de salto de desplazamiento dentro de la página, o puede animar elementos alrededor de la página . Ambos son igualmente simples de configurar y la biblioteca viene con un montón de características.

Por defecto, Force.js se basa en transiciones CSS siempre que sea posible. Funcionan en todos los navegadores modernos y el código es mucho más simple, además ofrece un soporte más amplio para los usuarios que no permiten JavaScript .

La biblioteca utiliza un método de respaldo natural con código JavaScript, por lo que también es seguro para los navegadores más antiguos.

Y, Force.js es una biblioteca de vanilla, por lo que no requiere dependencias como jQuery. Pero, si amas jQuery, puedes ejecutar esa sintaxis sobre Force y seguirá funcionando bien. Ideal para versatilidad con diferentes sitios web.

Las dos grandes técnicas de animación son saltos y movimientos . Usted determina dónde se mueve el elemento, qué tan rápido se mueve y qué tipos de métodos de relajación.

La biblioteca también tiene un montón de opciones personalizadas que puede modificar para un mayor control sobre las animaciones. Puede editar los objetivos de los enlaces de anclaje y configurar qué easings necesitará, ¡ incluso si desea diferentes easings en la misma página!

Toda la documentación está disponible en GitHub, junto con los archivos.

O, si prefiere npm / Bower, puede extraer archivos directamente de esa manera. Solo tiene que incluir el archivo force.js en su encabezado y estará listo.

También recomiendo escanear la documentación porque está llena de ejemplos para los métodos jump() y move() .

Ambos toman argumentos para el tiempo, la relajación y la posición, por lo que es crucial entender cómo funcionan. Aunque, una vez que consigues esto, nunca mirarás hacia atrás porque es la biblioteca de animación liviana perfecta para cualquier proyecto.