traer - poner un elemento encima de otro css

(CSS) Hacer un desplazamiento de imagen de fondo más lento que todo lo demás

Question

Aquí está mi código CSS para el cuerpo:

body {
  padding: 0;
  margin: 0;
  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-color: grey; 
  background-size: 100%;
}

Lo que quiero hacer es hacer que la imagen se desplace más lentamente que todo lo demás en la página para hacer un simple efecto de paralaje. He mirado en línea y todos los ejemplos que he visto son mucho más complicados de lo que quiero.

Answer 1

De acuerdo en que no es posible solo con css, porque tiene que calcular la relación de altura de la imagen y del documento. También me gusta este efecto, por eso creó una función simple que hace precisamente eso. Aquí está la función y su llamada en el evento de desplazamiento:

$(window).on(''scroll'', function() {
 smoothBackgroundScroll("relative/image/url");
});

function smoothBackgroundScroll(imgsrc) {
 function loadImageHeight(url, width) {
  var img = new Image();
  img.src = url;
  if (width) {
   img.width = width;
  }
  return img.height;
 }

 var dh, wh, ih, st, posy, backh, backw;
 if (!this._smoothBackgroundScroll) {
  var bcksize = $(document.body).css(''background-size'');
  var bmatch = /(/w+)/s*(/w+)/.exec(bcksize);
  if (!bmatch || bmatch.length < 3) {
   backh = loadImageHeight(imgsrc)
  } else {
   backh = parseInt(bmatch[2]);
   if (isNaN(backh)) {
    backw = parseInt(bmatch[1]);
    backh = loadImageHeight(imgsrc, parseInt(backw));
   }
  }
  this._smoothBackgroundScroll = {
   dh: $(document).height()
   , wh: $(window).height()
   , ih: backh
  }
 }
 dh = this._smoothBackgroundScroll.dh;
 wh = this._smoothBackgroundScroll.wh
 ih = this._smoothBackgroundScroll.ih;
 st = $(document).scrollTop();
 posy = (dh - ih) * st / (dh - wh);
 document.body.style.backgroundPosition = ''center '' + posy + ''px'';
}

Puede encontrarlo aquí junto con ejemplos y explicaciones visuales de lo que realmente está sucediendo con la imagen y el documento:

Desplazamiento de imagen de fondo suave

Answer 2

La mejor manera es hacerlo con jQuery. Hay muchos sitios sobre esto, por ejemplo:

• jQuery para dar una impresión de fondo de desplazamiento más lento
• http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
• http://callmenick.com/2014/09/08/advanced-parallax-scrolling-effect/

Answer 3

Me doy cuenta de que esta es una vieja pregunta; sin embargo, recientemente me topé con este problema y pasé mucho tiempo tratando de encontrar el mejor código de trabajo. Todo lo que encontré era demasiado complicado o no funcionó sin demorarme mucho, especialmente en Chrome. Como han señalado otros, el problema no se puede resolver mediante CSS puro, pero hice mi propia directiva simple de AngularJS para resolver el problema:

app.directive("paraBack", [''$window'', function ($window) {
  return function(scope, element, attrs) {
    element.css("background-image", "url("+attrs.paraBack+")"); // Apply the background image with CSS
    element.css("background-attachment", "fixed"); // Disable background scrolling

    var max = Infinity;

    var image = new Image(); // Create a JavaScript image so that the code below can be run when the background is loaded
    image.src = attrs.paraBack;
    image.onload = function () {
      max = image.height - window.innerHeight; // Stop scrolling after the bottom of the picture is reached
      var xOffset = -(image.width/2-window.innerWidth/2);
      element.css("background-position-x", xOffset+''px''); // Horizontally align the background
    }

    var scrollHandler = function () {
      var offset = Math.floor(this.pageYOffset*0.1); // Set background to scroll at 10% of scrolling speed
      if (offset<max) {
        element.css(''background-position-y'', ''-''+offset+''px''); // If not the bottom of the image is reached, move the background (scroll)
      }
    };

    angular.element($window).on(''scroll'', scrollHandler); // Set the defined scrollHandler function to be ran when user scroll

    scope.$on(''$destroy'', function () {
      angular.element($window).off(''scroll'', scrollHandler); // Unbind the function when the scope is destroyed
    });
  };
}]);

Se puede usar en el html así:

<body para-back="url/to/image">

Si desea ver un ejemplo de cómo se ve, puede visitar esta página .

Answer 4

Me topé con esto buscando más flexibilidad en la velocidad de paralaje que he creado con CSS puro y solo quiero señalar que todas estas personas están equivocadas y que es posible con CSS puro. También es posible controlar la altura de su elemento. mejor.

Probablemente tendrá que editar su DOM / HTML un poco para tener algunos elementos de contenedor, en su caso, está aplicando el fondo al cuerpo que lo restringirá mucho y no parece una buena idea.

http://keithclark.co.uk/articles/pure-css-parallax-websites/

Aquí es cómo controla la altura con longitudes de porcentaje de vista en función del tamaño de la pantalla:

https://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

  .forefront-element {
    -webkit-transform: translateZ(999px) scale(.7);
    transform: translateZ(999px) scale(.7);
    z-index: 1;
  }

  .base-element {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .background-element {
    -webkit-transform: translateZ(-999px) scale(2);
    transform: translateZ(-999px) scale(2);
    z-index: 3;
  }

La velocidad de la capa se controla mediante una combinación de la perspectiva y los valores de conversión Z. Los elementos con valores Z negativos se desplazarán más lentamente que aquellos con un valor positivo. Cuanto más lejos esté el valor de 0, más pronunciado será el efecto de paralaje (es decir, translateZ (-10px) se desplazará más lentamente que translateZ (-1px)).

Aquí hay una demostración que encontré con una búsqueda en Google porque sé que hay muchos no creyentes, nunca digas imposible:

http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Answer 5

Puedes usar algo simple como aquí: html:

Movimiento

css:

body {

  min-height:4000px;
  background-image: url("http://www.socialgalleryplugin.com/wp-content/uploads/2012/12/social-gallery-example-source-unknown-025.jpg");
}

h1 {margin-top:300px;}

js

(function(){

  var parallax = document.querySelectorAll("body"),
      speed = 0.5;

  window.onscroll = function(){
    [].slice.call(parallax).forEach(function(el,i){

      var windowYOffset = window.pageYOffset,
          elBackgrounPos = "50% " + (windowYOffset * speed) + "px";

      el.style.backgroundPosition = elBackgrounPos;

    });
  };

})();

Aquí está jsfiddle

Answer 6

Si desea aplicar una imagen de fondo alta, use este JS:

(function () {
        var body = document.body,
                e = document.documentElement,
                scrollPercent;
        $(window).unbind("scroll").scroll(function () {
            scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
            body.style.backgroundPosition = "0px " + scrollPercent + "%";
        });
})();