вот мой CSS-код для тела:
body {
padding: 0;
margin: 0;
background-image: url("../images/background.jpg");
background-repeat: no-repeat;
background-color: grey;
background-size: 100%;
}
Я хочу сделать так, чтобы изображение прокручивалось медленнее, чем все остальное на странице, чтобы сделать простой эффект параллакса. Я посмотрел онлайн, и все примеры, которые я видел, намного сложнее, чем я хочу.
Я наткнулся на это, пытаясь найти большую гибкость в моей скорости параллакса, которую я создал с помощью чистого 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/
Вы можете использовать что-то простое, как здесь: 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
Если вы хотите применить высокое фоновое изображение, используйте этот 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 + "%";
});
})();
Согласитесь, что это невозможно с помощью 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';
}Я понимаю, что это старый вопрос, однако я недавно наткнулся на эту проблему и потратил много времени, пытаясь найти лучший рабочий код. Все, что я нашел, было либо слишком сложным, либо не работало без значительных затрат, особенно в 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">
Если вы хотите увидеть пример того, как он выглядит, вы можете посетить эту страницу.
Я знаю, что уже очень поздно, но я подумал, не будет ли это работать легче, чем приведенные выше коды, и потратил 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>Лучший способ сделать это с помощью jQuery. Об этом много сайтов, например: