Vue.jsで構築された、デスクトップでもスマホでも快適に操作できるスライドショーのフレームワーク -Eagle.js

Vue.jsで構築されたスライドショーのフレームワークを紹介します。
デスクトップ・スマホに完全対応、プレゼンテーションモードも備えており、キーボード・マウス・タッチ操作をサポートしている快適なスライドショーを実装できます。

サイトのキャプチャ

Eagle.js -GitHub

Eagle.jsの特徴

Eagle.jsの特徴
  • Vue.jsで構築された、軽快に動作するスライドショーのフレームワーク。
  • アニメーション、テーマ、インタラクティブウィジェットをサポート。
  • プレゼンテーション全体でコンポーネント、スライド、スタイルを再利用可能。
  • ビルトインプレゼンターモードとさまざまな便利なウィジェット。
  • すべてのAPIが公開されており、カスタマイズ可能。
  • ライセンスはISC Licenseで、商用でも無料で利用できます。

Eagle.jsのデモ

Eagle.jsを使用したさまざまなスライドショーを楽しめます。

まずは、スライドやフェードなどのアニメーションが仕込まれたスライドショーから。
Eagle.jsをプレゼンしているスライドショーで、コミカルな動きや映画のスタッフスクロールなどもあり、かなり面白いスライドです。

デモのキャプチャ

デモページ

スライドショーの操作は、キーボード・マウス・タッチ操作に対応しています。

スライドショーの操作方法

スライドショーの操作方法

続いて、Eagle.jsのさまざまな使い方を解説したスライド。

サイトのキャプチャ

Eagle recipes

スライドのテーマの作り方。

サイトのキャプチャ

Themes Slideshows

スライドショーを作成するためのテンプレート。

サイトのキャプチャ

Your First Slideshow

Eagle.jsの使い方

スライドの作り方は、デモのスライドで詳しく解説されています。

Eagle.jsを使用するには、Node.js/npmがインストールされている必要があります。
最初は、デモをクローンすることをお勧めします。

デモをインストールします(ローカルフォルダにのみダウンロードされます)。

「npm run dev」を実行してサーバを起動し、ブラウザで「http://localhost:8080」を開くと、スライドショーが表示されます。

sponsors

top of page

©2018 coliss