株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
これは一見の価値ありな、1ページのJSサイト集:phpspot開発日誌
25 Creative Single Page Websites With Awesome JavaScript Effects 一見の価値ありな、1ページのJSサイト集がまとまってます。 1ページとはいえ、JSでページを1ページ内でスクロールするのでコンテンツは複数ページと同等です。 アイデアが秀逸なものが多くて感心するものが多いです MelissaHie ページがパネル風に分かれていて、ページ全体がダイナミックに移動するサイト DanteStyle 横にズラッとページが配置されていてアニメーションで切り替わる Webleeddesign ページが縦にスクロールされるのですが、そのアニメーションがなかなか秀逸です。 Howarths ページをめくる風のUIが実現されてます。 他にも色々あるので真似してみるのもよさそうですね。
透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた
以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。 今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。 ※追記（09/07/24） 若干修正し、2.1にバージョンアップしました。 （今までのでも問題なく動作します。） ダウンロード プラグインはjQueryと下記プラグインを一緒に使ってください。 opacity-rollover2.1.js 透明度を利用したロールオーバー これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。 ■使い方 $('#over1').opOver(); 適応させたいセレクタを指定し、opOver()で適応させる。 ■サンプルプレビュー これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わ
bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
スムーズに画像を拡大するかなり導入が簡単なJavaScript「FancyZoom」 - GIGAZINE
IE6/IE7/Firefox/Safariに対応しているJavaScriptで、使い方もかなり簡単でページにほとんど変更を加えずに導入可能。 また、リンクの先読みにも対応しており、画像の上にマウスが乗ったことを感知して自動的に先読みすることもできますので体感的にはかなり速度アップしているように感じます。 画像をズームする機能のみに特化しているため、ほかの余計な機能付きのライブラリよりも動作は軽いのも特徴で、クリックしてズームされた後にはちゃんとドロップシャドウ効果が付いたりするなど、芸も細かい。 実際のデモと詳細は以下から。 cabel.name: FancyZoom 1.0 上記ページの下の方にある「Example」に体感できる例があります。なかなか面白い。 で、実際に設置するにはまず上記ページ中にあるZIPファイルをダウンロードしたら解凍し、出てきた2つのフォルダをFTPソフトなどで
JavaScriptライブラリ「jQuery」関連サイト34 : skuare.net
twitter facebook hatena google pocket 米大統領選でクリントン氏と壮絶な攻防を繰り広げるオバマ氏のサイトでも使用されるなど、巷で大人気のjQuery。 今回はjQueryの関連サイトを紹介します。 追記： 2008/2/8 2サイト 2008/5/29 2サイト 2008/6/25 1サイト 2008/7/9 5サイト（jQuery UI系・Cheet Sheetを集めました） sponsors Reference ・jQuery リファレンス：v1.0.x、1.2.x ・jQuery 1.2 ドキュメント日本語訳 ・jQuery 開発者向けメモ：v1.1.x ・jQuery日本語リファレンス：v1.2.6 HowTo / Review ・jquery.jsを読み解く（追記：2008/2/8） ・jQueryの魔法 ・ニュータイプなJSライブラリjQue
[JS]jQueryのプラグイン33+1選 -2008年1月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jqzoom 画像の一部をズーム。 Shadowbox 複数のJavaScriptライブラリに対応したLightbox。 Faceb
IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基本的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
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
ウェブ上で使える何かと便利な変換ツールいろいろ | POP*POP
ちょこっとした作業をするときにウェブ上のツールは便利ですよね。今回はそうしたウェブ上のツールでも変換系をまとめて紹介している記事をご紹介。 ファイル形式の変換や、Favicon、カラーコードの変換ツールなどなど。知っていると便利ですね。 全部で39個あります。以下よりどうぞ。 ■ 高機能変換ツール Media-Convert とにかく機能が豊富なコンバーター。これ一つ覚えておけばいいぐらいです。テキスト、PDF、CSV、パワーポイント、音声、画像など。 txt2tags インデントなどで構造的に書かれたテキストをHTMLやLaTeXに変換してくれるツール。 Zamzar こちらも万能系。文書、画像、音声、ビデオなどについてさまざまなファイル形式の変換をサポートしています。 ■ 開発系変換ツール HTML Converter HTMLをPHP、Javascript、ASPに変換してくれます。
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』:phpspot開発日誌
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』 2006年10月01日- Transcorners ? Cornerus Pride is there *scared* Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn. CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』。 mootoolsをフレームワークとして使用しています。 次のように、左下の大きな角丸や、右上の一部切り取ったような角も簡単に実現できます。 大きな角丸を作るには、radiusというプロパティを大きく指定することで実現できます。 この
Javascriptで動的にアンチエイリアスな角丸を設定する:phpspot開発日誌
More Nifty Corners | Web Design | PRO.HTML.IT Nifty Corners are a combination of CSS and Javascript to get rounded corners without images. The technique is made up of four essential parts: 「Javascriptで指定のHTML要素を動的に角丸デザインにする方法」で紹介したNiftyCornersですが、このページで紹介されている方法を使えば、アンチエイリアスな角丸を設定することが出来るようです。 使い方はちょっと変わって、 Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); のようになっています。 第二引数と第五引数が追加される形になっています。
[JavaScript] JKL.Calender
Kawa.netxp [JavaScript] JKL.Calendar／ポップアップするカレンダー表示クラス JKL.Calendar は、ポップアップでカレンダー表示を行うクラスです。 2006年10月にクラス名を変更しましたが、2005年4月のリリース当初のクラス名 JKL.Calender も 別名定義してあるので、こちらも利用可能です。半年前にご指摘いただいた typo でした。 合わせて、選択可能な日付範囲指定用のプロパティ min_date／max_date を追加しました。 Yahoo! UI ライブラリのカレンダー機能がかなり強力なので、 最近なら YUI もオススメできそうですが、 実は JKL.Calendar の方が日本語環境では使いやすかったりするかもしれません。 JavaScript ソースのダウンロードはこちら： jkl-calendar.js JavaScr
CSSとJavaScriptで影付きの角丸ボックス要素を作る:phpspot開発日誌
Transparent custom corners and borders, version 2 | 456 Berea Street It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. CSSとJavaScriptで影付きの角丸ボックス要素を作る。 次のような２重線と影がついたボックスのサンプルが公開されています。 HTMLは次のようにシンプルな形に出来るようです。 <div class="cbb"> <h1>Transparent custom corners and borders, v
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
javascriptで作った、フルフラッシュのようなサイト教えてください。
今風のウェブを作る際に使えるCSS/HTML/JSのテンプレ『Easy Front-End Framework』 - 100SHIKI 〜 世界のアイデアを日替わりで
moto-mono.net
http://youmos.com/news/jsscrolling