フレームなしのHTMLスライド

私は大ファンですreveal.js そして、私がこれまでに与えたほとんどあらゆる話のためにそれを使いました.これは、スピーカーのメモ、フルスクリーンモードのようなNifty機能の負荷でフル機能のプレゼンテーションフレームワーク、コード構文の強調など.
しかし、時々、私はちょうどローカルmeetupまたはオフィスプレゼンテーションでスクリーン上で一握りの情報を投げる必要があります.そして、Web開発者であることの結果として、私はより快適なCGIと私のレイアウトを制御し、調整する方法です.
私は実施に出くわしたOndřej Žára for pure CSS slides そして、私が私自身のWatched HTMLスライドのために何を使うことができるかについて見るために、彼のコードベースに掘り下げてください.純粋なCSS実装のために、それはかなり完全な機能です、そして、あなたは関係なくそれをチェックしなければなりません.

ターゲット擬似クラス

私が欲しかったものはスライドからスライドへ移行する良い方法でした、そして、私は:target 擬似クラス.現在のURLのフラグメントに一致するIDを持つ要素にマッチするセレクタです# サイン.
たとえば、あなたのサイトにIDの要素がある場合dinosaur , URLを使用してアドレスバーからその要素に移動できます.https://www.example.com/index.html#dinosaur . そして、それが現在のURLであるならば、以下のCSS規則は#dinosaur 要素

#dinosaur:target {
  background-color: green;
}

そして、そのことによって、私たちはシェニア人が始まることができます.

マークアップ構造

HTML構造はかなり簡単です.

<main>
  <section id="slide1"></section>
  <section id="slide2"></section>
  <section id="slide3"></section>
  <section id="slide4"></section>
  <section id="slide5"></section>
</main>

各スライドは、ビューポートの完全な高さを取るセクションでありえます.そして、ビューポート単位を使いやすくすることができます.ビューポートの単位は、ビューポートのサイズに比例したCSS単位である.
我々はvw , vh , vmax and vmin . HTML SlideDeckを作るために、Relavant Unitはここにありますvh またはポートポートの高さ.高さを設定する100vh 各セクションには、常にどのようにブラウザを変更するに関係なく、ビューポートの高さになります.

各スライドは、スライドコントロールのメカニズムとなるターゲットにすることができますユニークなIDを持っています.

だからどこ:target これで擬似クラス?ハングアップ、我々はそれに来ている.我々が以前にしたことは、各セクションの上部にブラウザのジャンプを行うには、まだ上下にスクロールすることができます、あなたのプレゼンテーションは、スライドのデッキの代わりにWebページのように振る舞うこと.
それがあなたがそれをしたいことであるならば、大きい.あなたは、正直になるために、その日のためにされます.しかし、私たちは、スクロールバーが活性化したくないと言いましょう.我々は、ビューポートでアクティブなスライドをしたいです.そのとき、:target 疑似クラスは遊びに出る.

スライドの積み重ね

しかし、それに入る前に、スライドデッキがどのように振る舞うかを視覚化しましょう.
各スライドは、同じサイズであり、お互いの上に配置
我々は、1つのスライドは、1つだけスライドをお互いの上に積み重ね、任意の時点で表示されますし、スライドをアクティブにする必要がありますURLフラグメントを利用して表示されるセクションをスタイルします.
そう.Z指数EHに沿ったスタッキング?我々は今、そのような何かを達成するための1つ以上のオプションがあります.位置とZ -インデックスの試みられてテストされたテクニックをカバーしましょう.The z-index プロパティは、position のデフォルト値以外の値static .
現在4つの他の値がありますposition , すなわちrelative , absolute , fixed and sticky , sticky 新しい追加であること.書いたexcellent in-depth write-up どのように動作するので、それを読んでください.
によるとspecification :

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of ‘z-index’ other than ‘auto’.

ボックスに位置プロパティを適用すると、z-index プロパティをスタックレベルを調整します.設定position: absolute 箱の上に、それは通常の流れからそれを取り除き、それがその含んでいるブロックに関して明らかに相殺されます.
絶対的に配置された要素の内容は、他のボックスの周りには流れません.スタックレベルが高い場合、それらは以下のようなものをカバーします.

それらをすべてスタックするにはposition: absolute and width: 100% 各スライドセクションで.あなたの何人かは考えているかもしれませんwidth: 100% すべてのオフセット値を0 ? (例)top: 0; right: 0; bottom: 0; left: 0 ) 他の誰かがまったく同じ質問をした.
Keith J. Grant これらの2つのアプローチの違いの分析を書いてwidth: 100% 要素の周囲に余白が追加されると、その位置の祖先からずれてしまう.
しかし、私のスライドがビューポートを埋めるために欲しいので、私はマージンを全く使用していません.🤷
次のことは、アクティブなスライドのためのZ -インデックスを調整することです:target セレクタ.

section {
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: 0;
}

section:target {
  z-index: 1;
}

いくつかの人々は、10または100の宗派を使用して異なったZインデックスを扱うが、正直に、2つの要素の間で、それが1または1000であるかどうかにかかわらず、より高い整数値勝を持っている人は誰でも勝ちます.

いくつかのアニメーションを振りかける

プロフェッショナリズムのいくつかの崇高さをこの努力に加える(誰が私は冗談を言うか?)いくつかのスライドトランジションが整っていると思います.CSSはまた、このためのアニメーションオプションの素敵なスイートを提供しています.あなたは、CSSの変換ですべてのスライド、アウト、スライド、回転することができます.
もしあなたがENDのEJのスライドを見たならば、彼は回転効果を使いました.ビューポートに入る前にビューポートを左にし、ビューポートを左にします.
インアウト
デフォルトtransform-origin is 50% 50% , これは、要素が中心の周りを回転することを意味します.図のように角を回転させるには、0 0 . スライドが残している間、すべてのスライドはビューポートの90度時計回りに回転し始めます.
我々は、アクティブなスライドの後に来るスライドをターゲットに兄弟セレクタを使用することができますし、アニメーションをスムーズに表示するためにいくつかの遷移値を追加します.

section {
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: 0;
  transform: rotate(90deg);
  transform-origin: 0 0;
  transition: transform 1s, opacity 0.8s;
}

section:target {
  transform: rotate(0deg);
  z-index: 1;
}

section:target ~ section {
  opacity: 0;
  transform: rotate(-90deg);
}

スライドがビューポートから回転されると、どうにかスクロールバーがトリガーされます.私は解決策を知っているが、私はこれの正確な理由を考え出していないoverflow: hidden にbody 要素.私が翻訳を使用するとき、これが起こらないので、私はこれをもう少し調べなければなりません.

ラッピング

注意を取るもう一つのことは、あなたのスライドが最初にロードされるとき、あなたのスライドのどれもアクティブにされないことを意味するどんなURL断片でもありません.この問題を回避するには、最初のロードで表示される最初のスライドへのリンクを追加します.

回転があなたのスタイルに合わないならば、より多くのスライドトランジションのために他のCSS変換を試してみてください.しかし、もしあなたのスライドの要件が合理的に、なぜこのようなことを試していない?あなたも、いくつかの無料の静的サイトのホストにそれを投げることができるとどこに行くにアクセスできるようにしてください.😎
これの生の実装のために、チェックアウトthe slides 話を導入するために使用されます.CSS