まるでフルFlashなjavascriptを使用したWebサイト集めてみました[日本編] 最近はjavascriptで表現できることが増え、前まではFlashでしかできなかった効果もできるようになりましたね。 ということで、マウスオーバーや画面遷移でアニメーションしてるとか、ちょっと変わったレイアウトをjavascriptやっているサイトを集めてみました。 投稿日2011年05月19日 更新日2011年05月30日
![まるでフルFlashなjavascriptを使用したWebサイト集めてみました[日本編]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2af3fd7a8f5f909f22826d83073f10812b6f854a/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2011%2F05%2F110519_s.jpg){kind=tracking}
まるでフルFlashなjavascriptを使用したWebサイト集めてみました[日本編] 最近はjavascriptで表現できることが増え、前まではFlashでしかできなかった効果もできるようになりましたね。 ということで、マウスオーバーや画面遷移でアニメーションしてるとか、ちょっと変わったレイアウトをjavascriptやっているサイトを集めてみました。 投稿日2011年05月19日 更新日2011年05月30日
バナー配信とかでよくあるアレです。flash が使える環境の場合には Flash で広告を配信して Flash が使えない環境の場合には画像を表示するってヤツです。 Flash まわりにあまり詳しくない僕のところにそんな要望が来ました。 ちょっと調べてみたら、やっぱりライブラリが存在していました！ ヽ(＾A＾ )ﾉ ラッキー☆ Embedding Adobe Flash Player content using SWFObject 2 ってライブラリです。GoogleCode 上で公開されています。 さらに嬉しいことに、「SWFObject v2.0 ドキュメント日本語訳 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ」で日本語訳が公開されていますので、英語が苦手な方でも安心ドキュメント。※最新のドキュメントより若干古いような気がするけど・
Flashの周りに枠が表示されたり、クリックして有効化しろという指示が出たりしてましたが、あれってその後どうなったんでしょうね。 最近そういう動作が発生するようなFlashは見てないですし…。まぁ、古い話ですし、ほとんどのサイトさんでJavascriptを使う方法で呼び出しているんでしょうね。 一応続きに忘れないようにメモ。 javascriptファイル（名前を仮にflash.jsとする） document.open();document.writeln('<embed src="Flashファイル名.swf" mce_src="Flashファイル名.swf" width="Flash横サイズ" height="Flash縦サイズ" bgcolor="背景色" wmode="opaque" type="application/x-shockwave-flash" />'); docu
最近ではAjaxの流行もあり，JavaScriptのライブラリがかなり充実していますね。これらのライブラリの関数を始めとしたJavaScriptの関数を，Flashムービーから呼ぶことができれば，Flashムービーだけでは実現が難しい処理も意外に簡単にできてしまうこともあります。 ムービーを表示しているHTMLドキュメントのURIを取得する あけましておめでとうございます。本年もよろしくお願いいたします。 さてさて，図1のムービーでは，ムービーを表示しているHTMLファイルのURI（URL）を表示しています。 図1：ムービーを表示しているHTMLファイルのURIを取得するムービー（クリックするとムービーを表示します） Flashムービーでは，ムービー自身のURIは「_urlプロパティ」を使って取得できますが，ムービーを表示しているHTMLファイルのURIまでは取得できません。では，図1のム
最近PopUpに変わって需要の出てきたレイヤー。写真を載せるのはよくありますが、そのFlash版を誰でも簡単に使用できるスクリプトを組んでみました。 最近写真をレイヤーで見せるのが流行ってますよね。（POPUPブロックの影響によるPOPUP代わりみたいなものでしょうが。） そういうものはJavaScriptが結構公開されているのですが、FLASHはないですよね。（使用したもの自体、見ることもまだあまりないですね。） そういうわけで組んでみました。 まずは下記URLをご覧ください。 http://www.muraken.biz/overlay/overlayflash.html（”ここをクリック"のところをクリックしてみると、実行されます。） 今回、これを簡単に作れるスクリプトを組みました。 JavaScriptに関しては文末にてソースを置いておきますが、説明するとかなり長くなるので割愛いた
DIV要素をクロスフェード このところバタバタしておりまして…。ストックネタという訳でもないんですが、今回はかなり定番の結構便利なスクリプトを紹介してみます。 「Flashを使うまでもないんだけど、ちょっとした演出が欲しい…」という時などにはうってつけです。 「Brand Spanking New」で紹介されている「Crossfader.js」というスクリプトです。ご存知の方も多いかもしれないですね。 このスクリプトの優れている所は、画像ではなくDIV要素に対してクロスフェードさせられるトコロです。…なので、使い方を工夫すれば、いろいろと凝ったアプローチができると思います。しかも、設置は至って簡単！使わない手はないでしょう。 とりあえず、サンプルです。 ↑このデータはこちらからダウンロードできます。 だいたいはソースを見てもらえば分かると思いますが、 クロスフェードさせたい項目ごとに<di
15 24 08 2007 Ajax画像イメージギャラリー＆スライドショーのまとめ7選 Samples, Ajax 仕事で調べる機会があったので、実用的に使えそうな物をピックアップ Sample - Highslide JS サムネイルからポップアップで原寸表示ギャラリー、Keyboardからもコントロールできます。HTML、Flashの表示も可能 Sample - ThickBox 3.1 画像のほかにもHTML、IFRAM、INLINEコンテンツに対応しています。jQueryライブラリ使用。 Sample - Fading Slideshow 1ページ型 大きめの画像スライドショーなんかに良さそうです。prototype.js scriptaculous.jsを使用 Sample - JonDesign’s SmoothGallery 埋め込みスライドショー型 Sample
57 Free Image Gallery, Slideshow And Lightbox Solutions | 1stwebdesigner - Love In Design 画像ギャラリーを作る際に使えるFlashやJavaScriptを活用したライブラリ＆サンプル集が公開されていました。 3Dを使った物や、ＵＩ的に面白い物が色々あって、ちょっとしたサプライズを持った画像ギャラリーなんかを作るのに活用できそう。 3D Curve Wall スムーズかつ立体的に動作する感じで次世代を感じさせる Spiral Carrousel XML 使いにくいけど立体的で面白い動作をします Polaroid Gallery 机の上に置いた写真をマウスで移動できる面白いＵＩ TiltViewer マウスの動きによってギャラリーが傾くという面白いＵＩ。デザインや動きが秀逸。 Galleriffic Sl
Dynamic Page Flip v2 from shift control Based on the popularity of my original adaption of Macc’s page flipping engine, I’ve gone back and made several major improvements to the dynamic page flip files: Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」。 Webページだけど、本を見るみたいなＵＩにしたいっていう需要はなかなかあるんじゃないか、と思っていたのですが、そんなＵＩを実装するためのFlashサンプルが公開されました。 次の画像のように、マウスでページの右端をドラッグ＆ドロップでページをめくれます。 本の中身は自由に書き換えることができるの
Deziner FolioBlog Archive dfGallery 1.003b Flashを使った超高機能クールフォトギャラリー「dfGallery」 dfGalleryを使えば次のようなフォトギャラリーを簡単に作れるようです。 右下のボタンでフルスクリーン表示することも出来るようで、他のスライドショーギャラリーと違って便利。 やはり写真は大きなサイズで見たいですね。 動作がFlashなので非常になめらかに表示されます。 Flickrの写真を読み込めたり、プリントスクリーンを許可/非許可する設定にできたり、リキッドレイアウトだったり、バックグラウンドサウンドをMP3で再生できたりと、スライドショーアプリの決定版か？と思われるほど高機能。写真の読み込みはXMLで読み込めるので簡単ですね。 スライドショーアプリを実装するならこれだ、と思わせられる程の品質に驚きでした。
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
個人的なウェブサイト作成や仕事としてウェブサイトを作成している人だけでなく、何かのサイトを発注して作ってもらう際などにこういうのを知っておくと、かなりはっきりと具体的なイメージを相手に伝えやすくなるので、スムーズにコミュニケーションできるはずです。あるいはクライアントにこれらのリソースの存在を認知してもらうことで、話が進めやすくなるかもしれません。 というわけで、魅力的なウェブサイトを作成するために知っておくと便利な無料の各種スクリプトは以下から。 Woork: Useful resources and tutorials for developing stunning web sites 1. ModalBox http://www.wildbit.com/labs/modalbox/ Web2.0スタイルのダイアログボックスなどを表示させることができます。Mac OS Xのダイアログボ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
