Ответ 1

Я наткнулся на это, пытаясь найти большую гибкость в моей скорости параллакса, которую я создал с помощью чистого CSS, и я просто хочу указать, что все эти люди ошибаются, и это возможно при использовании чистого CSS. также можно лучше контролировать высоту вашего элемента.

Вам, вероятно, придется немного отредактировать свой DOM/HTML, чтобы иметь некоторые элементы контейнера, в вашем случае вы применяете фон к телу, что сильно ограничит вас и не кажется хорошей идеей.

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

Вот как вы управляете высотой с процентными расстояниями в Viewport на основе размера экрана:

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/

Ответ 2

Вы можете использовать что-то простое, как здесь: 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;}

ЯШ:

(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

Ответ 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 + "%";
        });
})();

Ответ 4

Согласитесь, что это невозможно с помощью 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';
}

Ответ 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">

Если вы хотите увидеть пример того, как он выглядит, вы можете посетить эту страницу.

Ответ 6

Я знаю, что уже очень поздно, но я подумал, не будет ли это работать легче, чем приведенные выше коды, и потратил 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>

Ответ 7

Лучший способ сделать это с помощью jQuery. Об этом много сайтов, например:

• jQuery, чтобы создать впечатление медленной прокрутки фона
• http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
• http://callmenick.com/2014/09/08/advanced-parallax-scrolling-effect/