CSS Miscellaneous: view-timeline-name 詳細解説
CSS Miscellaneous: view-timeline-name 解説
view-timeline-name
は CSS の Miscellaneous
モジュールで定義されるプロパティで、スクロールタイムラインの名前を指定します。スクロールタイムラインは、スクロールによってアニメーションを制御するために使用されます。
詳細
view-timeline-name
プロパティは、以下の要素に適用できます。
- スクロール可能な要素 (例えば、
div
要素、body
要素) - スクロールバーを持つ要素 (例えば、
::-webkit-scrollbar
疑似要素)
view-timeline-name
プロパティの値は、以下のいずれかになります。
- 識別子 (
ident
) - カスタム識別子 (
dashed-ident
)
識別子は、標準の CSS キーワードと衝突しないようにする必要があります。カスタム識別子は、--
で始まる必要があります。
例
以下の例では、#container
要素のスクロールタイムラインの名前を main-timeline
に設定しています。
#container {
scroll-timeline-name: main-timeline;
}
以下の例では、::-webkit-scrollbar
疑似要素のスクロールタイムラインの名前を scrollbar-timeline
に設定しています。
::-webkit-scrollbar {
scroll-timeline-name: scrollbar-timeline;
}
ブラウザのサポート
view-timeline-name
プロパティは、多くのブラウザでサポートされています。詳細は、Can I Use: [無効な URL を削除しました] を参照してください。
関連プロパティ
scroll-timeline
animation-timeline
補足
view-timeline-name
プロパティは、まだ実験段階の機能です。- スクロールタイムラインは、複雑なアニメーションを作成するために使用できます。
CSS view-timeline-name サンプルコード
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
#container {
height: 200px;
overflow-y: scroll;
scroll-timeline-name: main-timeline;
}
p {
animation: fade-in 2s ease-in-out forwards;
animation-timeline: main-timeline;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
この例では、#container
要素のスクロールタイムラインの名前を main-timeline
に設定しています。そして、p
要素は main-timeline
に沿って fade-in
アニメーションを実行します。
スクロールバーのアニメーション
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
#container {
height: 200px;
overflow-y: scroll;
scroll-timeline-name: main-timeline;
}
::-webkit-scrollbar {
scroll-timeline-name: scrollbar-timeline;
}
::-webkit-scrollbar-thumb {
animation: scrollbar-pulse 2s ease-in-out infinite;
animation-timeline: scrollbar-timeline;
}
@keyframes scrollbar-pulse {
from {
background-color: #ccc;
}
to {
background-color: #666;
}
}
この例では、#container
要素のスクロールバーのスクロールタイムラインの名前を scrollbar-timeline
に設定しています。そして、::-webkit-scrollbar-thumb
疑似要素は scrollbar-timeline
に沿って scrollbar-pulse
アニメーションを実行します。
複数のタイムライン
<div id="container">
<div class="header">
<h1>タイトル</h1>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
#container {
height: 200px;
overflow-y: scroll;
}
.header {
scroll-timeline-name: header-timeline;
}
.content {
scroll-timeline-name: content-timeline;
}
.header {
animation: fade-in 2s ease-in-out forwards;
animation-timeline: header-timeline;
}
.content {
animation: fade-in 1s ease-in-out forwards;
animation-timeline: content-timeline;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
この例では、#container
要素の header
要素と content
要素それぞれに個別のスクロールタイムラインを設定しています。
view-timeline-name
プロパティは、さまざまな方法で
CSS view-timeline-name プロパティのその他の使用方法
view-timeline-name
プロパティは、スクロール方向を制御するためにも使用できます。
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
#container {
height: 200px;
overflow: scroll;
scroll-timeline-name: main-timeline;
}
p {
animation: fade-in 2s ease-in-out forwards;
animation-timeline: main-timeline;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 縦方向スクロールのみ */
@media (orientation: portrait) {
#container {
scroll-timeline-name: vertical-timeline;
}
p {
animation-timeline: vertical-timeline;
}
}
/* 横方向スクロールのみ */
@media (orientation: landscape) {
#container {
scroll-timeline-name: horizontal-timeline;
}
p {
animation-timeline: horizontal-timeline;
}
}
この例では、#container
要素のスクロール方向に応じて、main-timeline
、vertical-timeline
、horizontal-timeline
のいずれかのスクロールタイムラインが適用されます。
要素の表示位置の制御
view-timeline-name
プロパティは、要素の表示位置を制御するためにも使用できます。
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
#container {
height: 200px;
overflow-y: scroll;
scroll-timeline-name: main-timeline;
}
p {
animation: fade-in 2s ease-in-out forwards;
animation-timeline: main-timeline;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* 要素を画面中央に表示 */
@media (min-width: 768px) {
#container {
scroll-timeline-name: center-timeline;
}
p {
animation-timeline: center-timeline;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateX(50%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
}
この例では、#container
要素の幅が 768px 以上の場合、center-timeline
スクロールタイムラインが適用され、p
要素は画面中央に表示されます。
view-timeline-name
プロパティは、JavaScript からも操作できます。
注意
上記はあくまでも例であり、実際の使用方法は状況によって異なります。
Flexbox や CSS Grid で実現!Miscellaneous 書き込みモードの代替方法
writing-modeプロパティには、horizontal-tb、vertical-rl、vertical-lrなど、いくつかの標準的な書き込みモードがあります。さらに、Miscellaneousと呼ばれる特殊な書き込みモードも存在します。
counter-increment vs JavaScript:連番・カウントアップの最適解は?
仕組みカウンターは名前付きの変数のようなもので、各要素に個別に値を割り当てることができます。counter-increment を使って、要素ごとにカウンターの値を増加させます。カウンターの値は、content プロパティを使ってコンテンツとして表示することができます。
@media.any-pointer 完全ガイド: タッチスクリーンデバイスとペン入力デバイス向けスタイルシート
@media. any-pointer は、ユーザーが タッチスクリーン や ペン などのポインティングデバイスを使用しているかどうかを検知する CSS メディアクエリです。デバイスの種類に関わらず、これらのデバイスで操作しやすいようにスタイルを調整できます。
まとめ:text-overflow プロパティを使いこなして、見やすく機能的なWebサイトを作ろう!
text-overflow プロパティは、要素内に収まりきらなかったテキストをどのように表示するかを制御します。これは、長いタイトルや文章を扱う際に、見やすくするために役立ちます。値:ellipsis: 省略記号(…)を表示します。これがデフォルト値です。
CSSアニメーションの基礎:animation-duration プロパティで動きをデザインしよう
使い方上記例では、element クラスに 2 秒間のアニメーション my-animation を適用しています。プロパティの詳細値 時間:s または ms 単位で指定できます。例:2s、1000ms infinite:アニメーションを無限に繰り返します。
CSSボックス配置:使いこなして見やすく整ったレイアウトを作成しよう
1 align-content プロパティalign-content プロパティは、テーブル内の列の垂直方向の配置を制御します。以下の値を設定できます。flex-start:列をテーブルの上部に配置します。flex-end:列をテーブルの下部に配置します。