(CSS) 使背景图片滚动速度比其他任何东西都慢

Question

这是我的 CSS 正文代码：

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

我想做的是使图像滚动速度比页面上的其他所有内容都慢，以产生简单的视差效果。我在网上看过，我看到的所有例子都比我想要的要复杂得多。

Answer 1

最好的方法是使用 jQuery。有很多关于这个的网站，例如：

jQuery to give impression of background scrolling slower
http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
http://callmenick.com/2014/09/08/advanced-parallax-scrolling-effect/

Answer 2

同意仅使用 css 是不可能的，因为您必须计算图像和文档的高度比。我也喜欢这种效果，这就是为什么创建简单的函数来做到这一点。这是函数及其对滚动事件的调用：

$(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';
}

您可以在此处找到它以及示例和视觉解释图像和文档的真实情况：

Smooth background image scrolling

Answer 3

如果你想应用高背景图片，使用这个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 + "%";
        });
})();

Answer 4

我偶然发现了这个问题，希望在我用纯 CSS 创建的视差速度中寻找更大的灵活性，我只想指出所有 这些人都错了，这是可能的用 pure CSS 也可以更好地控制你的元素的高度。

您可能需要稍微编辑一下 DOM/HTML 以包含一些容器元素，在您的情况下，您正在将背景应用到正文，这会限制您很多，而且看起来不太好主意。

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

以下是根据屏幕尺寸使用视口百分比长度控制高度的方法：

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;
  }

图层速度由透视和 Z 平移值的组合控制。具有负 Z 值的元素将比具有正值的元素滚动得更慢。该值离 0 越远，视差效果越明显（即 translateZ(-10px) 将比 translateZ(-1px) 滚动得慢）。

这是我通过 google 搜索找到的一个演示，因为我知道那里有很多非信徒，永远不要说不可能：

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

Answer 5

我意识到这是一个老问题，但是，我最近自己偶然发现了这个问题并花了很多时间试图找到最好的工作代码。我发现的所有内容要么太复杂，要么在不滞后的情况下无法正常工作，尤其是在 Chrome 中。正如其他人指出的那样，问题无法通过纯 CSS 解决，但我自己制作了简单的 AngularJS 指令来解决问题：

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
    });
  };
}]);

它可以像这样在html中使用：

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

如果您想查看其外观示例，可以访问 this page。

Answer 6

你可以使用像这里这样简单的东西： html:

运动

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;

    });
  };

})();

这里是jsfiddle

Answer 7

我知道这已经很晚了，但我想知道它是否比上面的代码更容易工作，并投入了 15 分钟的时间。
这是我的代码：

document.getElementById("body").onscroll = function myFunction() {  
    var scrolltotop = document.scrollingElement.scrollTop;
    var target = document.getElementById("main1");
    var xvalue = "center";
    var factor = 0.5;
    var yvalue = scrolltotop * factor;
    target.style.backgroundPosition = xvalue + " " + yvalue + "px";
  }

#main1 {
    background-image: url(https://images.unsplash.com/photo-1506104489822-562ca25152fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9);
    background-position: top center;
    background-attachment:scroll;
    background-size: cover;
    height: 80vh;
    width: 100%;
}
#placeholdersoyoucanscroll{
    height:100vh
}

<body id="body">
      <main>
        <div id="main1">
        </div>
        <div id="placeholdersoyoucanscroll">
        </div>
    </main>
</body>

Answer 8

我也在寻找一种现代且直观的方法来调整我的背景滚动速度。您应该尝试 Simple Parallax Scrolling jQuery Plug-in，灵感来自 Spotify.com。

一旦将其附加到您的项目，连同一个大图像一起玩，这就是设置它的众多方法之一。

The HTML | setup your containers and basic parallax attributes on element.

<main>
<section>Some Content Above it</section>
 <div class="parallax-container" data-parallax="scroll" data-position="top" style="height: 80vh;"></div>
<section>Some Content Below it</section>
</main>

The jQuery | Here, you can play with additional parameters based on the docs

function parallaxjs() {
    $('.parallax-container').parallax({
        imageSrc: '/<path-to-your-image>/<your-big-image>.jpg',
        naturalWidth: 1071, //your image width value
        naturalHeight: 500, //your image height value
        bleed: 0,
    });
}

(function () {
  parallaxjs();
})($);

(CSS) 使背景图片滚动速度比其他任何东西都慢

(CSS) Make a background image scroll slower than everything else

css

background

effect

parallax

运动