Buscar un código

En este código podás ver cómo hacer una página web que tiene un efecto PARALLAX solo con HTML y CSS.

Mover objetos, texto, imágenes, etc. con la barra de scroll. Utilizado también para efectos como Parallax.
Un evento invoca la función JavaScript encargada de hacer los efectos. La posición del scroll con respecto al Top, determina la posición de un DIV. Una división matemática, ralentiza el movimiento con respecto al fondo. Hay más opciones posibles...


Espero sea útil.

Un saludo

En este ejemplo, se mueve una imagen de derecha a izquierda a medida que va bajando el scroll de la pagina.

Una combinación de efectos Parallax y Reveal para presentar todos los contenidos desplazando la barra de Scroll. No utiliza JavaScript.

La estructura es HTML y CSS adaptable, compatible con cualquier pantalla y/o dispositivo.

Espero sea útil.

Un Saludo

Lejos de lo que hay por ahí basado en librerías de 80 - 200kb. este Parallax utiliza 4 - 6 líneas de código javascript nativo, el que interpreta cualquier navegador web. En el 99.9 de los casos, NO es necesario el uso de frameworks para nuestros proyectos. Decimos que se eternizan los renderizados de contenidos, es cierto. Un buen proyecto desde cero, bien estructurado, puede ser un 90% más ágil y original que utilizando plantillas y marcos de trabajo cargados de código inútil. ¡La Imaginación es el límite!. Aprender es un placer, siempre.

bueno esta web esta diseñada con etellar j.s para un efecto parallax, hay un error en la previsualización de imágenes esta un poco desordenado pero la idea es si alguien me puede ayudar a corregirlo si de alguna manera les sirve el código esta bien por mi si lo usan y lo corrigen agradecería que me mostraran los errores supongo deben ser un poco mas de los normales no olviden que aun soy un aficionado.

Este es un simple ejemplo, en el que se visualiza la imagen de fondo como va subiendo lentamente a medida que vamos bajando el scroll de nuestra pagina.

Basado en CSS, sin más, he aquí un efecto muy utilizado en los Sitios Web actuales.
Nada de librerías, nada frameworks, nada de bootstrap... Adaptable y compatible, Con escasos 2Kb. es posible.

¡Dale al Scroll y a la Imaginación!. Construye tu Sitio desde cero...


Un saludo

Una Web 2.0 basada en HTML y CSS compatible.

Un efecto Parallax y Reveal para presentar todos los contenidos desplazando la barra de Scroll.
La estructura es ampliable, adaptable, compatible con cualquier pantalla y/o dispositivo.
La respuesta del Sitio es ágil y rápida con imágenes optimizadas.

Un Saludo