web-dev-qa-db-ja.com

背景画像を使用せずに視差効果を作成するにはどうすればよいですか？

background-imageはiOSではうまく機能しないため、background-attachment: fixedでbackground-attachment: fixedを使用せずに視差効果を作成しようとしています。ここに私が思いついたものがあります：

HTML

<article class="twentyseventeen-panel">
  <div class="panel-image">
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" >
      <img src="<?php echo esc_url( $thumbnail[0] ); ?>" style="width: 100%;" />
    </div>
  </div>
</article>

CSS

.twentyseventeen-panel {
    overflow: hidden;
    position: relative;
}
.panel-image {
    position: relative;
    height: 100vh;
    max-height: 200px;
}

今、私は視差効果を行うためにスクロールする画像に到達することに固執しています。画像をfixed位置に設定しようとしましたが、それを行うと画像が表示されなくなりました。この画像に視差効果を持たせるにはどうすればよいですか？

htmlcssparallax
18
user979331

残念ながら、純粋なCSSを使用した確実な方法はわかりません。その理由は、現在のスクロール位置を取得する方法がないためです（calc()で使用できます）。また、fixedを使用して要素を配置すると、その親を気にしなくなり、overflow:hiddenを強制できなくなります。

バックグラウンドを使用せずにパララックス効果を作成する方法は2つあります。JavaScriptを使用するか、完全な実例を示します。それは最小限であり、ブラウザは何の役にも立たないかもしれませんが、動作します。たくさんある場合に表示される要素にのみ適用されるように最適化することは確かです。

$(document).ready(function() {
  var onScroll = function() {
    var scrollTop = $(this).scrollTop();
    $('.paralax-image').each(function(index, elem) {
      var $elem = $(elem);
      $elem.find('img').css('top', scrollTop - $elem.offset().top);
    });
  };
  onScroll.apply(window);
  $(window).on('scroll', onScroll);
});
.content {
  height: 500px;
}

.paralax-image {
  overflow: hidden;
  height: 200px;
  position: relative;
}

.paralax-image img {
  position: absolute;
  height: 100vh;
  min-width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h2>Lorem Ipsum</h2>
  <div class="paralax-image">
    <img src="http://lorempixel.com/400/200">
  </div>


</div>

次に、CSSの完全な部分について...実装するのは少し複雑であり、あらゆる種類のレイアウトに対して行うことはできません。トリックは、position:fixedルールを使用して画像を作成することです。しかし、overflow:hiddenに頼るのに失敗する代わりに、それらを最も低いz-indexにし、すべての要素に背景を持たせ、画像を表示したい「穴」を作成します。これにより、背景を追加するときに多くの問題が発生します。複数の異なる要素を作成して、常に視差画像を表示できるようにする必要があります。複雑すぎる例を作成することなく、これをどのように達成できるかを実証しようとしました。この手法は1つの画像に対してのみ機能します。複数の画像で動作させたい場合は、javascriptを使用してそれに応じて可視性を切り替える必要があり、一度に表示されるパララックス効果は1つだけです。

/* Can't use margins no more... */

h1 {
  margin: 0;
  padding: 0.67em 0;
}

p {
  margin: 0;
  padding: 1em 0 0;
}

body {
  margin: 0;
}

.container>* {
  background-color: white;
}

.paralaxed {
  z-index: -2;
  height: 100vh;
  position: fixed;
  top: 0;
}

.paralax-image {
  background: transparent;
  height: 200px;
}
<div class="container">
  <img class="paralaxed" src="http://lorempixel.com/400/200">
  <h1>My Title here</h1>
  <div class="paralax-image"></div>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
</div>
10
Salketer

background-imageやbackground-attachmentを必要とせずに、純粋なCSS視差効果を実際に作成できます。キース・クラークには素晴らしい それについての記事とチュートリアル があります。例のために彼のコードを借ります：

HTML

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

CSS

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}

実際には非常に簡単な解決策ですが、それがどのように起こっているかを把握するのに少し時間がかかる場合があります。ここで行われている大きなことはtransform: translateZ(-1px) scale(2)で、<div>をz軸に沿って移動し、サイズを通常に戻します。 z軸の設定は、視差の速度を制御する方法です。したがって、translateZ(-1px)はtranslateZ(-2px)よりも低速です。

Divがz軸に戻されたため、通常のサイズに戻す必要があります。そのためには、scaleプロパティにtransformを追加するだけです。スケールは、1 + (translateZ * -1) / perspectiveを使用して計算する必要があります。したがって、perspectiveを1pxに設定したままにしておくと、transform: translateZ(-10px)はtransform: translateZ(-2px) scale(3)になります。

次に、1pxコンテナーのperspectiveが.parallaxに変更され、<div>パースペクティブが中央に設定されます。 overflow-y: autoを追加すると、コンテンツは正常にスクロールできますが、子孫要素は固定パースペクティブにレンダリングされます。

これは<div>と[〜＃〜] css [〜＃〜]を使用するだけなので、JSなしで問題を解決できるはずです。 div内に画像を簡単に配置できます。これは、単一の<div>視差効果を示す 単純なデモ です。ソースコードを見ると、Googleアナリティクスの部分を除いてJavaScriptは表示されません。 デモはこちら さまざまなセクションがあります。

このチュートリアル を読むことをお勧めします。コードは必要なことをすべて実行する必要があるからです。さらに、iOS、Safari、Chrome、およびFFでも問題なく動作します。私はそれを何度も使用しましたが、この方法を十分に推奨することはできません。言うまでもなく、私はそのチュートリアルから私の回答の多くを借りたので、すばらしい記事を書いてくれたキース・クラークに小道具を持っています。

4
Matthew Beckman

何らかの理由で、これは私にとって最もうまくいったようです：

https://github.com/deggenschwiler/jquery_parallax

ページのヘッダーにjQueryが必要です。

<html>
<head>
    <style>
      .parallax {
        height: 400px;
        width: 100%;
        background-image: url("SOMEBGIMAGE.jpg");
        background-position-y: 0%;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script>
    $(window).scroll(function() {
          var y = 0;
          var scroll = $(window).scrollTop();
          var win = $(window).height()
          var height = $(".parallax").height();
          var offset = $(".parallax").offset().top;
          y = ((100 * scroll)/(height + win)) + ((100 * (win - offset))/(height + win));
          if (y > 100){y = 100;}
          else if (y < 0){y = 0;}
          var out = String(y) + "%";
          $(".parallax").css("background-position-y", out);
    });
    </script>
</head>
<body>
    <div class="parallax">
    </div>
</body>
</html>
0
Deggen