パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
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」
ちょっと珍しいタイプでしたので備忘録。 連続した要素を、指定した数に達したら 分割して、ページネーションを自動で 生成し、移動時にエフェクトが加わえる、 というもの。大量のリストをコンパクト に、という方に向いてそうですね。 連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。 例えばli要素が100個くらいあったとして、これを10個ごと、10ページに分割し、ページ移動時にエフェクトも実装する、というもの。少々カスタマイズ性には欠けますがこれはこれで手軽に大量の要素をコンパクト化出来るので覚えておいて損はないかなと思います。 以下動作サンプルです。 Sample ページネーションの数字が小さすg コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1
FLV/MP4/SWFをMP3/M4A/WAVに変換 動画ファイル(FLV/MP4/SWF)を音楽ファイル(MP3/M4A/WAV)に変換するページです。 FLVはMP3かM4AかWAVにMP4はM4AにSWFはMP3に変換することが出来ます。 JavaScriptを使ってクライアント側で変換してるのでサーバにアップロードやダウンロードを行いません。 だからプライベートなファイルや著作権のあるファイルでも安心して使うことができ、 しかもサーバに待たされること無く変換することが出来ます。 動画から音声をエンコードせずにそのまま抽出してるので高速に変換でき高音質です。 複数の動画ファイルを同時に変換することが出来ます。 変換した音声はMP3プレイヤに入れて外で聞くことが出来ます。大半のMP3プレイヤはM4Aにも対応しているので。 ただし最新のJavaScriptを使っているので Interne
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jqMobi」のβ版が公開されています。 jqMobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向けに最適化したものといえるでしょう。 すでにjQueryやjQuery Mobile、あるいはSencha Touchなど、さまざまなモバイル向けHTML5/JavaScriptフレームワークが登場する中で、jqMobiの特徴はどこにあるのか、ブログで次のように説明しています。 jQuery - still focuses on the desktop.
ページをゆるふわっと表示する jQuery Chaining Effects Plugin (jquery.effectchain.js) はいこんにちは!今回はこことかここみたいなサイトのページ表示エフェクトを簡単に実現するプラグインをつくってみたのでそのご紹介です! Internet Explorer 6+, Safari 5, Google Chrome 8, Firefox 3.6, Opera 11 で動作確認済み。不具合や動作報告などありましたらコメント欄でご連絡ドーゾ。 動作デモ 画像ではお伝えしにくいので、映像で。最初の 20 秒までがプラグインのデモになります。 実際のデモサイトはこちら 特徴 簡単な記述でリッチなページ表示演出ができます。また、カスタムデータ属性を使って要素ごとにアニメーションを変えたりインターバル・ディレイを指定して表示のタイミングを制御することも可能
こんにちは。開発担当の林です。 iPhone / iPad のウェブブラウザでページを見ているとき、けっこうな割合でピンチイン・ピンチアウトすると思いますが、それがどのくらい拡大されているのかを取得する方法を書きます。 また、応用でピンチイン・ピンチアウトされても、見た目のサイズを維持するにはどのくらい拡大すれば良いかということにも触れたいと思います。 広告バナーなんかでよく使われてるアレの仕組みです。何かのお役に立てれば幸いです。 ウェブページがどのくらい拡大されているのかを取得する // ページの幅 ÷ 表示されている幅(この行だけでいいかな) var zoomer = document.body.clientWidth / window.innerWidth; // 以下で拡大率を目視できるでしょう alert( zoomer ); // 小数点がたくさんつくので、第二位までに丸め込
先日、ユーザーインターフェイスやグラフなどの機能を備え新しく登場したJavaScriptライブラリ「Kendo UI」を紹介しましたが、この分野で以前からある「Dojo Toolkit」も最新版の1.7がリリースされました。 DojoはDOM操作のためのAPIやアニメーション効果などの機能のほか、ユーザーインターフェイスのためのウィジェット、グラフ表示などの機能が含まれています。 モジュール構造になっており、性能向上のためにモジュールのロードは AMD (asynchronous module definition)と呼ばれる非同期になっているのが特徴とされています。最小構成のDojo Nanoは4KB以下の大きさだそうです。 Dojo 1.7で新しく追加された複雑なユーザーインターフェイスを持つグリッドと、グラフの例を紹介しましょう。 iOSやAndroidなどのモバイル専用に拡張した「
基本的にはjsfiddleメインなんですが、 依存するのが基本的に不安なのでロー カル環境で同じような環境を作りたか ったのですが、同様のサービスのJSBin がOSSで公開されてましたので試しに インストールしてみました。 まだちゃんと使うかは分かりませんけど、折角入れてみたので手順をメモ書き。 以前、ブラウザ上でjsを開発、URLを発行するjsfiddleをご紹介しました。jsDoitみたいなやつですね。 で、この2つ以外にも以前からJSBinっていう同じようなWebサービスがあるんですが、このJSBinがオープンソース(MIT)で公開されています。 見た目も自分用に使いやすく変えられるし、開発もスニペットの保管も出来るかなと思って、試しにローカル環境に入れてみました。 左側にJavaScriptコードやHTML、CSSを書けば、右側に結果として反映される、みたいなやつです。 JSBi
地味に良さそうだったので備忘録。画面 いっぱいに画像を広げてフェードエフェ クトでスライドショーを実装できるjQuery プラグイン・slideshowify.jsです。この 手のプラグインは沢山あるので選択肢 の一つとして・・ なんとなくよく見かけた画像のフルスクリーン表示を実装します。この見せ方は良い写真や画像なら飲食店やアパレル系などでは訴求力もあるし、よく見かけるのも当然といえば当然かもしれません。 キャプチャ見ても全然ピンと来ないと思いますのでSampleご覧下さい。 Sample 基本的には直接貼られた画像をスライド化します。※画像はmark sebastian氏より(CC-BY) 指定されたセレクタ外のコンテンツはpositionプロパティによって画像上に配置されている形となります。スライドしている画像はdisplay:none;を使用していますので各々の画像にリンクは貼れま
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
【jQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
AndroidブラウザのFlashPlayerの開発が終了したり、HTML5製の3Dコンテンツが出てきたりで、「Flash終わったの?」とか、「これからはFlashじゃなくて全部HTML5で作った方がいいの?」とか聞かれる事が増えてきたので、ちょっとまめとめてみました。 同じような境遇の方も少くないと思うので、参考程度にどうぞ。 AndroidブラウザFlashPlayerの開発終了について 残念なことにAndroidブラウザのFlashPlayerはバージョン11.1を最後に開発は終了することが発表されました。これについて「AdobeがFlashよりHTML5の方が優秀だと認めた」や「HTML5を推奨していたジョブズの完全勝利!」と考えている方もいるかと思いますが、実際のところどうなのでしょうか。 記事を参考に、開発終了の理由についてまとめてみました。 【参考記事】 ・ Clarific
実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.jpg" alt="" /></li> <li><img src="images/002.jpg" alt="" /></li> <li><img src="images/003.jpg" alt="" /></li> <li><img src="images/004.jpg" alt="" /></li> <li><img src="images/005.jpg" alt="" /></li> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く