コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > impress.js_javascript スキルの予備的な理解について話す

impress.js_javascript スキルの予備的な理解について話す

WBOY
リリース： 2016-05-16 15:40:06
オリジナル
1451 人が閲覧しました

1. impress.js を理解する

impress.js は、CSS3 および JavaScript 言語を使用する開発者が使用するプレゼンテーション層フレームワーク (プレゼンテーション ツール) です。

現在、一般の開発者は impress.js を使用して、同様の効果を持つプレゼンテーション ツールを開発できますが、FLASH ベースの Prezi よりもパフォーマンスが優れています。その機能には、キャンバスの無制限の回転と拡大縮小、任意のサイズのテキストの任意の角度での配置、CSS3 3D 効果のサポートなどが含まれます。同時に、従来の PowerPoint 形式のスライド プレゼンテーションもサポートされています。

現在、impress.js は Webkit ブラウザ (Chrome、Safari) に基づいて開発されていますが、Webkit 以外のエンジンに基づいて CSS3 3D をサポートする他のブラウザでも正常に実行できます。

2. impress.js を使用します

impress.js の紹介:

コードをコピーします コードは次のとおりです:



これで、新しいスライドショーを作成するのがいかに簡単であるかがわかりました。各スライドは、クラス名が「step」である

要素 (ラッパー内) です。

コードをコピーします コードは次のとおりです:


私の最初のスライド


単純なスライドショーを作成している場合でも、スライドショーにデータ属性を追加し始めると楽しいです。データ属性は、スライドがアクティブでない場合のスライドのプロパティを表します。

のデータ属性を使用できます。

data-x = スライドの x 座標

data-y = スライドの y 座標

data-scale = 値を指定してズームします。data-scale を 5 にすると、スライドが元のサイズの 5 倍に拡大されます。

data-rotate = スライドを数値で回転させます

data-rotate-x = 3D の場合、この数値は X 軸に対してどれだけ回転するかを表します。 (前かがみ/後ろにもたれ)

data-rotate-y = 3D の場合、この数値は y 軸に対してどれだけ回転するかを表します。 (左右にスイング)

data-rotate-z = 3D の場合、この数値は Z 軸に対してどれだけ回転するかを表します。

インスタンスディレクトリ:


上記の内容は、impress.js についての私の予備的な理解です。後で詳しく学習します。引き続きこのサイトに注目してください。

関連ラベル：
impress.js impress.js制作ppt
ソース：php.cn
前の記事：jsフェードインとフェードアウトフォーカス画像スライドエフェクトコード共有_JavaScriptスキル 次の記事：JavaScript_javascript スキルに実装されたクラシック ファイル ツリー メニュー効果
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2240
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2380
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1989
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1877
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1947
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート