どのようにHTML、CSSを使用して魅惑的なプレゼンテーションを構築する

7279 ワード
html css javascript テキストリンク
美しいプレゼンテーションを構築するのは難しいです.多くの場合基調やPowerPointで立ち往生しているテンプレートは非常に制限され、一般的です.よくはない.
今日、我々はHTML、CSS、およびJavaScriptを使用して見事でアニメーションのプレゼンテーションを作成する方法を学びます.
あなたがウェブ開発に初心者なら、フレットしないでください!このチュートリアルを維持するのに十分な簡単になります.だから右にスライドしよう!

私たちは素晴らしいフレームワークを使用するつもりですReveal.js . これは、興味深いカスタマイズ可能なプレゼンテーションを作成するための堅牢な機能を提供します.
  • ヘッドオーバーReveal.js リポジトリとプロジェクトをクローンします(この場合も、Githubの名前空間に移動できます).
  • ディレクトリを新しく作成したフォルダに変更し、パッケージの依存関係をダウンロードするためにNPMをインストールします.その後、実行npm start プロジェクトを実行します.

    • The index.html ファイルのすべてのスライドのマークアップを保持します.これは明らかに使用の欠点の一つです.jsすべてのコンテンツは、このHTMLファイル内に配置されます.
    Themes

    組み込みのテーマ
    明らかに11から選択するための組み込みテーマを内蔵


    テーマを変える
  • オープンindex.html
  • 使用するテーマを反映するCSSインポートを変更する

    • テーマファイルは次のとおりです.
  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css

    • カスタムテーマ
    これは非常にカスタムテーマを作成する簡単です.今日、私は私が与えたプレゼンテーションから私のカスタムテーマを使用しています"How To Build Kick-Ass Website: An Introduction To Front-end Development."
    ここで私のカスタムスライドは次のようになります.


    カスタムテーマを作成する
  • オープンcss/theme/src IDE内部.これはすべてのsassファイルを保持します.scss ) 各テーマについて.これらのファイルはCGIにgrunt(JavaScriptタスクランナー)を使用して配信されます.CSSを書くのを好み、CSS/テーマの中にCSSファイルを作成します.
  • 新しい音を出す.scss ファイル.私は、私のものを呼びますcustom.scss . あなたのローカルホストを停止して実行する必要がありますnpm run build SSSコードをCSSに移行するには.
  • インサイドindex.html ファイルを変更する<head> 新しく作成されたスタイルシートの名前を使用するタグ.拡張子は.css , ない.scss .
  • 次に、私は使用したい別のスタイルのすべての変数を作成しました.Googleフォントでカスタムフォントを見つけることができます.フォントがダウンロードされると、フォントURLをindex.html ファイル.
    • 以下に使用する変数を示します.
  • titleフォントViga
  • コンテンツのフォントOpen Sans
  • コードフォントCourier New
  • フォントGreat Vibes
  • 黄色#F9DC24
  • を加える.reveal カスタムsassファイルへのクラス.これはすべてのスタイルをラップし、カスタムテーマがどんなデフォルトを上書きするかを保証します.次に、カスタムスタイリングを追加!
    • 残念なことに、時間制約のために、私は私がかなりの1!important 私のCSSで上書きします.これは恐ろしい練習です、そして、私はそれを推薦しません.The reveal.css ファイルは非常に特殊なCSSスタイルを持っているので、私はより多くの時間を持っていた場合、私は私のクラスの名前を確保し、私はクラスの名前を確保したので、私は!importants .

    ミックス&
    明らかにするJSはまた、ミックスとあなたのカスタムテーマで活用できる設定が付属しています.
    ミックスと設定を使用するには、単にカスタムテーマにファイルをインポートします
    @import "../template/mixins";
@import "../template/settings";
    ミックス
    垂直勾配、水平勾配、またはラジアルグラデーションミックスを使用して、きちんとした視覚効果を作成できます.
    あなたがしなければならないすべては、必要なパラメータ(色の値)とVailaで渡すことです、勾配を持っている!
    設定
    設定ファイルでは、見出しのサイズ、デフォルトのフォントや色などの有用な変数を見つけるでしょう!


    元素
    新しい内容を追加するための構造は以下の通りです:.reveal > .slides > sectionThe <section> 要素は1つのスライドを表します.あなたのコンテンツに必要な多くのセクションとして追加します.

    垂直スライド
    垂直方向のスライドを作成するには、単にネストセクション.

    遷移
    いくつかの異なるスライドトランジションを選択する:
  • なし
  • フェード
  • スライド
  • 凸
  • 凹
  • ズーム
    • それらを使用するには、data-transition="{name}" に<section> スライドデータが含まれます.

    断片
    断片はあなたのスライドに関する情報の特定の部分を強調するために大きいです.以下が例です.
    フラグメントを使用するには、class="fragment {type-of-fragment}" あなたの要素に.
    フラグメントの種類は以下の通りです.
  • 成長する
  • 収縮する
  • フェードアウト
  • フェードアップ
  • フェードインアウト
  • 当時のフェードアウト
  • カレントブルー
  • 赤を強調表示する
  • グリーンハイライト
  • 強調表示青
    • また、強調表示または表示する必要があります順序を示すためにあなたの要素にインデックスを追加することができます.を使用してこれを示すことができますdata-fragment-index={index} 属性.
    明らかにするより多くの機能があります.あなたは美しいプレゼンテーションを構築するために活用することができますが、これらは私が始めた主なものです.
    あなたのスライドをフォーマットする方法についてもっと知るためにreveal.js tutorial .
    私のプレゼンテーションのためのコードのすべてはGithubで見ることができます.私のテーマを盗む自由に!
    display:noneを置き換える
    mysqlのストレージ・プロシージャ、カーソル、トランザクション・インスタンスの詳細