¿El lazy load funciona para todo el contenido web?

chita · 5 Abr 2022

Buenas, que tal! Quiero que todo el contenido de mi web vaya apareciendo al scrollear. Eso sería lazy load?

Me refiero a algo como esta web: https://clinicacastelo.com/

YeltsinReyes · 5 Abr 2022

chita dijo:
Buenas, que tal! Quiero que todo el contenido de mi web vaya apareciendo al scrollear. Eso sería lazy load?

Seguro lo que quieres es algo como esto https://michalsnik.github.io/aos/

Alfredo Ramos · 5 Abr 2022

Si te refieres a loading=lazy, también puede aplicarse a <iframe>, como videos de servicios como YouTube, Vimeo, etc.

Lazy-load es una técnica que puede aplicarse a una gran cantidad de contenido, dependiendo de la tecnología que uses.

chita · 5 Abr 2022

YeltsinReyes dijo:
Seguro lo que quieres es algo como esto https://michalsnik.github.io/aos/

Alfredo Ramos dijo:
Si te refieres a loading=lazy, también puede aplicarse a <iframe>, como videos de servicios como YouTube, Vimeo, etc.

Lo que necesito es algo como lo de esta web, no necesariamente con las animaciones, solo que aparezca el contenido a medida que scrollea el usuraio. https://www.dentistasmadridcentro.com/.
Sería lazy load?

Alfredo Ramos · 5 Abr 2022

chita dijo:
Lo que necesito es algo como lo de esta web, no necesariamente con las animaciones, solo que aparezca el contenido a medida que scrollea el usuraio. https://www.dentistasmadridcentro.com/.
Sería lazy load?

Ese sitio en específico no parece estar usando lazy-load.

Lazy-load en web permite cargar, por ejemplo, imágenes únicamente cuando sea visible en el viewport, esto ahorra ancho de banda y tiempo de carga en páginas con mucho contenido multimedia.

Lo que hace el sitio que compartes, es simplemente mostrar una animación para mostrar el contenido.

Hay bibliotecas JavaScript para ello, por ejemplo yo usé esta hace algún tiempo, aunque por lo visto ya no está en desarrollo.

GitHub - jlmakes/scrollreveal: Animate elements as they scroll into view.

Animate elements as they scroll into view. Contribute to jlmakes/scrollreveal development by creating an account on GitHub.

github.com

Aquí puedes verlo en acción: https://scrollrevealjs.org/

EDITO:

Revisando su código fuente, simplemente está usando transiciones CSS.

chita · 5 Abr 2022

Alfredo Ramos dijo:
Ese sitio en específico no parece estar usando lazy-load.

Lazy-load en web permite cargar, por ejemplo, imágenes únicamente cuando sea visible en el viewport, esto ahorra ancho de banda y tiempo de carga en páginas con mucho contenido multimedia.

Lo que hace el sitio que compartes, es simplemente mostrar una animación para mostrar el contenido.

Hay bibliotecas JavaScript para ello, por ejemplo yo usé esta hace algún tiempo, aunque por lo visto ya no está en desarrollo.

GitHub - jlmakes/scrollreveal: Animate elements as they scroll into view.

Animate elements as they scroll into view. Contribute to jlmakes/scrollreveal development by creating an account on GitHub.

github.com

Aquí puedes verlo en acción: https://scrollrevealjs.org/

EDITO:

Revisando su código fuente, simplemente está usando transiciones CSS.

Ok gracias broder por la info! Y por último. Para averiguar como hacerlo cómo podría buscar en en Internet para encontrar lo que busco?

leit0s · 5 Abr 2022

chita dijo:
Buenas, que tal! Quiero que todo el contenido de mi web vaya apareciendo al scrollear. Eso sería lazy load?

Si es un tema visual puedes usar varios métodos según tu requerimiento, en lo que respecta a lazy-load ya es netamente funcional y si es aplicable a todos los elementos, claro esta que para cada uno tiene sus formas o sintaxis.

Alfredo Ramos · 5 Abr 2022

chita dijo:
Ok gracias broder por la info! Y por último. Para averiguar como hacerlo cómo podría buscar en en Internet para encontrar lo que busco?

Puedes buscarlo como "animaciones y transiciones CSS3".

O directamente en la documentación:

La web que compartes usa, transform: scale(), transform: translateY(), entre otras.

Buscando en inglés suele haber más información.

¿El lazy load funciona para todo el contenido web?

chita

YeltsinReyes

Alfredo Ramos

chita

Alfredo Ramos

GitHub - jlmakes/scrollreveal: Animate elements as they scroll into view.

chita

GitHub - jlmakes/scrollreveal: Animate elements as they scroll into view.

leit0s

Alfredo Ramos

Temas similares

Privacidad y transparencia

Privacidad y transparencia