On scroll... Salamanca shown

Una demo jugando con algunas propiedades css ya viejas conocidas, para entre otras cosas ir revelando las imágenes al hacer scroll

On scroll... Salamanca shown

Por Kseso ✎ 5

Otro juego Css. En esta ocasión jugando con la colocación centrada de elementos textuales y el revelado de imágenes al hacer scroll. Imágenes que se mantienen fijas mientras todo a su alrededor sube o baja.

Todas las propiedades presentes ya han sido objeto de explicación y uso en artículos anteriores del blog. También han formado parte de distintas demos y ejemplos.

Disfruta de la demo y las imágenes que en ellas incluyo. Si algún detalle te resulta sorpresivo o no alcanzases a comprender del todo qué hace posible su comportamiento sólo tienes que hacer uso de los comentarios.

On scroll... Salamanca shown

See the Pen On scroll... Salamanca shown by Kseso (@Kseso) on CodePen.

Ver demo a full

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 5

  1. Está muy lindo. Y sospecho que vivís en Salamanca.

    Un detalle : en Firefox se ve perfecto, pero en Chrome se salta imágenes; aunque en Canarý anda bien, por lo que sospecho que si cambio alguna configuración lo podré ver también en el navegador insignia de Google.

    ResponderEliminar
    Respuestas
    1. Me hiciste revisar la demo paso a paso en los dos navegadores que mencionas ya que al realizarla no había advertido ese "salto de imagen" en Chrome.
      Y sigue sin manifestarse.
      Uso Chrome (vi$ta) ver. 38.0.21...
      Esta es la secuencia:
      Texto con header debajo -> se revela header -> patios -> claustros -> Texto con header debajo -> calles -> se revela 60% header tintado -> piedras -> texto con header debajo -> se revela header --> footer

      Un saludo, Furoya.

      Eliminar
    2. Lamento haberte dado trabajo de más. No hacía falta un examen minucioso, el problema era evidente y si no lo veías a la primera, es que no estaba.
      Me quedé pensando si no habrás cambiado alguna configuración que te deja ver el efecto correctamente, pero más bien creo que yo lo veo mal porque aún estoy usando XP. Chrome ya no funciona con XP, por eso estoy usando mucho Firefox. Canary seguramente pronto dejará también de andar en sistemas operativos viejos; es la política de estas empresas, por eso estoy usando mucho Firefox.
      ;)

      De cualquier forma, te dejo una captura, para que veas uno de los d-efectos, que se repite en todo el documento.

      [img]https://picasaweb.google.com/lh/photo/48LN2JSuOncFdaiRWsbr-tMTjNZETYmyPJy0liipFm0?feat=directlink[/img]

      Es solamente como curiosidad, todos sabemos que el código está bien hecho.
      Otro saludo y gracias.

      Eliminar
    3. La ruta estaba mal, a ver si ahora me sale.

      [img]https://lh4.googleusercontent.com/-T3wXvlBZwK8/VFenWXFTyTI/AAAAAAAABP4/IqMbJUkA-go/s800/muestraSalamanca.jpg[/img]

      Eliminar
    4. Ajá! Ahora ya me explico alguna que otra discrepancia en lo observado que hemos tenido anteriormente.
      Sí, esa imagen es todo un poema y un suplicatorio para que cambios de SO :P

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap