Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
サイトにクールなポップアップのAjaxメニューをつけられる「PodiPodi」
キーワードは「Shift + Space」。コマンドを打つとその語句を含むメニューが現われます。コマンドは半角英数のみで実行可能ですが、それでもなかなかのもの。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! クールなAjaxメニューをつけられる「PodiPodi」 ここをクリックしてもメニューが出てきます。 メニューに設定可能なもの 「Shift + Space」を押した後に下記コマンドに含まれる語句を一字だけ半角英数で入力すると出てきます。 コマンド：Bookmarks あらかじめ設定したサイトへのリンク一覧を表示できます。 コマンド：Creditsあらかじめ登録した内容を表示します。 コマンド：Tell a friend友達にこのサイトをメールで教えてあげることができます。 コマンド：You
これはかっこいいぞ・・・スライドショーに激しく使えるjQuery用プラグイン『jQuery Cycle Plugin』 | i d e a * i d e a
ドットインストール代表のライフハックブログ
Javascript＆Ajaxの小技をまとめた便利サイトいろいろ | P O P * P O P
自分用のメモも兼ねてエントリー。JavascriptやらAjaxやらで何かやりたいときに便利そうなリンク集のまとめです。 Javascript Libraries 主要なライブラリーとエフェクト用の拡張機能、その他ツールなどです。まずはこちらからいろいろ試してみるのがよさげですね。 » Javascript Libraries Ajax Rain Ajaxの小技いろいろ集です。ちょっとしたスクリーンショット付きのこうしたリンク集は眺めていて楽しいですね。 » 485 + Ajax/Javascript/Dhtml examples and demos to download Mini Ajax こちらもAjax Rainと同様です。こちらも綺麗なサイトで眺めていて楽しいですよ。 » MiniAjax.com / A showroom of nice looking simple downl
Adobe製、AjaxでFLVを制御するオープンソース「Flash-Ajax Video Component」：CodeZine
Adobeは27日、Adobe Labsを通じて「Flash-Ajax Video Component」を公開した。BSDライセンスのオープンソースとして提供されており、サンプルソースをダウンロードすることもできる。なお、実行にあたってはFlashのグローバルセキュリティ設定の「許可」が求められる場合がある。 「Flash-Ajax Video Component」は、FLV（Flashビデオファイル）の実行をHTMLとJavaScriptのみで制御するコンポーネント。呼び出し側の制御に従い、コンポーネントがFLVを操作する。WebサイトにおけるFLVの実行はswfファイルを通じて行われることが多いが、このコンポーネントを使うことで、HTMLベースのWebサイトにおいても、Flashビデオを再生するのが容易になる。 サンプルソース 「favideo_072707.zip」にはサンプル
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
LightBoxライクに同一ページ内の要素をポップアップするライブラリ:phpspot開発日誌
Leightbox I've changed ParticleTree's lightbox functionality to allow the use of inline div's instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. 同一画面内でポップアップウィンドウを開くGreyBox というのを先日紹介しました。 GreyBoxはポップアップ内容をJavascriptとIFRAMEを使って動的にページにロードしていましたが、 LeightBoxではページ内HTMLに記述されている特定のdiv要素をLightBox風にポッ
prototype.js v1.5.0 の使い方
それは何？ prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。 もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。 加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。 ここで提供する例とリファレンス
ページ内リンクでスムーススクロール: 縞馬が行く
[ajax] ページ内リンクでスムーススクロール で紹介されているスクロールがかっこいい！ 設置しようとがんばったけど，すでに「onclick」が設定されているリンクは適用されないことが判明。 改造する方向でソースを眺めるまではしたけど，私のjava能力ではそれもムリと判断。むしろ…と，スクロール自身を自作したのが以下。 IE6とFirefox1.5で確認。 function SmoothScroll(targetID){ if( !document.getElementById ) {return true;} var step=10; //初速度 var max=400; //最高速度 var accel=4; //加速度 var interval=30; //加速インターバル var current_y = document.body.scrollTop || document.do
Interface.jsで簡単スムーススクロール - Emotional Web
This domain may be for sale!
JavaScript/ウィンドウ/サブからメインウィンドウを操作する - TAG index
サブウィンドウ内のアクションで、メインウィンドウ（親ウィンドウ）を操作するスクリプトです。 （例：サブウィンドウ内のリンクでメインウィンドウ内のページを切りかえる） メインウィンドウのソース <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- // サブウィンドウを開く処理 function disp(url){ window.open(url, "window_name", "width=250,height=350,scrollbars=yes,resizable=yes,status=yes"); } // --> </script> </head> <body> <p><a href="example_sub8.html" target="window_name" on
第1回 JavaScriptの復権 3．「Firebug」によるJavaScriptのデバッグ － ＠IT
■Firebug（http://www.getfirebug.com/） FirebugはFirefoxで提供されるエクステンションの1つで、Firefox上でブラウズしているページを解析し、構造を階層表示／編集したり、HTTP通信（XMLHttpRequestオブジェクトによる通信を含む）にかかった時間や、その内容を確認したりするための機能を提供する。 また、JavaScriptのステップ実行など、簡易なデバッグ機能が提供されていることからAjax開発にも威力を発揮し、昨今、とみに人気を博しているツールだ。Firefoxの拡張機能であるので、Firefoxを利用していれば、簡単なウィザード操作のみで導入できるのも人気の1つだろう。 Firebugの実行画面 現在Firefox上で表示しているページの階層構造やスタイルの適用状況を確認、その場で編集することが可能（上）。また、ページ読み込み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
文字を隠すように貼るシールを表現するJavaScript*ホームページを作る人のネタ帳
WEB制作者が一度は触ってみておくべきオープンソース『Ext』*ホームページを作る人のネタ帳
http://youmos.com/news/iefixed_htc
http://youmos.com/news/protoload_js
IEでアルファチャンネルPNGを表示する （iepngfix.htc） - youmos
http://blog.crara.cc/archives/173
ドラッグ＆ドロップAjaxの遊べるライブラリ６個*ホームページを作る人のネタ帳
