リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開 | ClockMaker Blog
Flashのエンジニアとして著名なGrant Skinner氏が開発している、「CreateJS」の公式サイトがオープンしました。 http://www.createjs.com/ CreateJSはHTML5を介してリッチなインタラクティブコンテンツの制作をサポートする、JavaScriptライブラリとツールのスイートです。CreateJS SuiteにはEaselJS、TweenJS、SoundJS、PreloadJS、とZoeのツールがあります。 私のブログでもEaselJS、TweenJSを使ったインタラクティブコンテンツのデモを幾つか制作して紹介してきましたが、Flashで培われた技術がそのまま利用できる点で非常に使い勝手のいいツール群だと思っています。 EaselJSとTweenJSでテキストエフェクト EaselJSを使った流体パーティクル入門 今回は公式サイトで明らかになっ
[JS]これ以上ないと言うくらい簡単に実装できるスライダーのスクリプト -Flow Slider
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」をクリック
[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre
雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。 mLivre デモ [ad#ad-2] mLivreの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mLivre.min.js"></script> HTML img要素をdiv要素で内包します。 <div id="demo1"> <img src="celestin/couverture.jpg" width="650" height="325" /> <img src="celestin/illustration2.jp
[JavaScript] 自動で印刷ダイアログを表示する・印刷ボタンを実装する | Blog | Development Reference
このエントリは ライブラリ へ移動しました。
22 Awesome Visualization Libraries: Charts and Diagrams - Onextrapixel
In web application or software, very often we will need to present collected data to the users. Back in the olden days, data such as traffic statistics and clicking hits were presented through simple numbers or words, this method is plain and simple. With the advancement of the web, more data are being collected. Thus, displaying all these data in standard plain numbers or words do not seem to be
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
Prototype extension: Showcase
Examples Requirements Markup and styling Initializing and available options Download About the author Examples Before going further, make sure you check out the examples for a quick view of the extension's functionality: Other examples Besides horizontal, there are 2 more layouts for the Showcase: Vertical Showcase Diagonal Showcase Requirements Showcase.js needs the Prototype JavaSc
Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
[JS]見出しなどのテキストを画像に置換するスクリプト -jQIR | コリス
jQIR (jQuery Image Replacement)は、見出しなどのテキストをpng, gif, jpg画像に置換するスクリプトです。 <textarea name="code" class="html" cols="60" rows="5"> <h1 id="heading1" class="jqir">Heading 1</h1> <h2 class="jqir {src:heading2.png}">Heading 2</h2> <h3 id="heading3" class="jqir"><a href="http://jquery.com">Heading 3</a></h2> </textarea>
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
まじで使えるJavascriptライブラリ75選 | CREAMU
Javascriptで優れたインターフェースを実装したい。 そんなあなたにおすすめなのが、『75 (Really) Useful JavaScript Techniques』。まじで使えるJavascriptライブラリ75選だ。 以下にいくつかご紹介。 » Lightview スムーズに画像を拡大してくれる » FancyUpload アップロード中のプログレスを表示してくれる » SWFObject Javascriptを使ったFlashプレーヤ » JavaScript tabifier 簡単にJavascriptで切り替えられるタブインターフェースが作れる » FancyZoom 1.1 簡単なエンベッドでスムーズに画像を拡大してくれる » SimpleModal オーバーレイするクールなモーダルダイアログ » A Mac OS X-style Dock In JavaScript
[JS]複数のパネルをダイナミックにスクロールさせるスクリプト -jParallax
jParallaxは、複数のパネルをパララックスで奥行きを表現し、マウスの動きに合わせてダイナミックにスクロールさせるスクリプトです。 jParallax 複数のイラストを重ねただけでも面白いですが、下記のデモのように写真画像を使用したものや、単に大きい画像のビューアーとしても面白いものとなっています。
[JS]ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2
A List Apartのエントリーから、CSS Spriteを使用したナビゲーションに、マウスオーバー時にアニメーションのエフェクトをつける「CSS Sprite2」を紹介します。 CSS Sprites2 - It's JavaScript Time demo 5 demo 6 CSS Spriteとは、スタイルシートで一枚の画像から複数箇所に配置をしたり、マウスオーバー時の画像指定を行うものです。 CSS Sprite2は、そのCSS Spriteにスクリプトを使用して、アニメーションのエフェクトつけたものです。 使用するスクリプトは、デモではjQueryが使用されていますが、PrototypeでもYUIなど他のスクリプトでも実装は可能です。 CSS Sprite2のベースとなっているのは、下記ページとのことです。
JavaScript でテトリスみたいなゲームを作ろう！ - セキュリティ＆プログラミングキャンプ JavaScript 入門講座資料
HTML とは HTML とは、誤解を恐れずに言ってしまうとウェブページ（ホームページ）を作るために使われている言語です。 例えば、以下のようなものが HTML です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>タイトル</title> </head> <body> <h1>見出し</h1> <p> 本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文<a href="hoge.html">ハイパーリンク</a>本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文 </p> </body> </html> サンプル イメージ湧きましたか？ では、何故 HTML という
自サイトの画像の保存をプロテクションする仕組み:phpspot開発日誌
MooTools 1.2 Image Protector: dwProtector Image protection is a hot topic on the net these days, and why shouldn't it be? 自サイトの画像の保存をプロテクションする仕組み サイトの画像は、次の方法で保存できますが、それを全部禁止する方法です。 ・右クリック→名前をつけて保存 ・デスクトップにドラッグ＆ドロップで保存 ・右クリックで名前をつけて背景を保存 ・背景画像を表示 dwProtect.js をダウンロードして、JavaScriptで以下のように書くだけです。 window.addEvent('domready', function() { var protector = new dwProtector({ image: '/blank.gif', elements:
hover時の背景画像ちらつきに対処する - Archiva
Make a note of it: Web tech, montaineering, and so on. ナビゲーション等で画像を切り替えたい場合、CSSを用いて a:hover の背景画像をずらしたり消したりして実現する方法が良く取られます。この時、Internet Exploler 6 において背景画像のちらつき（砂時計のアイコン表示）や動作の遅延が発生する（ローカルでは確認しにくいので、注意）。サンプルは以下。 »IE6 background flickr この問題はIE6固有の問題であり、他のモダンブラウザやIE5等では発現しない。背景画像のキャッシュに関わる問題。hover時のbackgroundに変更を加えると再読込が起こるようです。したがって転送速度やファイルサイズによって程度が変わる。ブラウザの設定によっても回避できるみたいですが、Web屋としてそこはスルーしたい。解決
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SexyLightBox - www.coders.me
GeneralSurf.com is for sale | HugeDomains
[JS]フォームのセレクトボックスを装飾するスクリプト -jquery combobox