JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w

PDF.js PDF.jsを使えば、PDFをそれっぽいインタフェースとともにブラウザ上で表示してしまえます。 なんでもJavaScriptでやりゃいいってもんじゃないよ、という気もしますが、面白かったのでご紹介です。 PDFを一貫して同じインタフェースで表示させたいというようなニーズにマッチしそうですが、動かないブラウザもあるみたい。 世界は広いということを認識させられるライブラリですね 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ド派手なビジュアリゼーションを実現できるJSライブラリ「Toxiclibs.js」 ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」 OpenOffice等の文書をWEBで表示するJSライブラリ「WebODF」

デモページ: 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

Toxiclibs.js - Open-Source Library for Computational Design ド派手なビジュアリゼーションを実現できるJSライブラリ「Toxiclibs.js」 WebGLなんかも活用しつつグラフィカルな図形描画ができるライブラリです。 他のライブラリを必要とせず単体で動作するとのこと。 こうしたライブラリを使うことはあまりないかもしれませんが、知っておくといざ組むって時には使うと便利そうですね。 関連エントリ データのビジュアリゼーションに使えるJSライブラリ「d3.js」

IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Slider [ad#ad-2] Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブラウザ Firefox Safari Chrome IE Opera9 Flow Sliderのデモ デモではサイトのトップにあるベーシックなスライダーと、本棚に並べたようなスライダーがあります。 スライダーの操作はマウスホバーで、左右の端ほど素早くスライドします。 Flow Slider: Example グリーンのボタン「Buy Book」をクリック

JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に

地図のような大きい画像を指定サイズにクリップし、クリックやドラッグ操作でスムーズにスクロールさせるjQueryのプラグインを紹介します。 CraftMap [ad#ad-2] CraftMapのデモ CraftMapの実装 CraftMapのデモ デモは二つあり、ページ内の一部に配置したものとウインドウいっぱいに配置したものがあります。 地図のスクロール方法は3種類の操作が可能です。 ナビゲーション（左のパネル）の各ラベルをクリック 地図上のマーカーをクリック 地図をドラッグ 各ラベル・マーカーをクリックすると、それに対応した付加情報をパネルで表示します。 Demo 2: ウインドウいっぱいに配置 [ad#ad-2] CraftMapの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.js" type="

このブログについて こんにちは。きんくまです。 フロントエンドエンジニアです。自作のiPhoneアプリを作っています。 ・web (JS / TypeScript) ・iOS (Swift / Objective-C), ・Animate/AIR (ActionScript3), などフロントエンド寄りのプログラムや日記をゆるーく更新してます 作ったもの フォルダとメモ帳 – フォルメモ (iPhone) ジッピー電卓 無料版 - 消費税と割引計算機 (iPhone・iPad) ジッピー電卓 Pro 消費税と割引計算機 (iPhone・iPad) Rapid Calc スマホで使えるお手軽電卓！(ブラウザ版） MinimalClock シンプルなデスクトップ用デジタル時計 mac版（フリーソフト） Habit Keeper 日課 / 習慣 / ルーチンワークを管理 / 記録するiPhone

ResponsiveSlides.js Responsive jQuery slideshow レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 画面サイズが変わっても問題なく動作するレスポンシブなスライドショー実装が可能です サイズは１KBぐらいでマークアップも超シンプルに記述できます ブラウザサイズを変更しても問題なし 今後はこうしたライブラリもレスポンシブ対応必須となっていきそうですね 関連エントリ ３ステップではじめるレスポンシブWEBデザイン 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 ファイルアップロード関連のjQueryプラグイン１０