Clever Geek Handbook

impress.js-テンプレートを引き裂くCSS3プレゼンテーション

8番ピンの20点リストを含まず、「会議とパートナーシップ」または「オフィスライフ」クリップアートの無料コレクションから写真のギャグ反射を引き起こす優れたプレゼンテーションでさえ、古いスライドプロジェクターの世界からオフィススイートに変更なしで転送された、長い間確立された標準に従います。 プレゼンテーションは、常に同じ形式とサイズの長方形の画像のセットです。 時々、トランジションとアニメーションがそれらの間に追加され、色とりどりの碑文と無意味に微笑む抽象的なオフィスワーカーに迷惑をかけます。 優れたプレゼンテーションの事実上の標準は、長い間ちらつきのない静的なスライドのシーケンスであり、大きな活字の非常に短いテキストと、慎重に選択されたいくつかの写真またはスクリーンショットです。



CSS3の変換と遷移に基づいて、プレゼンテーションを作成するためのimpress.js javascriptフレームワークは「スライド」の概念を超え、オープンで無制限の3次元空間でプレゼンテーションを構築できます。 彼のインスピレーションの源は、サービスprezi.comでした 。 Githubのimpress.jsリポジトリは1か月前に登場しましたが、すでに最も人気のあるリポジトリの1つになりました。 せっかちな人はここで小さなデモを見ることができ、残りは今すぐ珍しいプレゼンテーションの例を作成できます。



現在のところ、Impress.jsは、運が良ければ、他のブラウザーではChromeとSafariの最新デスクトップバージョンのみをサポートしています。 新しいページを作成し、impress.jsスクリプトをそれに接続し、少しトリミングしてスタイルで色付けし、 id=”impress"



属性を持つdivラッパーを追加します。 

 <!doctype html> <html> <head> <title>Impress.js</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> body { background-color: #ed7; color: #400; font-size: 2em; } .step { width: 1000px; } img { margin-left: 450px; } .no-support-message { display: none; } .impress-not-supported .no-support-message { display: block; color: red; font-size: 2em; } </style> </head> <body> <div id="impress"> <div class="no-support-message"> ! Impress.js    Chrome  Safari. </div> </div> <script type="text/javascript" src="js/impress.js"></script> </body> </html>


各スライド、またはアニメーションステップは、 <div class=”step” … >



という形式のブロックで表されます。このブロックに、位置とスケールを指定する属性を追加できます。 スペースバーまたは矢印を使用して、スライドを切り替えることができます。 フレームワークはまだ1か月も経っていないため、使用可能な属性のセットはまだ非常に限られています。



だから、最初のステップ。 デフォルトでは、すべての属性はゼロです。 

 <div class="step"> <h1>  -  :</h1> &ltdiv class="step"&gt </div>


2番目のステップ。 1000ピクセルを右および下に移動します。 

 <div class="step" data-x="1000" data-y="1000"> <h1>  - :</h1> &ltdiv class="step" data-x="1000" data-y="1000"&gt </div>


第三のステップ。 スケールの変更を開始します。 

 <div class="step" data-x="3000" data-y="-1000" data-scale="4"> <h1>  - :</h1> &ltdiv class="step" data-x="3000" data-y="-1000" data-scale="4"&gt </div>


第4ステップ。 ハーフバレルを作ります： 

 <div class="step" data-x="-6100" data-y="-3800" data-rotate="180" data-scale="40"> <h1>  - :</h1> &ltdiv class="step" data-x="-1700" data-y="-3000" data-rotate="180" data-scale="40"&gt </div>


5番目のステップ。 3D CSS変換： 

 <div class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29"> <h1>  - 3D:</h1> &ltdiv class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29"&gt </div>


第六ステップ。 主なものは詳細にあります： 

 <div class="step" data-x="7963.7" data-y="-8106.3" data-scale="0.04"> <img src="img/small_nuance.png"> </div>


以上です。 impress.jsがGithubで引き起こした興奮を考えると、急速な開発が期待できます。 プレゼンテーションを作成するための明白なアプリケーションに加えて、固定サイズのフラットページの代わりに無制限の3次元空間にコンテンツを配置するという概念は、マルチタッチを備えたタブレットでのアプリケーションを見つける可能性があります。 ジェフラスキンが夢見ていたスケーラブルなインターフェイスを思い出してください。



UPD：コメントでは、smashercosmo habrayuserは、プレゼンテーションだけでなく、一般的なWebデザインでのクロスブラウザサポートと使用に重点を置いたjQueryポートが既に存在することを示唆しました。


More articles:


All Articles