-1

Buenos días a todos lo primero, quería preguntar como hace la web de apple https://www.apple.com/es/ios/ios-13/ la animación o transición o lo que sea que cuando le das a scroll la imagen se hace mas pequeña o algo así y la verdad es que queda muy bien.

Alguien tiene alguna idea de como hacerlo? Me gustaría implementarlo en mi web y no sé ni como empezar.

2
  • Son imágenes superpuestas junto con un video en mp4. Puedes ver su código fuente haciendo click derecho, especcionar elemento
    – fredyfx
    Commented el 27 dic. 2019 a las 0:05
  • Si, lo acabo de mirar pero veo que lo esta haciendo con un transform o eso es lo que ami me parece. Commented el 27 dic. 2019 a las 9:48

1 respuesta 1

1

espero que te sirva de algo mi información, no tengo idea de cuánto conoces acerca de web pero iré por partes.

La web que mencionas tiene muchos elementos que utilizan sus atributos para dar como resultado el efecto observable.

Por mencionar algunos, el primer elemento que puedo observar que cambia es el de opacidad (opacity), las palabras que tiene el texto tienen ese efecto de desaparecer (pero aún existen), esto se debe a que disminuyen su opacidad (gracias a js). Sin embargo, el efecto que mencionas puedes lograrlo mediante dos tipos de librerías.

La primera que se viene a mi cabeza es AOS, esta librería proporciona una serie de animaciones a los bloques de nuestro html cuando nos situemos en la posición del elemento haciendo scroll. Esa es una buena manera de realizar el efecto observable, sin embargo hay otra forma posible para realizar el efecto que estás buscando y es el de parallax el cual brinda una serie de efectos de profundidad que probablemente también estés buscando.

Parallax es muy popular para dar dinamismo en las páginas.

Desde luego que para utilizar estos js no es necesario contar con muchos conocimientos web, sin embargo sí se requiere algo de paciencia y experiencia manejando el DOM por medio de javascript para calcular en qué momento se haría una transición, calcular detectores en una animación, o incluso para manipular las mismas librerías, etc.

Si aún tienes interés en lograr ese tipo de efecto échale un vistazo a https://www.40defiebre.com/nueva-dimension-web-parallax

1
  • Los he estado mirando un rato tanto el AOS como el Parallax. Me parece que el Parallax será mas fácil de utilizar, voy a probar a ver y te digo. Graciaas Commented el 27 dic. 2019 a las 9:51

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.