background-image
はiOSではうまく機能しないため、background-attachment: fixed
でbackground-attachment: fixed
を使用せずに視差効果を作成しようとしています。ここに私が思いついたものがあります:
<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>
.twentyseventeen-panel {
overflow: hidden;
position: relative;
}
.panel-image {
position: relative;
height: 100vh;
max-height: 200px;
}
今、私は視差効果を行うためにスクロールする画像に到達することに固執しています。画像をfixed
位置に設定しようとしましたが、それを行うと画像が表示されなくなりました。この画像に視差効果を持たせるにはどうすればよいですか?
残念ながら、純粋な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>
background-image
やbackground-attachment
を必要とせずに、純粋なCSS視差効果を実際に作成できます。キース・クラークには素晴らしい それについての記事とチュートリアル があります。例のために彼のコードを借ります:
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
...
</div>
<div class="parallax__layer parallax__layer--base">
...
</div>
</div>
.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でも問題なく動作します。私はそれを何度も使用しましたが、この方法を十分に推奨することはできません。言うまでもなく、私はそのチュートリアルから私の回答の多くを借りたので、すばらしい記事を書いてくれたキース・クラークに小道具を持っています。
何らかの理由で、これは私にとって最もうまくいったようです:
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>