HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
[JS]一つ一つのパネル表示をカスタマイズできるスライドショーのスクリプト -imgPlayer
一つ一つのパネルを異なるサイズで、最適な位置に表示し、異なる背景やアニメーションを設定できるスライドショーのスクリプトを紹介します。 imgPlayer デモページ [ad#ad-2] デモでは10枚のパネルがセットされており、それぞれ異なるサイズ、最適な位置で表示し、さまざまなアニメーションで切り替わります。 2枚目を表示したキャプチャ 静止画ではその楽しさが分からないので、ぜひデモをどうぞ。 デモページ スライドショーの操作は、画像の左右のアロー、下のナビゲーション、キーボードの矢印キーに対応しています。 実装は少し面倒で、個々のパネルごとに座標とサイズなどを指定します。 キャプションも設定できます。 JavaScript パネル（一枚）の設定例です。 [221,30,386,518,{ onStart: function(){ darkStyle(); $('#text').html
[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
