web-dev-qa-db-ja.com

背景画像の視差スクロールをスムーズにする

少し調べて、背景を前景とは少し異なるペースでスクロールする単純なjQueryを作成しました。これにより、Webサイトを下にスクロールすると視差効果が生まれます。

残念ながらそれは少しぎこちないです。

HMTLの基本的なレイアウトは次のとおりです。

<body>
    <section>
        Site content goes here.
    </section>
</body>

CSSは次のとおりです。

body {
    background-image: url('../images/bg.png');
    background-repeat: repeat-y;
    background-position: 50% 0;    
}

ここにJSがあります：

$(window).scroll(function () {
    $("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
});

https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/

かなりシンプルですが、パワフルなコンピューターでも、スクロールすると少しぎくしゃくします。

背景の視差をスムーズにアニメーション化する方法はありますか？

jqueryhtmlcsshtml5parallax
10
Chuck Le Butt

CSSに遷移プロパティを追加して、次のようにGPUで高速化できるようにします。

body {
    background-image: url('../images/bg.png');
    background-repeat: repeat-y;
    background-position: 50% 0;    
    transition: 0s linear;
    transition-property: background-position;
}
12
mcmonkeys1

プロパティをサポートするブラウザでハードウェアアクセラレーションを使用できるプロパティをアニメーション化してみてください。 background-positionプロパティを変更するのではなく、絶対配置のimgを使用し、CSS変換を使用してその位置を変更します。

stellar.js を見てください。このプラグインは、対応するブラウザーでCSS変換を使用してアニメーション化するオプションを提供します（stellar.jsを使用すると、背景画像をアニメーション化できますが、モバイルデバイスではスムーズに機能しないことに注意してください）。 requestAnimationFrame も使用します。これは、CPU、GPU、メモリの使用量が少ないことを意味します。

プラグインが過剰だと思われる場合は、少なくとも採用されているアプローチを確認して、ニーズに合わせることができます。

7
CherryFlavourPez

ボディのCSSを以下のように設定します：

body {
  background-image: url(images/bg.jpg); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;
 }

次に、JavaScriptを使用して、ページスクロール時にpageYOffsetを取得し、以下のように本文の背景画像の背景位置に設定します。

window.addEventListener('scroll', doParallax);
function doParallax(){
   var positionY = window.pageYOffset/2;
   document.body.style.backgroundPosition = "0 -" + positionY + "px";
}

ここで私の投稿をチェックアウトしてください： http://learnjavascripteasily.blogspot.in/

3
Shwetha

<img>が機能しなくなったり、widthが親よりも大きいなどの理由により、div内でborder-radius要素を使用できない場合があります。私はこれらすべての問題に直面しており、私が見つけた最良の解決策は次のものを使用することでした：

transition: 0.5s ease;
transform: translate3d(0, 0, 0);

GPUを使用して、本当にスムーズでスムーズな視差効果を得ました。

2
tuliomarchetto

スムーズにするには、別のdivに画像を配置し、transform：translateを使用して要素全体を移動します。そうすると、本当にスムーズな結果が得られます。

これは、少し異なることを行う小さな例ですが、変換を使用してアイデアを提供します。

HTML：

<div id="wrapper">
     <div id="content">Foreground content</div>
</div>

CSS：

@-webkit-keyframes MOVE-BG {
    0% {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
    50% { 
        transform: translate(-250px, 0%);
        -webkit-transform: translate(-250px, 0%);
    }
    100% {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
}

#wrapper {
    width: 300px;
    height: 368px;
    overflow: hidden;  
}
#content {
    width: 550px;
    height: 368px;
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    text-align: center;
    font-size: 26px;
    color: #000;

    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

そしてフィドル： http://jsfiddle.net/piotku/kbqsLjfL/

javaScript内から（jQueryを使用）、次のようなものを使用する必要があります。

$(".element").css("transform", 'translateY(' + ($(this).scrollTop() / 2) + 'px)');

またはvanillaJS：

backgroundElement.style.transform = 'translateY(' + ($(this).scrollTop() / 2) + 'px)';
1
Picard

.cssを.animateに変更してみてください。 CSSをハード値に設定する代わりに、アニメーション化できます。

$(window).scroll(function () {
    $("body").animate({"background-position":"50% " + ($(this).scrollTop() / 2) + "px"},{queue:false, duration:500});
});

注意：スクリプトを追加 http://snook.ca/technical/jquery-bg/jquery.bgpos.js

テストしていないことを覚えておいてください。動作するかどうかをお知らせください。

背景画像のアニメーション： http://snook.ca/archives/javascript/jquery-bg-image-animations

デモ： http://snook.ca/technical/jquery-bg/

0
Marc Uberstein