高速なCSSアニメーションをJSで制御できる「animo.js」:phpspot開発日誌
animo.js ? Labs by Big Room Studios 高速なCSSアニメーションをJSで制御できる「animo.js」。 jQueryベースで利用でき、$(element).animo(args)として簡単に利用が出来ます 個人的にはCSSよりもとっつきやすいなぁという印象です。CSSアニメーションはハードウェアアクセラレーションで環境によっては速いですしね。 コード例。 関連エントリ バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 画像にマウスオーバーでリアルに立体化する3Dアニメーション実装デモ 光ながらアニメーションさせるエフェクト作成jQueryプラグイン「Flare」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 フラットだけど立体的なCSS
WebGLではなくSVG、CANVASを使った迫力ある3D表現デモ「Flat Surface Shader」:phpspot開発日誌
Flat Surface Shader WebGLではなくSVG、CANVASを使った迫力ある3D表現デモ「Flat Surface Shader」 新たな可能性を感じるデモ。 WebGLに対応していない環境がおおいなか、こうしたcanvas等を使った3Dっぽい画面が作れるライブラリ等が出てくれば一気に広がるのかもしれませんね 関連エントリ 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」 CSS3の3D Transformで3Dのホバーエフェクト実装例 ブラウザ上でまるで美術館。3Dイメージギャラリーデモ 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」:phpspot開発日誌
BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」 2012年11月30日- jQuery Plugin for Cartoon-like Background Image Sprite Animation ? AniDG ? (alernative to animated Gif) HTML, HTML5, CSS, CSS3, JQuery, Flash, Photoshop, mobile, iphone & ipad web application BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」。 １枚の画像をJavaScript を使い、背景画像を順番に切り替えていくことでアニメーションさせられます background-image の書き換えなので、要素の中に何か入っていてもよい
コーディング不要のHTML5アニメ作成サイト Moonbase オープン、共有・派生も対応 - Engadget
HTML/CSS や JavaScript が書けなくても手軽にHTML5アニメーションを作成できるサイト Moonbase がオープンしました。ドラッグ＆ドロップで直接アップロードできる画像やテキストなどの部品と、コンテナになる「BOX」、ポインタ入力や波発生器「WAVE」(後述)を自由に配置して線でつなぐことで、複雑な繰り返しアニメーションを簡単に作成できます。実際の作成の様子は続きの解説動画をどうぞ。 作成したアニメーションは Moonbase 上にホストされ、embed コードでウェブサイトやSNSなどに貼りつけて共有が可能。また誰かが作成したアニメーションをクローンして、さらに派生作を作ることもできます。 Moonbase を制作したのは、かつて動画サイト Vimeo やコメディサイト CollegeHumor の開発にかかわったウェブ開発者 Jake Lodwick 氏。Lo
カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」:phpspot開発日誌
Baraja: A Plugin for Spreading Items in a Card-Like Fashion | Codrops カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」。 カードをシャッフルしたり広げたり、自在に操るアニメーションエフェクトを作成できるjQueryプラグイン。 こんなアニメーション機能が、ほとんどのブラウザでも使えたらまさに次世代になったなぁと実感できるのかも。 将来的はWEBはもっともっとリッチになっていそうです 関連エントリ アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」
フェード・スライド・バウンド・フリップ・スターウォーズなど、CSS3アニメーションのコードを自動で生成するオンラインツール -liffect
フェード・スライド・バウンド・フリップ・スターウォーズなど、CSS3アニメーションのコードを自動で生成するオンラインツール -liffect
CSS3でボーダーを超かっこよくアニメーションするサンプル:phpspot開発日誌
Simple yet amazing CSS3 border transition effects CSS3でボーダーを超かっこよくアニメーションするサンプル とりあえずデモページを見ていただくのが一番ですが、ボーダーをアニメーションさせて未だかつて無い効果をブラウザ上で表現しています。 デモページ 応用することでかなりいろんなことができそうだな、という、なんだかとってもワクワクするデモでした。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２ フルスクリーン背景がスライドショーになるCSS3サンプル
氷菓のエンディングっぽい動き / CreateJS | ゆるぶ | ページ 777
CreateJSつかって氷菓のエンディングにあるテキストでキャラクタが描かれる動きをつくってみるよ。 2クール目EDの1分過ぎくらいのとこね。 とりあえず、前回やったお絵かきを使おうかな。 描画の時に使った座標をひと通り保存して、それをテキストに置き換えることに。 なんか既に重くなりそうな雰囲気だが… テキストはあらかじめ a-z, A-Z で用意しとく。 CreateJSのテキストオブジェクトで1文字ずつ用意してみる。 var text = []; for (var i = 65; i <= 90; i++){ var t = new createjs.Text(String.fromCharCode(i), '20px serif', color); text.push(t); } for (var i = 97; i <= 122; i++){ var t = new createj
Flash Professional Toolkit for CreateJS 1.1 公開 - akihiro kamijo
Flash Professional で制作したコンテンツを CreateJS 用に書き出せるツールキットの新しいバージョンが公開されたようです。 例によって、Flash Pro CS6 の機能拡張として提供されています。ダウンロードはこちらです。 のわりに、実際にダウンロードしてみると旧バージョンのままだったりしますが、ドキュメントは更新されている様なので、とりあえずその内容をご紹介しておきます。先月アップデートされた CreateJS の新しい機能にも対応しているようです。 まず、新しいバージョン 1.1 は、クラッシックトゥイーン以外のトゥイーンに対応しました。新しいモーショントゥイーンもシェイプトゥイーンも、フレーム毎に分解して書き出されます。 （なので、CreateJS ランタイムが対応したわけでは無いようです） マスクレイヤーも利用できるようになりました。但し、マスクとして使用
CreateJS: リッチでインタラクティブな体験をHTML5に
2012年9月24日にサンフランシスコでAdobeの開いたイベント「Create the Web」のセッションが、ビデオで公開されました(英語)。その中からGrant Skinner氏による「CreateJS: Creating Rich, Interactive Experiences for HTML5」について、スクリプティングに関わる部分のスライドの文章を邦訳して、コードを掲載しました。また、日本語の参考ドキュメントもリンクで加えています。 EaselJS リッチでインタラクティブな2Dグラフィックスをオープンなwebに作成できる拡張性のあるプラットフォーム an extensible platform for creating rich, interactive 2D graphics on the open web 機能 features しっかりと階層化された表示リスト ro
暑さでやる気がでないWebデザイナーにおくるHTML5表現まとめ
仲夏。HTMLファイ部の本多です。 jsdo.itにて、コーディングコンテスト「Web Creator's Contest Q」を開催しています。 QはWebクリエイターのためのコンテスト、HTML5、JavaScript、CSSを駆使して挑戦しましょう！ 募集中のテーマはズバリ、 ＼ 夏を涼しくする表現 ／ 暑い夏をひんやり涼しくしてくれる作品をお待ちしています！ 本記事では、続々と集まっている投稿作品の一部をご紹介します。 夏の暑さでやる気のでない方、涼しくてアツいHTML5作品をご堪能あれ！ ※ Chrome、Safari など、最新のモダンブラウザでご覧ください。 夏を涼しくするコードまとめ！ ripple sound 音と波紋を合わせた表現が爽やかで良いですね...！ A～Zのキーを押すと自分で波紋を出せます。
FlashやHTML5で作成されたカードの合成UI・演出のまとめ
もはやコーディングコンテストサイトと化しているjsdo.itですが、いま開催中の SPEC vol.5 はいつもとちょっと違います。 今回は、いつものHTML5・JavaScript・CSSに加えて、ActionScriptでのエントリーもできます！ 「じつはFlashのほうが得意！」という方にも挑戦していただいているんですが、もうすでに続々と面白い作品が集まりだしているので個人的に気になる作品をいくつかご紹介したいと思います。 今回のお題「カードの合成のUI・演出を作ってください」 Flash編 forked from: SPEC vol.5 投稿用コード - wonderfl build flash online forked from: SPEC vol.5 投稿用コード - wonderfl build flash online JavaScript編 ※スマートフォン専用 締切は
SWF on iPhone!「FlashForward」 - KAYAC engineers' blog
※Chromeで本文エリアをスクロールするとエラーになるそうです。ごめんなさい！ こんにちは！１年間自転車通勤を続けた結果、健康診断で「おっ！」と言われて大満足のaragaです! SWFをiPhone上のSafariで動かすプロジェクト「FlashForward」をgithubで公開しました。 プロジェクト名 FlashForward ライセンス MIT FlashForwardとはなにか？ まずは、社内勉強会で発表した資料をご覧ください。 非常に操作性が悪くてすいません。が、実はこの資料はおそらく世界初の試みで作られています。 なんとSWF,SVG,Canvasの3種類のフォーマットで見る事が出来ます。 SWF SVG Canvas ※ Safari推奨 これらはFlashForwardを使ってFlashLite1.1で作ったSWFのスライドを変換しました。 このほかのサンプルはギャラリ
Flash変換ライブラリ「Lightning」を公開しました | Geisha Tokyo Engineers' Blog
Engineer blog from Geisha Tokyo Entertainment, Inc. 芸者東京の山内です。 弊社にて開発したPythonベースFlash変換ライブラリ「Lightning」をオープンソースで公開しました。 lightning (github) ライセンスはThe MIT Licenseです。 このライブラリは弊社アプリ「おみせやさん」のiPhone版で店やアバターを表現するのに使っています。 Flashで作成したswfファイルを、LightningによってiPhone用のWeb素材に変換します。 Lightningのすごい所 1. 高い再現率 SVGによるベクターグラフィックスと、CSS3-keyframeAnimationを組み合わせて利用し、再現率の高いアニメーションを実現しています。 swfとほぼ同等の見た目が再現できます。 2. 滑らか
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UNTITLED
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
はてなブログ
GitHub - geishatokyo-lightning/lightning: lightning core library
