[JS]シャドウをふんわりとアニメーションで変化させるスクリプト -Shadow animation
CSS3のbox-shadowで適用したシャドウをふんわりとアニメーションで変化させるjQueryのプラグインを紹介します。 ボタンなどにシャドウを使用した際には、よりリアルな効果を与えることができます。 Shadow animation jQuery plugin デモページ [ad#ad-2] アニメーションで変化できるのは、CSS3のbox-shadowで指定できる表示位置（X軸オフセット・Y軸オフセット）、ぼかしの半径、シャドウの半径、カラー、となっています。 各デモのスクリプトでの指定は下記のようになります。 JavaScript：左端 onmouseoverで、ぼかしの半径を30ox、カラーを#44fに $('#box1').animate({shadow: '0 0 30px #44f'}); JavaScript：真ん中 onmouseoverで、ぼかしの半径を50pxに
[JS]簡単な記述で、軽快で滑らかなアニメーションが実装できるスクリプト -JSTween
オブジェクトの移動や拡大・縮小、不透明度の変更、CSS3のシャドウや角丸などを滑らかアニメーションで簡単に実装できるjQueryのプラグインを紹介します。 アニメーションのエフェクトは、31種類！ JSTween [ad#ad-2] JSTweenの特徴 JSTweenのデモ JSTweenの使い方 JSTweenの特徴 軽快に動作し、パフォーマンスに優れています。 アニメーションを使った複雑なインタラクションが実装できます。 フレームレートを使ったスムーズなアニメーション。 実装はjQueryベースで簡単。 簡単に始められ、シンプルに実行できます。 JSTweenのデモ
CSS3で作るダイナミックな3D表現 (1/2)
ダイナミックに切り替わるページナビゲーション 一見するとシンプルなデザインのサイト「HUMAAN」。その魅力は、細部まで作り込まれたインタラクションにある。中でも目を引くのが、フルスクリーンで展開されるダイナミックな変形アニメーションだ。何気なく下部のメニューをクリックすると、ページ全体が大きく回転しながら切り替わる。その動きが非常に気持ちよく、コンテンツをうまく魅せる素敵な仕掛けだ。 この3D回転は、連載第1回「CSS Transitionsを使った3Dロールオーバーのアイデア」で紹介した3D変形と同じ仕組みで実装されている。今回は、3D回転によるダイナミックなコンテンツ切り替えについて、第1回の記事をヒントに再現してみよう。 STEP 1：3Dの構造を考える 最初に、ページ全体を回転させるため、ウィンドウと同じ大きさの2つの面（div要素）を用意し、transformプロパティで変形さ
jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
フォトブック・フォトアルバム作成なら写真を送るだけできる「おまかせ！フォトブック」
ウェディングフォト：結婚式の最高の瞬間をとらえ、一生の思い出にしましょう。 誕生日や家族写真：誕生日や家族の記念日を撮影いたします。私たちの専門家チームが、あなたの人生の最高の瞬間をしっかりと捉えます。 商品写真：ブランド認知度を高め、市場にあなたのビジネスを紹介するための魅力的な写真が必要な場合、私たちはそれを実現することができます。 ボーナスプログラムや人気のゲームまでインターカジノのあれこれを解説しているサイトはココ！ 写真は、最も印象的な出来事を記憶し、記録することができます。しかし、ほとんどのカジノは写真撮影の規制が厳しいことで有名です。そのため、カジノでの写真撮影は禁止されていることが多いです。しかし、記念になるような写真を撮ることができないわけではありません。 撮影の仕方を知っていれば、トラブルに巻き込まれることなく、カジノで自分や友人の写真を撮ることができます。どうすればよ
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
jQueryの可能性を知りたいなら・・・『jQuerySTYLE』 | 100SHIKI
最近はよくjQueryを使うのだが、他の人がどんな風に使っているかに興味がある。 もしあなたが同じように思っているならjQuerySTYLEが参考になるだろう。 このサイト、jQueryが使われているサイトのギャラリーである。 また、それぞれのサイトでjQueryのどの機能（Ajaxだとかナビゲーションだとか）が使われているかもアイコンで一目でわかるようになっている。自分の興味にあわせて覗いてみるといいだろう。 自分が使っているものを他の人がどう使っているか。そんなことに気づかせてくれるこうしたサイトはいいですね。
FICC | デジタルエージェンシー
LEADING BRANDS TO DIGITAL WE ARE A DATA-DRIVEN MARKETING AGENCY FICCはデータに基づく論理的なマーケティングを提供するデジタルエージェンシーです。 消費者に価値あるコンテンツと体験を届けるため、戦略立案から施策実行まで一貫して提供しています。
[JS]シャドウにもこだわった、滑らかで美しいアニメーションでページをめくるスクリプト -BookBlock
Demo 3 BookBlockの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト、そしてスワイプイベント用に「jquery++」を外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquerypp.custom.js"></script> <script type="text/javascript" src="js/jquery.bookblock.js"></script> Step 2: HTML 各ページはdiv要素で実装し、それらをdiv要素で内包します。 <div id="b
[JS]これは楽しい！FPS値の設定もできるスプライトベースのアニメーションを作成するスクリプト -Motio
FPSとはFrames Per Secondの略で、1秒あたりのフレーム数のことです。 このFPS値やスピードを簡単に調整できるCSSスプライトベースのアニメーションを実装できるjQueryのプラグインを紹介します。
[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap
Event Capturing 各イベントを取得することもできます。 jQuery.panelSnapの使い方 Step 1: 外部ファイル スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.customEvents.js"></script> <script src="/path/to/jquery.panelSnap.js"></script> </head> Step 2: HTML コンテンツは一つずつsection要素（変更可能）で並列に配置します。 スタイルシートは各コンテンツ自由にしてください。 <body> <section>コンテンツ：1</section> <section>コンテンツ：2</sect
[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
[JS]ページ内アンカーをidだけでなくclassや要素にも指定できるスクリプト -Arbitrary anchors
通常のハッシュリンクと違い、#のすぐ後に「.」があります。これは、そのclassをもった最初の要素にリンクしています。 また、右端の「#.hello｜5000」はスクロールの速度を設定しています。 リンクのパターンはさまざまなものがあり、各所に利用されています。 Arbitrary anchorsの使い方 実装は簡単で、classのリンクやスピード調整だけでなく、通常のハッシュリンクでもアニメーションでスクロールさせることができます。 Step 1: 外部ファイル head内に、jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript
[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll
「Easing Effect」には3つのデモがあります。 「easeInOutBack」一旦逆にスクロールし、目的地をちょっとだけ通りすぎて戻って到着。 「easeOutBounce」目的地につくとバウンドで到着。 「easeOutElastic」はeaseInOutBackを素早くした感じです。 AnimateScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に記述します。 <head> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="animatescroll.js"> </head> Step 2: HTML（スクロール先の設定） スクロール先の要素にidやclassを付与します。 ※ペー
jQueryで作るAmazon流リキッドレイアウト (1/5)
国内外を問わず、多くのECサイトがお手本とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」（回転表示するスライドパネル）の作り方を紹介しましたが（関連記事）、Amazonは優れたユーザーインターフェイス（UI）の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模
[JS]jQueryのプラグイン33 1選 -2011年6月 | コリス
galleryFocus フォーカスした周辺をアニメーションでフェードさせ、中心をくっきり見せるギャラリー。 [ad#ad-2]
[JS]jQueryのプラグイン33+1選 -2008年6月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 iPod-style Drilldown Menu iPod風に切替わるドリルダウンメニュー。 iPhone Lock Slider
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
わずか3STEP！誰でも簡単にjQueryを使ったLightboxギャラリーを作成出来るソフトウェア・Jquery Photo Viewer
なかなか面白い試みだったので 備忘録。現在数多くのjQueryを 使用したギャラリーが存在し、その 中には多くのLightbox風ギャラリー が存在します。今日、ご紹介する のはそんなギャラリーを作成する ソフトウェアです。 jQueryを使用したギャラリーを作成するジェネレーターになりますね。ちょっとこの発想はありませんでした。 オンラインのジェネレーターではなく、ローカル環境で動かすソフトウェアです。使い方も凄く簡単ですよ。 言語も日本語に対応しています。 わずか3STEPで作成出来ます。 STEP.1 使い方はDLページにも書いてありますが、簡単にご紹介。おそらく直感で作成出来ます。ソフトウェアをDLしてセットアップすると上記画面が立ち上がります。ここにギャラリーにしたい画像をドラッグ＆ドロップしていきます。 STEP.2 画像を決めたら、上部のPublishをクリックします。すると
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Excelのカラースケール風にHTMLのtableを見やすくするjQueryプラグインを作ってみた | 初代編集長ブログ―安田英久
