デモページ：ダイナミックに重ねたりもできます Barajaの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。スタイルシートはhead内に配置します。 <link rel="stylesheet" type="text/css" href="css/baraja.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.baraja.js"></script> HTML 各アイテムはリスト要素で、画像や見出し・テキストを自由に配置できます。 <ul id="baraja-el" cl

Move Elements with Style Quickly convert simple, semantic HTML structures into a sexy interactive turntables! Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!) In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after som

普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.js - The jQuery Slider Plugin with Infinite Style [ad#ad-2] Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴 エレメント単位で設定できるCSS3アニメーションを使ったスライダーです。 オープンソース。 すべてのモダンブラウザをサポート。 スマートフォンなどのタッチデバイスをサポート。 古いブラウザでも機能します。 ※IE7とFirefox3.6でもテスト済み。 セマンティックなマークアップ。 Responsive Web Des

Greetings, Earthling — We’re ZURB, a team of designers, researchers and nerds that help companies design better products, websites and services by using user data. Chart Your Course Our team of design veterans love building complex digital products and integrated services. We'll help you navigate and discover valuable insights that will unlock huge breakthroughs for your organization.

CSS3アニメーションを使って、ダイナミックなスライドやフェードのアニメーションでページ（コンテンツ）を切り替えるテクニックを3つ紹介します。 Demo 3 Demo 3は左からスライドのアニメーションで切り替わります。 実装 デモは一見、Homeを含む4ページで構成されているように見えますが、1ページで作成されています。 HTML HTMLはdiv要素で配置したコンテンツが4つ、ナビゲーションが1つの構成です。 コンテンツはそれぞれ異なるidとclassを付与します。 <!-- Home --> <div id="home" class="content"> <h2>Home</h2> <p>Some content</p> <!-- ... --> </div> <!-- /Home --> <!-- Portfolio --> <div id="portfolio" class="p

デモページ: Timing, Reversed 上のデモでの逆順です。 Circle Menuの使い方 HTML 各アイテムはリスト要素です。 <ul> <li><a href="#">+</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jQuery.circl

Creative CSS3 Animation Menus Experimenting with CSS3 Transitions & Animations

画像だけでなく、ページ内のさまざまな要素をダイナミックなアニメーションでズームイン・アウト、回転させるjQueryのプラグインを紹介します。

iPhone 4Sの販売が開始されてから2週間ほどが経過しようとしている。すでにiPhone 4Sを入手して、その高速さやiOS 5の新機能を堪能しているユーザも多いだろう。Webデベロッパ/Webデザイナとしてはここで、iPhoneそのものではなく、iPhoneの公式サイト「iPhone 4S」の上部に用意されているスライドに注目したい。ここは次のようにスライドが順繰り移動するアニメーションになっている。 Apple - iPhone 4S - The most amazing iPhone yet. のスライド1枚目 Apple - iPhone 4S - The most amazing iPhone yet. のスライド2枚目 Apple - iPhone 4S - The most amazing iPhone yet. のスライド3枚目 Apple - iPhone 4S -

画像にPNGマスクを使用して、ブラシストローク状、サークル状など、矩形とは異なる形状で表示するチュートリアルを紹介します。 デモページ もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。 Roundfolio 画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。 [ad#ad-2] 画像の作り方 画像は3種類が必要で、全て同じサイズにします。 ロールオーバー用の画像 ※透過PNG画像 マスク用の画像 ※透過PNG画像 ベースとなる画像 サークル状に使用する画像3種類 制作：HTML, CSS, JavaScript HTML ロールオーバーとマスク用に2つの空span要素を使用します。 <a href="images/gallery-full.jpg

jQuery Timelinr [ad#ad-2] Timelinrのデモ Timelinrの実装 Timelinrのデモ デモでは、水平レイアウト、垂直レイアウト、オートプレイの3種類があります。 スライドのアニメーションもかっこいいですが、パネル表示時のズームもいいですね。 デモ：オートプレイ [ad#ad-2] Timelinrの実装 HTML 時間とパネルをそれぞれリスト要素で実装し、divで内包します。 「#timele, #dates, #issues」はデフォルトの設定です。 <div id="timeline"> <ul id="dates"> <li><a href="#">date1</a></li> <li><a href="#">date2</a></li> </ul> <ul id="issues"> <li id="date1"> <p>Lorem ipsum.

なかなか良さそうだったのでメモ。 例によってIE6は上手く実装できて いませんでしたが、cssハックでも 使えばなんとかなるかな・・見た目 もクールで素敵なのでどこかで 使いたいです。 マウスオーバーすると右側は横へスライドしてパネルがドロップダウンします。アニメーションはjQueryで実装しているみたいなのでIE7,8等でも滑らかに動いてくれます。css3で動かしてるとIE全部だめですからね・・ Large Drop Down Menu 見た目も素敵。ドロップダウンしてくるメニューもデザインされているのでなかなか使う場面もありそうです。IE6では表示が崩れていましたが、動きそのものは実装出来ていたのでcssだけ対応すればなんとかなりそうな予感です。 マウスを乗せていない状態です。普通のメニューですが、マウスを乗せることで項目がスライドしますよ。ユーザーにとっても分かりやすそうですね。 j

This presentation is an HTML5 website Press → key to advance. Zoom in/out: Ctrl or Command + +/- Having issues seeing the presentation? Read the disclaimer HTML5* Web Development to the next level *Including other next generation technologies of the Web Development stack Rough Timeline of Web Technologies 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tablel

html5 スライドだけど、 一切 Google API など使わずに、純粋に html5 + JavaScript でかけることがわかった。 Webに置く必要もない。ローカルファイルとして動く。 外部の API やよけいな JS や CSS を読み込む必要なし。 ただ全部コードを読んで、 JavaScript のコードが body 要素の最後に書かれていたので、見落としていたのでした。 var currentSlideNo = 1; var slides = document.getElementsByClassName('slide'); (function() { document.addEventListener('keydown', handleBodyKeyDown, false); var els = slides; for (var i = 0, el; el = els[