html - transicion - ¿Cómo creo un efecto de paralaje sin usar una imagen de fondo?

parallax html5

Question

Estoy tratando de crear un efecto de paralaje sin usar background-image de background-attachment: fixed , como background-attachment: fixed no funciona tan bien en iOS. Esto es lo que se me ocurrió:

HTML

<article class="twentyseventeen-panel">
  <div class="panel-image">
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" >
      <img src="<?php echo esc_url( $thumbnail[0] ); ?>" style="width: 100%;" />
    </div>
  </div>
</article>

CSS

.twentyseventeen-panel {
    overflow: hidden;
    position: relative;
}
.panel-image {
    position: relative;
    height: 100vh;
    max-height: 200px;
}

Ahora estoy atascado en llegar a la imagen para desplazarme para hacer el efecto de paralaje. He intentado configurar la imagen en una posición fixed , pero mi imagen ya no aparece cuando lo hago. ¿Cómo consigo esta imagen para tener un efecto de paralaje?

Answer 1

Desafortunadamente, no conozco ninguna forma segura de usar CSS puro. El motivo es que no hay forma de obtener la posición de desplazamiento actual (que podríamos estar usando en un calc() ). Además, cuando se posiciona un elemento usando fixed , ya no le importa su elemento primario y se vuelve imposible imponer un overflow:hidden .

Hay dos formas de crear un efecto de paralax sin usar el fondo, ya sea haciendo uso de JavaScript, te he dado un ejemplo completo de trabajo. Es mínimo, podría hacer que el navegador funcione demasiado para nada, pero funciona. Seguramente querrá optimizarlo para que solo se aplique a los elementos que son visibles si tiene mucho.

$(document).ready(function() {
  var onScroll = function() {
    var scrollTop = $(this).scrollTop();
    $(''.paralax-image'').each(function(index, elem) {
      var $elem = $(elem);
      $elem.find(''img'').css(''top'', scrollTop - $elem.offset().top);
    });
  };
  onScroll.apply(window);
  $(window).on(''scroll'', onScroll);
});

.content {
  height: 500px;
}

.paralax-image {
  overflow: hidden;
  height: 200px;
  position: relative;
}

.paralax-image img {
  position: absolute;
  height: 100vh;
  min-width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h2>Lorem Ipsum</h2>
  <div class="paralax-image">
    <img src="http://lorempixel.com/400/200">
  </div>


</div>

Ahora para la parte completa de CSS ... Es un poco complejo de implementar y no se puede hacer para todo tipo de diseño. El truco sería tener sus imágenes usando una position:fixed regla position:fixed . Pero en lugar de depender sin éxito del overflow:hidden , los tendrá en el índice z más bajo, tendrá todos sus elementos con un fondo y creará "agujeros" donde desee mostrar la imagen. Esto creará muchos problemas cuando agregue fondos, tendría que crear múltiples elementos diferentes para asegurarse de tener siempre la posibilidad de mostrar la imagen de paralax. He intentado demostrar cómo se podría lograr esto, sin crear un ejemplo demasiado complejo. Esta técnica solo funcionará para 1 imagen. Si desea que funcione con varias imágenes, tendrá que usar javascript para cambiar la visibilidad en consecuencia, y solo se verá 1 efecto de paralax a la vez.

/* Can''t use margins no more... */

h1 {
  margin: 0;
  padding: 0.67em 0;
}

p {
  margin: 0;
  padding: 1em 0 0;
}

body {
  margin: 0;
}

.container>* {
  background-color: white;
}

.paralaxed {
  z-index: -2;
  height: 100vh;
  position: fixed;
  top: 0;
}

.paralax-image {
  background: transparent;
  height: 200px;
}

<div class="container">
  <img class="paralaxed" src="http://lorempixel.com/400/200">
  <h1>My Title here</h1>
  <div class="paralax-image"></div>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
</div>

Answer 2

En realidad, puede crear efectos de paralaje puros de CSS sin la necesidad de background-image background-attachment o background-attachment . Keith Clark tiene un gran escrito y tutorial sobre él . Voy a tomar prestado su código por el ejemplo:

HTML

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

CSS

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}

En realidad, es una solución bastante simple, pero puede tardar un segundo en comprender cómo está sucediendo todo. Lo importante que está sucediendo aquí es la transform: translateZ(-1px) scale(2) , que mueve esa <div> hacia atrás a lo largo del eje z y la redimensiona nuevamente a la normalidad. La configuración del eje z es cómo se controla la velocidad del paralaje. Entonces, translateZ(-1px) es más lento que translateZ(-2px) .

Ahora que el div se ha movido hacia atrás en el eje z, se debe cambiar su tamaño a su tamaño normal. Para hacer eso, simplemente agregue scale a la propiedad de transform . La escala debe calcularse utilizando 1 + (translateZ * -1) / perspective . Entonces, transform: translateZ(-10px) debe ser transform: translateZ(-2px) scale(3) asumiendo que mantienes la perspective establecida en 1px .

Luego, la perspective se cambia a 1px para el contenedor .parallax que establecerá la perspectiva <div> en el centro. La adición de overflow-y: auto permite que el contenido se desplace normalmente, pero los elementos descendientes se representarán en la perspectiva fija.

Como esto solo usa <div> y CSS , debería poder resolver su problema sin JS. Usted puede simplemente colocar sus imágenes dentro de los divs. Esta es una demostración simple que muestra un solo efecto de paralaje <div> . Si observa el código fuente, no verá JavaScript, excepto la parte de Google Analytics. Aquí hay una demo con un montón de secciones diferentes.

Te recomiendo que leas este tutorial , ya que el código debe hacer todo lo que quieras. Además, funciona perfectamente en iOS, Safari, Chrome y FF. Lo he usado varias veces y no puedo recomendar el método lo suficiente. No hace falta decir que tomé prestada gran parte de mi respuesta de ese tutorial, por lo que le doy las gracias a Keith Clark para que lo escriba.

Answer 3

Por alguna razón, esto parece haber funcionado mejor para mí:

https://github.com/deggenschwiler/jquery_parallax

Requiere jQuery en el encabezado de la página:

<html>
<head>
    <style>
      .parallax {
        height: 400px;
        width: 100%;
        background-image: url("SOMEBGIMAGE.jpg");
        background-position-y: 0%;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script>
    $(window).scroll(function() {
          var y = 0;
          var scroll = $(window).scrollTop();
          var win = $(window).height()
          var height = $(".parallax").height();
          var offset = $(".parallax").offset().top;
          y = ((100 * scroll)/(height + win)) + ((100 * (win - offset))/(height + win));
          if (y > 100){y = 100;}
          else if (y < 0){y = 0;}
          var out = String(y) + "%";
          $(".parallax").css("background-position-y", out);
    });
    </script>
</head>
<body>
    <div class="parallax">
    </div>
</body>
</html>