スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 Cycle.js Cycle.js -GitHub 対応ブラウザは下記の通り。 IE8+ Chrome Firefox Safari Opera TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。 いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。 Cycle.jsのセットアップ Cycle.jsのバリエーション Cycle.jsのセットアップ ベースとなるHTMLは非常にシンプルです。 スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。 <title>Cycle.js</titl

THEは、水野学さん率いるプロダクトデザイン会社です。tween.jsが使われ、モーションと余白のとても美しいサイトになっています。 アイコンには、WebフォントであるWeb Symbols typeface、font-familyにはGeorgiaとヒラギノ明朝 Pro W3、構成は1ページのスクロール構成となっています。 THE WEB

水平・垂直に配置したパネルをイージングやバウンドなどの滑らかなアニメーションで伸縮させるjQueryのプラグインを紹介します。 Kwicks for jQuery Kwicksは元来、MooToolsのエフェクトでしたがjQuery用にし、アニメーションのスムーズさ、コントロール、イベントのインタラクションなどを改善するために今回ゼロからリライトされました。 Kwicksのデモ Kwicksの使い方 Kwicksのデモ デモでは6種類のKwicksの動作を楽しめます。 対応ブラウザは、IE7+, Firefox3.6+, Chrome12+, Safri5+, Opera11+です。

[Fixnel] iOS風スクロールを実現するライブラリを書いてみた カテゴリ：Javascript関連 2012年9月23日 17:38 iOS風スクロールライブラリ、名前は「Fixnel」 最近の案件で、ライブラリを使用すること自体がNG、というケースの案件があり、そういう場合でも対応できるよう、iOS風スクロールをさせるライブラリ を自前で書いてみた。発端がそういう状況なので、もちろんどのライブラリにも依存していない。このライブラリ単体で動作します。 ちなみに名前の由来ですが、hogehogeスクロール的なものはなんか色々出ているので、どうせならまったく違う名前を、っていうことと、"fix" と "panel" を組み合わせた造語になっていますｗ [デモ、詳細はこちら] [Downloadはこちら] GitHubページを初めて作ってみた さて、今回のライブラリはGitHubにて公開中

lenticular.js - tilt-controlled images iPhoneの傾きで画像を回転させられるようにする「lenticular.js」 パソコン、iPhoneの両方で見て頂きたいですが、iPhoneでアクセスした場合はiPhoneの傾きと同時に画像が回転。 パソコンで見ればマウス位置に応じて画像を回転させることができます。 近い未来のECサイトではこういう形で商品を見ることができるようになっているのかも。 今後、他にも傾きを使って色々とWEBサイトもどんどん便利になっていくのかも 関連エントリ iPhoneアプリ作成に使えるPSD素材集１０ iPhone風のあのスクロールをPCでも実現できる「jQuery.flickable」 iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート

Move#ease イージングは29種類用意されており、同時にアニメーションさせることもできます。 JavaScript move('#example-10 .box1').x(400).end(); move('#example-10 .box2').ease('in').x(400).end(); move('#example-10 .box3').ease('out').x(400).end(); move('#example-10 .box4').ease('in-out').x(400).end(); move('#example-10 .box5').ease('snap').x(400).end(); move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end(); setTimeout(functio

アニメーションで点描に paper.seurat({ imageSource: 'circus.png', attributes: {r: 2, stroke: "none"}, animator: function(elm, x,y,step){ var anim = Raphael.animation({r: 7}, 350); elm.animate(anim.delay(35*y)); }); 点描をアニメーションで動かします。 点描のアニメーション paper.seurat({ imageSource: 'eiffle-tower.png', animator: function(elm,x,y,step){ var anim = Raphael.animation({cx: 2, cy: 2, r: 1}, 2e3, function(){ var anim = Raphael

Presenteer.jsはページ内の一部をクリックで動作するプレゼンテーションにするライブラリです。 Web上で動くスライドライブラリは多数あります。大抵プレゼンテーションを前提に大画面で表示されるものですが、Presenteer.jsはちょっと違います。Webサイト内に埋め込んでサービスを紹介したりするのに使えるプレゼンテーションライブラリです。 この中央部、水色の部分がプレゼンテーション部です。 クリックで内容が切り替わりますが、そのダイナミックな動きが目を引きます。 こんな感じで文字のローテーションも可能です。 スライダー風にも使えます。 デモ動画です。格好いい動きが分かるかと思います。 Presenteer.jsの魅力は何と言ってもスムーズなアニメーションにあると言えるでしょう。クリックするたびに異なるアニメーションが起こるので目を奪われます。テキスト主体のプレゼンテーションにな

stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。 WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。 例です。スクロールさせるとリスト部の描画が滑らかに変化します。 3Dを使っている場合は特に奇麗です。 様々な変化があります。 スクロールは上から下、下から上の両方に対応しています。 ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。 デモ動画です。全部で13種類のアニメーションがあります。 stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅

jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。 skrollr -GitHub [ad#ad-2] skrollrのデモ skrollrの使い方 skrollrのデモ パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。 デモではその面白いパララックスのエフェクトが楽しめます。 デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。

モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS

zoom.js -GitHub デモページ [ad#ad-2] デモ 実装 デモ デモページではページ上のどのエレメントをクリックしてもズームイン（拡大）します。 グリーンの「Float」をクリックするとこんな感じになります。 デモページ：ズームインしたキャプチャ ズームアウト（縮小）するにはもう一度クリックするか、[ESC]キーを押します。 [ad#ad-2] 実装 「zoom.js」はjQueryなどの他のスクリプトには依存せずに、単体で実装が可能です。 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="js/zoom.js"></script> HTML/CSS HTMLとCSSは通常通りで構いません。 特定のエリアに適用する場合は、そのエリアが指定できるようにidなどを設けます。 JavaScript 特定の要素（例：img）のみ適用する場合は下

ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています