パララックス
ドキュメントのスクロール位置に応じてCSSプロパティをアニメーション化します。
使い方
このコンポーネントを適用するには、任意の要素にuk-parallax属性を追加します。対応するCSSプロパティをアニメーション化するには、次のオプションのいずれかを使用します。
| オプション | 説明 | 値 | 開始値 |
|---|---|---|---|
x |
translateXをアニメーション化します。 | 長さ | 0 |
y |
translateYをアニメーション化します。 | 長さ | 0 |
bgy |
背景のY位置をアニメーション化します。 | 長さ | 初期 |
bgx |
背景のX位置をアニメーション化します。 | 長さ | 初期 |
rotate |
時計回りの回転をアニメーション化します。 | deg |
0 |
scale |
スケーリングをアニメーション化します。 | 数値、長さ | 1 |
color |
色をアニメーション化します | 色 | 初期 |
background-color |
背景色をアニメーション化します | 色 | 初期 |
border-color |
ボーダー色をアニメーション化します | 色 | 初期 |
opacity |
不透明度をアニメーション化します。 | 数値 | 初期 |
blur |
ブラーフィルターをアニメーション化します。 | px |
0 |
hue |
色相回転フィルターをアニメーション化します。 | deg |
0 |
grayscale |
グレースケールフィルターをアニメーション化します。 | % |
0 |
invert |
反転フィルターをアニメーション化します。 | % |
0 |
saturate |
彩度フィルターをアニメーション化します。 | % |
0 |
sepia |
セピアフィルターをアニメーション化します。 | % |
0 |
stroke |
SVG画像内のストロークをアニメーション化します。 | 0 |
長さの値には、px、%、vw、およびvh単位を使用できます。ピクセル単位は省略できます。たとえば、x: 200はx: 200pxと同じです。基本的な算術演算子+と-もサポートされています。
オプションの1つを設定して、アニメーションの停止を作成します。プロパティは、開始値から定義された停止値までアニメーション化されます。
<div uk-parallax="bgy: -200">…</div>見出し
<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('images/dark.jpg');"> <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1> </div>
開始と停止
カスタムの開始値を設定するには、コンマで区切られた2つの値を使用して、別のアニメーション停止を作成します。
<div uk-parallax="opacity: 0,1">…</div>見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');"> <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical"> <h1 uk-parallax="opacity: 0,1; y: -100,0; scale: 2,1; end: 50vh + 50%;">Headline</h1> <p uk-parallax="opacity: 0,1; y: 100,0; scale: 0.5,1; end: 50vh + 50%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>
複数の停止
プロパティのアニメーションをより適切に制御するために、アニメーションシーケンスに沿って中間停止を設定できます。コンマ区切りの値のリストを使用するだけです。アニメーションは、停止間で均等に分散されます。
<div uk-parallax="x: 0,50,150">…</div>見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');"> <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical"> <h1 uk-parallax="opacity: 0,1,1; y: -100,0,0; x: 100,100,0; scale: 2,1,1; end: 50vh + 50%;">Headline</h1> <p uk-parallax="opacity: 0,1,1; y: 100,0,0; x: -100,-100,0; scale: 0.5,1,1; end: 50vh + 50%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>
停止位置
オプションの停止位置を設定して、停止が発生するアニメーションシーケンスに沿ったパーセンテージを指定します。
<div uk-parallax="x: 0,50 10%,150 50%">…</div>見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');"> <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical"> <h1 uk-parallax="opacity: 0,1,1; y: -100,0,0; x: 100,100,0; scale: 2,1,1; end: 50vh + 50%;">Headline</h1> <p uk-parallax="opacity: 0,1,1; y: 100,0,0; x: -100,-100,0; scale: 0.5,1,1; end: 50vh + 50%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>
ネスト
異なるパララックスアニメーションを簡単にネストできます。
<div uk-parallax="bgx: -50">
<div uk-parallax="x: -100, 100">…</div>
</div>見出し
<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('images/dark.jpg');"> <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="y: 100,0">Headline</h1> </div>
ターゲット
アニメーションは、ビューポート内の要素の位置に応じて開始および停止します。別の要素のビューポートの可視性に基づいてアニメーションを開始および停止するには、targetオプションを使用します。これは、ネストされたアニメーションを使用する場合に役立ちます。
<div id="target">
<div uk-parallax="target: #target">…</div>
</div>見出し
<div id="test-target" class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('images/dark.jpg');"> <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-target; y: 100,0">Headline</h1> </div>
開始と終了
アニメーションの継続時間を調整するには、startオプションとendオプションを設定します。startオプションは、アニメーションがいつ開始するかを定義します。デフォルト値の0は、ターゲットの上部境界線とビューポートの下部境界線が交差することを意味します。endオプションは、アニメーションがいつ終了するかを定義します。デフォルト値の0は、ターゲットの下部境界線とビューポートの上部境界線が交差することを意味します。値は、vh、%、およびpxの任意の次元単位で設定できます。%単位は、ターゲットの高さに関連します。どちらのオプションも、基本的な算術演算子である+と-を許可します。
<div uk-parallax="start: 100%; end: 100%;">…</div>
<div uk-parallax="start: 30vh; end: 30vh;">…</div>
<div uk-parallax="start: 100% + 100; end: 100% + 100;">…</div>- 0 / 0100% / 100%30vh / 30vh100% + 100 / 100% + 100
<div id="test-start-end" class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');"> <div class="uk-grid uk-margin-auto uk-flex-inline"> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; y: 398; easing: 0;">0 / 0</div></div> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100%; end: 100%; y: 398; easing: 0;">100% / 100%</div></div> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 30vh; end: 30vh; y: 398; easing: 0;">30vh / 30vh</div></div> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 100; end: 100% + 100; y: 398; easing: 0;">100% + 100 / 100% + 100</div></div> </div> </div>
イージング
アニメーションのイージングを調整するには、easingオプションを追加します。0は均一な速度で遷移します。負の値は、完了するまで速度が低下するまで高速で開始し、正の値は、完了するまで速度がゆっくりと上昇し始めます。
- -2-1-0.500.512
<div id="test-easing" class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');"> <div class="uk-grid uk-margin-auto uk-margin-auto-vertical uk-flex-inline"> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -2">-2</div></div> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -1">-1</div></div> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -0.5">-0.5</div></div> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 0">0</div></div> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 0.5">0.5</div></div> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 1">1</div></div> <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 2">2</div></div> </div> </div>
色
たとえば、境界線、背景、またはテキストの色など、ある色から別の色への遷移。rgb()定義、色のキーワード、または16進数値を使用して色を定義します。
<div uk-parallax="border-color: #00f,#f00">…</div>見出し
<div id="test-color" class="test-color uk-height-large uk-overflow-hidden uk-flex" uk-parallax="start: 100%; end: 100%; background-color: yellow,white; border-color: #00f,#f00;" style="border: 10px solid #000;"> <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-target; start: 100%; end: 100%; color: #0f0;">Headline</h1> </div>
フィルター
CSSフィルターは、ページ上の任意の要素にグラフィック効果を追加する簡単な方法です。一部のブラウザーではまだ実験的な機能ですが、ユーザビリティが低下しない限り安全に使用できます。パララックスコンポーネントを使用すると、要素のフィルターの量を動的に変更できます。
<div uk-parallax="blur: 10; sepia: 100;">…</div>見出し
<div id="test-filter" class="uk-height-large uk-background-cover uk-overflow-hidden uk-flex" uk-parallax="start: 100%; end: 100%; sepia: 100;" style="background-image: url('images/light.jpg');"> <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-filter; start: 100%; end: 100%; blur: 0,10;">Headline</h1> </div>
SVGストローク
パララックスコンポーネントを使用して、SVGストロークをアニメーション化できます。エフェクトは、SVGストロークが目の前で描画されているように見えます。SVGイメージは、インラインSVGとしてマークアップに挿入する必要があります。これは、手動で、またはSVGコンポーネントを使用して行うことができます。SVGコンポーネントは、画像要素の後にSVGを挿入するため、uk-parallax属性を親要素に追加する必要があります。
<div uk-parallax="stroke: 45">
<img src="" width="" height="" alt="" uk-svg>
</div>
<div class="uk-text-center" uk-parallax="start: 100%; end: 100%; stroke: 100%;"> <img src="images/strokes.svg" width="350" height="340" alt="" uk-svg> </div>
注 ストロークの正確な長さを知る必要がないように、パーセント単位%を使用することをお勧めします。
SVGイメージ
パララックスコンポーネントは、rect、circle、pathなどのインラインSVGイメージの要素に適用できます。
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="10" height="10" uk-parallax="rotate: 360"/>
</svg>レスポンシブ
ピクセルではなく、長さの単位としてvwまたはvhを使用することをお勧めします。パララックスは、ビューポートに応じて適応します。
パララックスは、特定のビューポートにのみ適用することもできます。可能な値の1つを持つmediaオプションを追加します。たとえば、ピクセル単位の数（例：640）、またはブレークポイント（例：@s、@m、@l、または@xl）を追加します。パララックスは、指定されたビューポート幅以上で表示されます。
<div uk-parallax="media: @m"></div>スティッキーパララックス
スティッキーコンポーネントと一緒に、複雑なスティッキーパララックス効果を実現できます。スティッキーパララックスのテストでいくつかの例をご覧ください。
コンポーネントオプション
これらのオプションのいずれかをコンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細はこちら
| オプション | 値 | デフォルト | 説明 |
|---|---|---|---|
easing |
数値 | 1 |
スクロール中のアニメーションイージング |
target |
CSSセレクター | false |
アニメーションの継続時間の要素寸法参照。 |
start |
長さ | 0 |
開始オフセット。値はvh、％、およびpxで指定できます。基本的な算術演算子+と-をサポートします。デフォルト値の0は、ターゲットの上部境界線とビューポートの下部境界線が交差することを意味します。 |
end |
長さ | 0 |
終了オフセット。値はvh、％、およびpxで指定できます。基本的な算術演算子+と-をサポートします。デフォルト値の0は、ターゲットの下部境界線とビューポートの上部境界線が交差することを意味します。 |
media |
ブール値、数値、文字列 | false |
アクティブステータスの条件-整数としての幅（例：640）またはブレークポイント（例：@s、@m、@l、@xl）または任意の有効なメディアクエリ（例：（min-width：900px））。 |
JavaScript
JavaScriptコンポーネントの詳細はこちら。
初期化
UIkit.parallax(element, options);