jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル:phpspot開発日誌
jQuery & CSS Sprite Animation Explained In Under 5 Minutes | AddyOsmani.com | Where Web Businesses Grow jQueryで行うFlashみたいなスプライトアニメーションのチュートリアルが公開されています。 iPhone向けのサイト等ではFlashは使えませんが、jQueryによって実装すればアニメーション機能も実装出来ますね。 デモページ jQueryのコードが意外にシンプルです。 数年後のアニメーションはどうなっているのでしょうか。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラ
まるでフルFlashなjavascriptを使用したWebサイト集めてみました[日本編]
Posted: 2011.05.19 / Category: WebDesign / Tag: デザイン参考 最近はjavascriptで表現できることが増え、前まではFlashでしかできなかった効果もできるようになりましたね。 ということで、マウスオーバーや画面遷移でアニメーションしてるとか、ちょっと変わったレイアウトをjavascriptやっているサイトを集めてみました。
![まるでフルFlashなjavascriptを使用したWebサイト集めてみました[日本編]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2af3fd7a8f5f909f22826d83073f10812b6f854a/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2011%2F05%2F110519_s.jpg){kind=tracking}
これだけは押さえておきたいフルFlashサイトの基本
フルFlashサイトとは、Webサイトの全面をFlashコンテンツで構成したサイトのことです。ナビゲーションボタンから背景にいたるまで、すべてを自由に表現できるので、作り手が希望する独自の空間を演出できます。特に、映画の作品紹介サイトや新商品のキャンペーンサイトのように、ユーザーの興味を強く喚起したいサイトでは高い効果が得られます。 フルFlashサイトの特徴 フルFlashサイトの魅力の1つは、アニメーション表現にあります。アニメーションの動きの格好よさや楽しさで、ユーザーの好奇心を刺激し、コンテンツに集中させることができます。 また、アニメーションで注意を引きつけることで、制作側が見て欲しいページにユーザーを誘導できます。情報に動きを付けることで、どんな意味があるのか、サイト内での位置付けも表現できます。 一方、Flashにはプラットフォームとしての側面もあります。たとえば、サーバー上
Flashみたいなテキストエフェクトが作れるjQueryプラグイン「TextFX」:phpspot開発日誌
JavaScript - TextFX - A jQuery Text Animation Tool - CodeCanyon Flashみたいなテキストエフェクトが作れるjQueryプラグイン「TextFX」 Flashにもこうしたテキストアニメーション作成ツールがあった気がしますが、jQueryでも出来るみたい。 １５のコアとなるアニメーションに加え、１８種類の設定、カスタムイージング、スピードなどカスタマイズ自在です。 デモページ ブラウザで動くエフェクトジェネレーター付きで、自由自在かつ簡単に動きをデザインできます。 注意点として、$5のライセンスウェアのようですが１からつくることを考えれば安いですね IEやSafariなどでも互換性があるみたいです。 関連エントリ プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」 スマ
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」:phpspot開発日誌
もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」 2011年05月11日- 追記）じっくり利用して見た方が以下のような問題点を示してくれました。 ・利用勝手があまり良くなく、日本語環境を前提には、考えていないように思われます。 ・ＡｃｔｉｏｎＳｃｒｉｐｔ の記載方法が不明。 ・モーショントゥイーンの機能不足 レビューを参考にさせて頂く限り、現段階では「Flashを買わなくてもいい」という結論には当然ならないと思います。いつもながら脊髄反射的にエントリにして、不快にさせてしまった方々には申し訳ありませんでした！ 但し、簡易的なアニメーションがフリーで作れるということは有用で、掲載されているサンプルの質も高く、フリーである限り機能のデグレードはある程度しょうがないと思うのと、話題に上がることで今後の発展にも期待していきたいと思い
重たい画像やFLASHアニメーションを読み込む際に生じる「ストレスを軽減」する為のローディングアニメーション画像を扱っているサイトを5点紹介 ｜https://wp.yat-net.com/name
2011年 04月 06日 重たい画像やFLASHアニメーションを読み込む際に生じる「ストレスを軽減」する為のローディングアニメーション画像を扱っているサイトを5点紹介 カテゴリ： フリー素材 タグ：フリー素材ユーザビリティ作成支援ツール WEBサイトの読み込み中に白い画面だけが出て長時間待たされるとユーザはサイトを閉じてしまいます。これを避けるために、ユーザーを少しでも楽しませるためにフルフラッシュのサイト等で頻繁に使われていたローディング画像を紹介します。 ローディング画像を利用する理由、メリット 最近ではjQueryを利用した画像の読み込み時でも活用されるようになり、ローディング画面はもはや一般的なものになりました。そもそもWEBサイトで待たせるということはユーザーに取って非常にストレスを与えます。1秒の待ちならさほど影響はないかと思いますが、数秒待たされるとユーザーは注意力が散漫し
FlashのアニメーションをHTML5に変換するツール「Wallaby」をAdobeが公開 | ClockMaker Blog
FlashのアニメーションをHTML5に変換するツールとして、3月8日「Wallaby (ワラビー)」のプレビュー版がAdobe Labsにて公開されました。 Download Wallaby – Adobe Labs 結論から言うとブラウザ互換など懸念点がありますが、思った以上に変換精度が高いです。そして真っ先に感じたのは、WallabyによってHTML5出力が可能になったという点で、アドビが提供しているFlash ProfessionalはHTML5時代が万が一到来してもオーサリングツールとしてのポジションを保ち続けるだろうということです。 速報として「インストール方法と使い方」と「変換したデモ」を紹介してみます。以下詳細です。 インストール方法と使い方 ①まずはAdobe Labsからアプリケーションをダウンロードします。アプリケーションはAdobe AIR製ですので、事前に最新のA
爆速作業のために登録しておくべき５つのショートカット | _level0 - KAYAC Front Engineer Blog
評判がよかった爆速!!!アニメーションの作り方の記事 爆速!!!"歩く"アニメーションの作り方 爆速!!!"走る"アニメーションの作り方 爆速!!!"動く点線"アニメーションの作り方 爆速!!!"鳥の羽ばたき"アニメーションの作り方 正面編 爆速!!!"鳥の羽ばたき"アニメーションの作り方 真横編 爆速!!!"光の反射"アニメーションの作り方 結構やった気がしてたけどまだ6件しか投稿してないのか・・ そろそろ爆速ネタを復活しようかとおもってます。 なにか見たいものがあればコメント欄でお伝えください！ 爆速の作業にはかかせない これだけは登録した方がいいというショートカットを５つご紹介します。 1.同じ位置で編集 ・編集＞同じ位置で編集 "シンボルを編集"と似ていますが "同じ位置で編集"は何階層でも潜れるというメリットがあります。 以外と盲点。 用はシンボルをダブルクリックした時と同じ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flashに使えるサウンドエフェクト - DesignWalker