Me encanta la forma en que el texto se desliza en este sitio http://riiotlabs.com/fr/accueil. ¿Se logra esto usando js css? ¿Qué tutorial puede ser de ayuda?

Bueno, obviamente, se hace usando JavaScript y CSS, ¿qué más tienes que animar en el lado del cliente? Sí, SVG está ahí, pero los textos de animación serán súper complejos y requerirán mucho tiempo.

Echa un vistazo a esto: Animate.css

Puede hacer muchas animaciones con bastante facilidad simplemente importando esta biblioteca, no es necesario calcular fórmulas súper complejas para obtener las animaciones correctas, porque en la mayoría de los casos este tipo de animaciones se logran con las fórmulas de SHM (Simple Harmonic Movimientos) de Física para que pueda dar ese aspecto natural hinchable.

Mi consejo es que importe la biblioteca anterior y experimente con ella. En caso de que no le guste cierto elemento, solo modifique esa parte de la biblioteca y listo. Como está alojado en GitHub, obtendrás todo tipo de nerds para ayudarte, incluso yo.

Eso es muy bonito y bastante único, por lo que no vas a encontrar un solo tutorial que te ayude, pero si miras con cuidado, puedes dividirlo en pasos y aprender a hacer cada pieza. Por ejemplo:

  1. Divide las líneas para que cada línea se anime por separado (un complemento jQuery para una tipografía web radical).
  2. Deslice una línea / objeto hacia arriba (Animación usando transformaciones CSS
  3. Retrase cada línea en un grupo de líneas: animación escalonada (sincronización de animación CSS3 escalonada)
  4. Activa la animación cuando te desplazas hacia ella (ScrollMagic)

1 y 4 necesitan Javascript, y 2 y 3 se pueden hacer con CSS o Javascript. Busque cada una de esas piezas en línea y debería poder encontrar tutoriales. Hice algunas búsquedas básicas y las agregué entre paréntesis, pero puede buscar un poco más si no funcionan bien.

Absolutamente

Puedes ir en diferentes direcciones con esto.

Puede lograr este efecto con jQuery, pero implementé una experiencia de interfaz de usuario similar utilizando una biblioteca CSS llamada Animate.css.

Es realmente sencillo de implementar y usar en su sitio. Puede consultar el repositorio de github de Animate.css para obtener ejemplos sobre cómo usarlo.

Esto se puede hacer con JavaScript y jQuery. Si busca en Google algo así como “desvanecer el texto al desplazarse”, obtendrá suficientes tutoriales sobre cómo hacer que el texto se desvanezca cuando se desplaza.

Luego solo tiene que implementar los efectos que desea en jQuery o JavaScript y eso es todo.

More Interesting

Quiero codificar mi propio sitio web en HTML5. ¿Dónde empiezo?

Cómo hacer un sitio web usando HTML y CSS

He seleccionado un tema de WordPress receptivo que no funciona en dispositivos móviles. ¿Hay alguna forma de activarlo?

Estoy interesado en asistir a un campamento de desarrolladores web, pero no puedo dedicar tiempo a un programa inmersivo en este momento debido al trabajo. ¿Hay algún bootcamp que ofrezca a tiempo parcial?

¿Cómo se comienza una comunidad de historias en línea como Wattpad y Quotev?

¿Por qué necesito aprender a codificar cuando puedo usar WordPress o Drupal?

Tengo todas las habilidades necesarias para crear aplicaciones de software web a gran escala. También soy muy introvertido y encuentro que sentarme en una oficina es totalmente agotador. ¿Cuál es la mejor manera de abordar la situación?

Quiero crear un sitio web donde publique blogs sobre mis proyectos personales. Además, deseo usar Python / Django. ¿Qué base de datos debo usar?

Estoy planeando hacer un proyecto web 'clásico'. ¿Debería considerar Meteor?

¿Dónde debería comenzar a desarrollar mi aplicación web en Python y Django?

Estoy aprendiendo MEAN stack en freecodecamp.com. ¿Estoy en el camino correcto para convertirme en desarrollador web y posiblemente conseguir un trabajo como tal?

Estoy buscando un PHP (desarrollador). ¿Cómo puedo reclutar uno?

Tengo 14 años y soy nuevo en el desarrollo web, acabo de aprender algunas etiquetas de HTML, ¿qué debo hacer a continuación?

Cómo hacer que un sitio web parezca desagradable, pero sin usuarios

¿Debo usar JavaScript, jQuery o ambos para crear un sitio web dinámico?