Clever Geek Handbook

JaCSSで美しいCSS3プレゼンテーションを簡単に作成





標準レイアウトのプレゼンテーションにひどくうんざりしているという事実から始めたいと思います。テーマが上部にあり、フッターの下、右および/または中央にポイントのセットがある見出しがあります。



退屈だ！



創造性はどこにありますか？ トピックを明らかにするだけでなく、トピックに興味のない人でも資料の発表に興味を持つようにしたいですか？ くそー、私たちはウェブ開発者なので、なぜ私たちは最高の場所ではなく、左側のプログラムでプレゼンテーションを作成するのですか？





物語



始めるために、私はPreziのようなものを試しました（そしてそれが起こったのです）。 はい、珍しい。 しかし、カスタマイズの複雑さと実用的な不可能性に非常に驚きました。ビデオを追加しない限り、テーマ、フォント、アニメーションはありません。 しかし、この概念は非常に興味深いものでしたが、トランジションの「渦」を混乱させました-大型プロジェクターでプレゼンテーションを開始するとき、私はすでにめまいがしています。 その後、レビューで判断した私のパフォーマンスはうまくいきました。



今年、私は再び講演に招待されました（今回はJEEConfで ）。また、私が話したいことをどのように示すかという質問に直面しました（ほぼ一節）。 そして再び、私は珍しいことを望んでいた:)



最初にPreziのようなことをすることにしましたが、GWTでHTMLのフルパワーを活用しました。 しかし、開発の過程で、アニメーションにCSS3-Transitionsを使用し、ターンにCSS3-2D-Transformsを使用しないのはなぜか、ゆっくりと別のアイデアが浮上しました。 結局のところ、最小限の労力で「スライド」間の美しい移行を行うことができます。



さらに：CSSはカスケードスタイルであることを思い出しました。 つまり、1つの定義があり、次に最初のパラメーターの一部または全部を一部または完全に置き換える別の定義がある場合、ブラウザーは2番目の定義に従ってレンダリングする必要があります。



つまり、2つの定義がある場合 

.class1 { left: 100px; } .class2 { left: 200px; }


また、一部の要素では2つのクラスが設定され（class = "class1 class2"）、結果として、ブラウザーはleftプロパティが200pxに等しい要素を配置する必要があります。 このプロパティは、CSSを学習し始めたばかりの人なら誰でも知っています。



要素にクラスclass1があり、class2を割り当てた場合、leftは100から200に変わります。それは変わります。 つまり、要素のcss3遷移も「オン」になっている場合、ブラウザは要素を100pxから200pxにスムーズに移動する必要があります。 そして、これはまさに私たちが必要とするものです！



最初のパンケーキ



アイデアを「走り回る」ために、私はそれがするすべてを行うjQueryコードの小さな断片を書きました。次の「スライド」に移動するときにクラスを追加し、前のスライドに戻る必要があるときに削除しました。



表示および非表示になったすべてのコンテンツは、特定のID（「cont」）を持つコンテナーに入れました。これにより、このコンテナーのクラスを変更してコンテンツのスタイルを変更できました。



最終的に、スライドのセットアップコードは次のようになりました。 

  if (stage>current_stage) { for (current_stage++;current_stage<=stage;current_stage++) { $("#cont").addClass("s"+current_stage); } current_stage--; } else if (stage<current_stage) { for (;current_stage>stage;current_stage--) { $("#cont").removeClass("s"+current_stage); } }


その後、私は主にコンテンツに焦点を当てました。



その結果、JEEConfで次のプレゼンテーションを行いました。CQRS+ GAE + GWT



ステージ2：JACSS



ちなみに、実行するのが非常に興味深い報告書の後、次の報告書を準備しやすくするために、いわば、この技術を合理化することを望んでいました。



まず、私の場合はjQueryは必要ないと判断しました 。 結局のところ 、 classListがあります。



第二に、最小限の設定を行う必要がありました-スライドの数、コントロールの場所など。 これを行うには、これらのパラメーターを構成用の別のオブジェクトに入れ、 querySelectorAllを使用しました



その結果、このようなプロジェクトが登場しました： JaCSS （JavascriptとCSSの混合として）。



コード内には複雑なものはまったくありません。 jacssを追加すると、次のことが行われます。



  1. 2つの関数をエクスポートします：jacss.next（）、javss.prev（）-「スライド」の切り替え
  2. ステッチのキーとスペースバーのハンドラーがウィンドウにハングアップします（「スライド」を切り替えます）
  3. 「ハッシュ」URLを変更するためのハンドラーがハングします（ブラウザーの「戻る」/「進む」ナビゲーションを正しく処理するため）
  4. URLハッシュを調べ、URLハッシュで指定されたスライドに移動しようとしているものがある場合


スライドを切り替えるとき：

  1. フォーム「s N 」のクラスの追加と削除。Nはスライドの番号です。 したがって、現在のスライドが5番目だった場合、7番目に移動すると、クラスs6 、 s7が追加されます。 そして、2に移動すると、クラスs5 、 s4を削除しようとします。
  2. URLハッシュは、新しい「現在の」スライドと同じに設定されます




最も興味深いのは、後でこの「ライブラリ」の提案されている使用について説明することです。 実際、HTMLおよびCSSファイルの構造は、私のものとは根本的に異なる場合があります。 さらに、優れたWebデザイナーにも、コンテンツを中央に配置したり配置したりするためのより便利なオプションを考えて提供するように依頼します。 私の例は概念実証と見なすことができ、それに基づいてすでに「通常の」決定を下すことが可能です。



一般に、私は私のオプションを提案します：



JACSSでプレゼンテーションを作成する方法





プレゼンテーションは、「コンテンツ」（テキスト、写真）と「動作」（CSS定義のセット）の2つの部分に分かれています（明確ではありませんが、以下を参照）。 したがって、simple.htmlとsimple.cssの2つのファイルを作成します。



htmlコードでは、habraparserはどうにか対処するのが難しいので、ここで尋ねます： github.com/olostan/jacss/tree/master/examples/simple



htmlには、jacssのjs / cssが含まれます。 次に、それを構成し（「スライド」の最大数）、実際のテキストを設定します。 

 <span id='texample'>Example</span>


jacss.common.css（これは必要ありません）を使用する場合、コンテンツを持つブロックの識別子は文字 "t"で始まる必要があることをすぐに言わなければなりません。



CSSでは、最初にコンテンツの初期位置を設定します。 スタイルセットを使用すると、各コンテンツは最初は非表示になり（不透明度：0、可視性：非表示）、さらに、左上隅がほぼ中央に配置されます。 必要なテキストを最初に中央揃えする合計： 

 #texample { color: blue; font-size: 50px; left: -80px; top: -35px; }


次に、各「スライド」のコンテンツのスタイル（色、可視性、位置）の説明があります。 

 .s1 > #texample { opacity: 1; visibility: visible; } .s2 > #texample { left: -400px; top: 200px; } .s3 > #texample { top: -200px; color: red; } .....


前の「スライド」に関連する変更のみを記録します。



結果はここで見ることができます （またはgithubから取得できます）。



より複雑な例（グラデーション、シャドウ、RGBA背景など） も表示できます。



htmlとcssの分離に関するいくつかの言葉：cssには私たちの行動が含まれていることを理解することが重要です。 つまり、変更が記録されます。 フレームを変更するときに画像/テキストを変更する必要がある場合はどうすればよいですか？ 写真が簡単な場合-背景に置くことができれば、テキストではさらに難しくなります。 私はこの解決策を見つけました：擬似セレクターを使用してください：before ,: afterおよび "content"- ここで "Vasya"から "Kolya"への変更を参照してください 。



次は？





そして、すべてがあなたの手にあります：健康のためのフォーク！ 実際、これまでに実際に準備ができているのは概念だけであり、これにさらに多くをねじ込むことができます。



このチェックリストに少しずつ移動していきますが、プルリクエストという形でのヘルプも歓迎します:)提案、ヒント、コメント。



ありがとう、美しく魅力的なレポートでお会いしましょう！





リンクリスト：

私の最初のプレゼンテーション

GitHubのJaCSS

jacssの最も簡単なデモ

jacssのもう少し複雑なデモ


More articles:


All Articles