Kaleidoscope - Webサイトに埋め込める360度写真/動画ビューワー MOONGIFT
THETAなどのデバイスと、各ソーシャルサービスが対応したことで360度写真、360度動画が使われるようになっています。スマートフォンの写真とは違って、普段は見られない部分まで自分で自由に視点を変えられるのが魅力です。 しかしフォーマットが特殊なので、専用のビューワーが必要になります。今回紹介するKaleidoscopeは360度写真、動画に対応したビューワーになります。 Kaleidoscopeの使い方 KaleidoscopeはWebサイトに埋め込んで使えます。 マウスでぐりぐりと視点を変えられます。 実際に動かしている例です。 自分で撮影した360度写真や動画があれば、Kaleidoscopeを使ってWebサイトに埋め込めます。Webブラウザであれば専用のビューワーを持っていない人でもすぐに確認できるのが魅力です。見るまでの手間が減れば、もっとコンテンツを増やしたくなるでしょう。 K
CSS3 Countdown - ティザーサイトで使いたい。CSS3/JavaScript製のタイマー MOONGIFT
新しいプロジェクトをはじめる時などに活躍するのがカウントダウンタイマーです。後何日、後何時間といった具合に刻々と減っていくタイマーを目にするとわくわくさせられるのではないでしょうか。 カウントダウンの方法は幾つかあると思いますが、今回はCSS3 Countdownを紹介します。CSS3とJavaScriptを組み合わせて格好いいタイマーを表示します。 CSS3 Countdownの使い方 CSS3 Countdownのデモです。フリップスタイルの表示になっています。 秒単位でタイマーが徐々に減っていきます。年数ではなく日数になっていて、例えばこのデモでは2080日を越えて設定されています（2020年指定です）。オリンピックに合わせたりするのは面白そうです。 使い方はこんな感じです。 <div id="CDT"></div> <script> // Set countdown limit v
smartcrop.js - 要注目！スマートなクロップ機能を実現 MOONGIFT
おお、これは格好いい！ 写真のサムネイル表示というのはやり方によって大きくインパクトが変わります。単純に縮めて表示すると何の写真か分かりづらくなります。さらに横長、縦長の写真では正方形に切り出すのは簡単ではありません。 そこで使ってみたいのがsmartcrop.jsです。写真の中から一部を切り出すライブラリで、よりインパクトの強い部分を抽出します。 smartcrop.jsの使い方 デモです。よりインパクトの大きい場所を抽出しているのが分かるかと思います。 切り出す形を変更することもできます。その場合でも写真全体を対象にする訳ではありません。 さらにサンプル。女性を中心に抽出しています。 これは完全に左側から。 ヨットを中心に。サムネイルでも格好いいですね。 街並。より印象的なビルを中心にしています。 こちらは川と太陽が中心です。 人の場合は顔を中心にするようです。 多数の人がいる場合。よ
favico.js·Faviconを自在にコントロール MOONGIFT
Webカムや動画までFaviconに流しちゃいます！ FaviconはWebサイトのマークとして大事な役割を担っていますが、単に同じ画像をいつまでも表示しているのでは面白みがありません。もっと活用したい、そう考える人に使ってみて欲しいのがfavico.jsです。 できること favico.jsができることはFaviconのダイナミックな変換です。例えば、 バッジ表示 別なアイコンに差し替え 動画の表示 Webカムの表示 ができます。Faviconの中でWebカムを表示したいと思うケースは思いつきませんが、バッジ表示やユーザによってアイコンを変えると言うのは十分ありえるのではないでしょうか。 バッジ表示についてはアニメーションや形を指定することもできます。 デモ バッジ表示。数はダイナミックに変更できます。 数をアップしました。 アイコンの差し替え。 動画の再生。 バッジの表示位置は指定でき
文字をJavaScriptで画像のようにレンダリングする·typeface.js MOONGIFT
Webサイトを見ていると、文字を画像に置き換えたサイトを見ることがある。思い描いている見せ方をそのまま表示させたいときなど、デザインを重視するサイトでよく見られる工夫だ。しかし問題はそのメンテナンス性の悪さだろう。 奇麗に文字が表示されるようになる それに適切に説明文を入れておかないと文字読み上げブラウザなどでは何も情報が得られなくなってしまう。そうした煩雑さから解放されるライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはtypeface.js、文字をSVG画像に変換するJavaScriptライブラリだ。 typeface.jsは指定した文字をそのままcanvasタグを使ったSVG画像に変換する。CSSを使って文字装飾を行うことができ、太字/イタリック/色変更を変更できる。他にもfont-stretch（横幅）、文字間隔、行の高さなどを指定することが可能だ。 選択すると文字全
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
