Illustration by Jon Raasch | Art & Design Portfolio
'Alien Abduction' 2012 Self portrait - UFO abducting my thoughts which end up being a bunch of bullshit brands. Watercolor brushes and outer space. 'Deemeetree, King of Cats' 2012 Portrait of Deemeetree. Hand drawn illustration overworked in Photoshop and Illustrator in a textured French style. 'Cuckoo Clock' 2012 This bird is trying on a new cuckoo clock medallion. When the clock strikes 4:00 he
フリップが回転するjQuery Plugin用プラグイン QuickFlip | バシャログ。
QuickFlipは、フリップが回転するような感じで表示するコンテンツを切り替えるプラグインです。 設置方法 配布ページよりデータ一式をダウンロードし、QuickFlipを利用したいhtmlのhead要素などで以下のファイルを読み込みます。 <script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="quickflip.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="quickflip.css" /> 表示する部分は以下です。 <div class="quickFlip"> <div class="quickFlipPanel"> <p> Front content here
Simple jQuery Spy Effect | jQuery for Designers - Tutorials and screencasts
Posted on 2nd December 2008 — A few years ago Digg released a very cool little visualisation tool they dubbed the Digg Spy (it’s since been upgraded to the Big Spy). Recently Realmac Software released the site QuickSnapper to accompany LittleSnapper. It’s the QuickSnapper site (the left hand side) that makes use of the similar spy technique that I’ll explain how to produce. Earlier: Fun with Overf
より良いフォーム作りの参考になるフォームのサンプル＆ライブラリ集:phpspot開発日誌
16 Free Ajax Contact Forms - For A Better User Experience Contact forms are the most common bridges between readers & site owners whether it is a blog or an e-commerce site. より良いフォーム作りの参考になるフォームのサンプル＆ライブラリ集。 JavaScript, Ajax等を使い、バリデーションやフォーム入力のしやすさなどについて考えられたフォーム集がまとまってました。 LightForm - Demo - ファンシーなフォームデザインにクールな入力チェック Proto Form - 入力チェック機能や現在位置強調機能 jQuery - Ajax Contact Form (Tutorial & Files) - D
魅力的なウェブサイトを作成するために知っておくと便利な9つのスクリプト - GIGAZINE
個人的なウェブサイト作成や仕事としてウェブサイトを作成している人だけでなく、何かのサイトを発注して作ってもらう際などにこういうのを知っておくと、かなりはっきりと具体的なイメージを相手に伝えやすくなるので、スムーズにコミュニケーションできるはずです。あるいはクライアントにこれらのリソースの存在を認知してもらうことで、話が進めやすくなるかもしれません。 というわけで、魅力的なウェブサイトを作成するために知っておくと便利な無料の各種スクリプトは以下から。 Woork: Useful resources and tutorials for developing stunning web sites 1. ModalBox http://www.wildbit.com/labs/modalbox/ Web2.0スタイルのダイアログボックスなどを表示させることができます。Mac OS Xのダイアログボ
FlashではなくjQueryで！インパクトのあるUIを作ろう (1/5)
もう間もなく投開票を迎える米国の大統領選挙。候補者である共和党のジョン・マケイン氏、民主党のバラック・オバマ氏の両者のWebサイトを見ると、インターネットを重要な選挙ツールとして位置づけていることが伺えます。ネットを使った選挙活動が制限されている日本とは事情が異なるせいもあるでしょうが、両者ともに公式サイトの充実ぶりがすごいのです。ブログや動画の活用は当たり前。グッズのネットショップや、サポーター向けのコミュニティ機能など、ちょっとしたポータルサイトのような凝った作りです。 そんな気合の入ったWebサイトだけに、デザインの面でも参考になる面が多々あります。今回は特に、Ajaxを活用したユーザーインターフェイスを持つ、オバマ候補の公式サイトをお手本とさせていただきましょう。 今回のお手本サイト： 『Barack Obama and Joe Biden』 11月4日に開催される米国大統領選挙に
[JS]jQueryのプラグイン33 1選 -2008年10月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 ListNav リストの高機能なナビゲーションを作成。 Scroll your HTML ホイールにも対応した高機能なスクロールする
jQuery ListNav Plugin
This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indi
[JS]ドロップ、ドラッグ、ホイール操作などマウスイベントを強化するスクリプト | コリス
Three Dub Mediaから、ドロップ、ドラッグ、マウスオーバー、ホイール操作などマウスイベントを強化するスクリプトを紹介します。 スクリプトはすべてjQueryのプラグインのため、動作にはjquery.js 1.2.6+ が必要です。 $.event.special.drop ドロップのスタート・操作中・終了のイベントを取得します。ターゲットの判定にはマウスが触れた時・対象物が触れた時・収まった時などを取得します。 要：jquery.event.drag
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
Flip! A jQuery plugin
Flip is a jQuery plugin to apply flip animation to any element.0.4.1 Fixed some regression in Chrome and Safari 0.4 Fixed some bugs with transparent color. Now Flip! works on non-white backgrounds! 0.3 Added the content setting: now you can define the next content of your Flip!box. 0.2 Fixed jQuery chainability and buggy innerText rendering (Thanks xNephilimx for your tips!) 0.1 Kick off
[JS]ナビゲーションの背景画像をアニメーションさせるスクリプト
Snook.caのエントリーから、「ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2」のように、ナビゲーションの背景画像にさまざまなアニメーション効果つけるスクリプトを紹介します。 Using jQuery for Background Image Animations デモ デモでは、上下のアニメーション、左右のアニメーション、フェードのアニメーションがあります。 スクリプトにはjQueryがメインに使用されており、それぞれのアニメーションは下記のように記述されています。 「#a」は上下、「#b」は左右、「#c, #d」はフェード。 <textarea name="code" class="js" cols="60" rows="5"> $(function(){ $('#a a') .css( {backgroundPosition: "-20px 35
[JS]注目させたい箇所にユーザーの視線を集めるスクリプト -Seek Attention
Seek Attentionは、画面をグレーアウトさせ、注目させたい箇所にハイライトやアニメーション効果を利用して、ユーザーの視線を集めるスクリプトです。 Seek Attention 注目させたい箇所がブラウザの表示領域外の時は、表示領域内に自動でスクロールされます。 オプションでは、グレーアウト箇所の指定（全体・一部）・色・不透明度・フェードのタイミングが調整可能で、ハイライト箇所のアニメーションの有無・領域のpaddingなども設定することができます。 Seek AttentionはjQueryのプラグインのため、動作にはjquery.jsが必要です。
jQueryやCSSを使ったナビゲーションメニュー300選 – creamu
かっこいいナビゲーションメニューをさくっと実装したい。 そんなあなたにおすすめなのが、『300+ Jquery, CSS, MooTools and JS navigation menus』。jQueryやCSSを使ったナビゲーションメニュー300選だ。 以下にいくつかご紹介。 » Fancy menu かっこいいナビゲーションメニュー » Amazing apple style navigation menu Appleのサイトのようなナビゲーションメニューの作り方。↑のキャプチャはこちら » jQuery idTabs 8つのクールなjQueryメニュー » navigation-3 プルダウンメニューなど4つの例 » block-navigation CSSデザインのメニュー9選 その他のリストは以下から。 » 300+ Jquery, CSS, MooTools and JS na
MopSliderDemo1
<link rel="stylesheet" type="text/css" href="mopSlider/mopSlider.css"> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/ui.core.js"></script> <script type="text/javascript" src="../js/ui.draggable.js"></script> <script type="text/javascript" src="../js/jquery.pngFix.js"></script> <script type="text/javascript" src="mopSlider/mopSlider-1.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]省スペースにフェードと自動スクロールで表示するスクリプト -Simple Spy
http://style.arflex.co.jp/tre_ambienti/index.html
[JS]画像をダイナミックにズームイン・ズームアウトするスクリプト -danceFloor.js | コリス
[JS]画像を溶け合うように切り替えられるスクリプト -CrossSlide