Problema: efecto de desplazamiento horizontal con Skrollr

Quiero crear una animación horizontal controlada por skrollr. Desplazándome hacia abajo, los elementos de mi página deben moverse de izquierda a derecha de mi contenedor.

Suponiendo que mis elementos tienen el mismo ancho, configuro los datos de desplazamiento del 100% al 0% y funciona.

Pero, ¿y si mis imágenes tienen diferentes anchos? También quiero preservar la animación de opacidad que crea este efecto de fundido de entrada difuminado.

Aquí está el código HTML:

Y el CSS:

 #container { background-color:black; width:500px; height:300px; overflow:hidden; } div { position:fixed; } .bg { width:500px; height:300px; } 

Aquí hay una demostración en Fiddle

Simplemente configure los anchos al 100% y contenga sus imágenes dentro de:

 #container { background-color:black; width:100%; height:300px; overflow:hidden; } div { position:fixed; } .bg { width:100%; height:300px; } 

Aquí hay una demostración en Fiddle

No veo cómo el ancho diferente sería un problema. Puede establecer todo el ancho en 100% y desbordamiento: oculto; o use jQuery para verificar la mejor forma de ajustar la imagen en el contenedor.