（CSS）背景画像のスクロールを他のものより遅くする
ここに本文の私の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/
画面サイズに基づいてビューポートの割合の長さで高さを制御する方法は次のとおりです。
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;}
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;
});
};
})();
高い背景画像を適用する場合は、次の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 + "%";
});
})();
私はこれが非常に遅いことを知っていますが、上記のコードよりも簡単に動作しないのではないかと思い、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>これは古い質問であることに気づきましたが、最近この問題に出くわし、最適なコードを見つけるために多くの時間を費やしました。私が見つけたものはすべて、特に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">
表示例をご覧になりたい場合は、 このページ にアクセスしてください。
画像とドキュメントの高さの比率を計算する必要があるため、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';
}画像とドキュメントで実際に何が起こっているのか、例と視覚的な説明とともにそれをここで見つけることができます：