コンテンツの魅力を引き立て、十分に伝えるためには、時には“一歩引いた”Webデザインがいいケースもあります。たとえば、自身が手がけた仕事を紹介するデザイナーのポートフォリオサイトがそうかもしれません。ポートフォリオサイトそのものを作品と見なして、凝ったビジュアルデザインを作り込むこともできますが、過去に手かげた作品が豊富であれば、それらの個性を生かすシンプルなデザインもいいでしょう。 スイスのデザイナーユニット「Contreforme」のポートフォリオサイトは、後者のアプローチ――各々の作品を引き立たせるサイトデザイン――を採用しています。ただし、それだけではありません。このサイトが採っているもうひとつの手法が、アニメーション／エフェクトによる楽しい演出です。今回はこのサイトの技に注目してみます。 今回のお手本サイト：『Contreforme』 企業のCI策定やグラフィックデザイン、Web
「物理空間の統治者は電脳空間の統治者であるべきか」という前回のエントリーは、去年冬のコミケのために境さんや山口さんと一緒に書いた本の原稿で、電脳コイルを二次創作したものだ。京都の町の中で、巨大な拡張現実博物エリアをwikipediaのようなオープンコンテンツコミュニティとして展開しているKazへのインタビューの形をとっている。 このような勝手AR空間をつくる活動が政府の政策により排除されようとしているという設定で、それにどう対抗しようとしているか、そもそも複数の拡張現実が許容されたりされなかったりする理論背景にはどのようなものがあるのかが、インタビューを通して紹介されている。 アニメの電脳コイルでは、このインタビューでおきているような勝手チャンネルという設定はなく、「子供の電脳めがねをかけている世界」と「大人の電脳めがねをかけていない世界」の２つしか存在しない。磯監督にも確認したが、ただで
NECビッグローブ、東京放送（TBS）、マウスプロモーションは12月17日、テキストを入力すると、アニメ「ローゼンメイデン」のヒロイン・真紅が読み上げるアニメを作成できる「Alice Project」を開設した。音声合成エンジンの精度向上が目的で、2～3カ月の期間限定。ユーザー登録すれば誰でも利用できる。 100文字までのせりふを入力すると1秒ほどで音声合成し、せりふに合わせて口を動かす真紅の動画を作成・公開できる。真紅の声を担当する声優の沢城みゆきさんの声のデータベースをもとに、NEC共通基盤ソフトウェア研究所が開発した音声合成エンジンで合成する。 発音は自然で、真紅のツンとした感じも伝わってくる。ただ文章によっては、アクセントの位置がおかしかったり、言葉を区切る位置が不自然な場合もあり、修正ページで調整できる。 アクセントの位置や音の高さ、話すスピードなどを調整し、より自然な声に近づけ
Run is the easy and basic way to animate web content! You're right, this is YAAF - yet another animation framework. But some facts make it standing out from other frameworks: Easy and intelligent CSS support. Event listeners. Easy syntax. Well-documented. Compatible to all current browsers: Firefox 1+, Opera 8+, Internet Explorer 5.5+, Safari 2+, Konqueror Let's start the discussion about Run on
http://coderepos.org/share/wiki/JSTweener http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/ JS でモーショントィーンするのに、JSTween というライブラリがあるのですが、一つ一つのモーションで setTimeout(func, 0) で回しててるため増えれば増えるほど重くなったり、style 設定が結構面倒だったり、一度に複数プロパティ登録ができなかったりしたので、自分でライブラリを作ってみました。ひっつき☆スターを JSTweener で動かしたら体感で全然速くなりました。 コード例ですが、ひっつきスターでのトゥイーン処理は JSTweener.addTween(el.style, { time: tm, transitions: 'easeOu
金田 伊功 【かなだ よしのり】 1953（昭和28）年2月5日生まれ。奈良県出身。師匠は荒木伸吾、野田卓雄。 東映動画→旧スタジオZ→旧スタジオNo.1→スタジオZ→スタジオNo.1→スタジオのんまると→スクウェア（現スクウェア・エニックス）（金田伊功GREATに掲載の人物相関図およびインタビューより） 専門学校（東京デザイナー学院）中退後、東映動画に契約社員として入社し『魔法のマコちゃん』でデビュー。（動画王Vol.01より） 東映動画時代は高橋信也班に席を置いていた。（まんだらけZENBU no.52より） 貞光紳也、布告文は専門学校の時代からの友人。（金田伊功Specialより） アニメ作画界の革命児。 作画マニアで金田の名前を知らない者がいないのは勿論のこと、特に作画に入れ込んでいないアニメファンにもその名は知れ渡っている。 それほどに彼のアニメートは派手で突拍子も無く、観客への
晴れ。しかし昼まで寝てたので、せっかくの洗濯日和が……。せめて布団だけ干す。洗濯以外の家事をかたづけて、趣味の講座へ。研修旅行の案内きたー。どないしょ。 たまたま見た動画で、アニメーター・金田伊功さんを知った。いやーすごい！ 有名な方だったんですね。作画もパースもかっこいいです。「Wikipedia：金田伊功」によると、「金田光り」「金田パース」と呼ばれるほどの作画者とのこと。ジブリにも参加してたのかー。「作画＠wiki - 金田伊功」の、宮崎駿さん絡みの話が面白い。邪道とは思わないけど、宮崎さんも熱い人だなあ。 有名どころらしいものを、YouTubeよりピックアップ。すべて音あり。金田Worksを堪能あれ。 ・YouTube：銀河旋風ブライガー OP（1981年） 初めて観たけどすげー。知らなくても楽しめますよ！ ・YouTube：幻魔大戦より 火炎龍（1983年） 角川映画、懐かしい…
JAVASCRIPT MOTION TWEEN JavaScriptによるモーショントゥイーンアニメーション実装「JSTween」の紹介。 デモサイト、解説ページを見てみてください。これまで見たことがないJavaScriptアニメーション表現を見ることが出来ます。 次のようなTweenクラスがあって、それを使うことでこういったアニメーションが実現できるということかなり便利そう。 var t = new Tween(object,property,easing,start,end,duration,suffixe); 次のJavaScriptソースコードが提供されています。 Tween.js 、ColorTween.js 、OpacityTween.js 、TextTween.js 、Sequence.js 、Parallel.js 名前を見るとなんとなく分かりますが、必要に応じてファイルを
Run / Universal JavaScript Animation Framework / Start Run is the easy and basic way to animate web content! You're right, this is YAAF - yet another animation framework. JavaScriptアニメーションフレームワークライブラリ「Run」。 script.aculo.usのようなエフェクト風アニメーション機能を実現したりすることが出来ます。 太陽の周りを地球が回るデモのような、Script.aculo.usでは実現が少し面倒だったものも割と簡単に実現出来そうです。 script.aculo.us 同様、prototype.jsに依存しています。 ドキュメントも充実 関連エントリ prototype.jsベースの画像切抜き
Jason Harwig JavaScriptパーティクルエンジンライブラリの紹介。 次のように、Flashムービーのような粒子のアニメーションをJavaScriptで実現しています。(IEだと動きませんでした) JavaScriptで実現というところが興味をそそられる部分ですね。 ソースコードがダウンロードできるので、興味のある人は覗いてみましょう。 関連エントリ グラフ描画機能が追加されたJavaScriptライブラリ「Dojo 0.4」 選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」 JavaScriptでOSやブラウザの検出が出来る「BrowserDetect.js」
そして、今回発見した、JavaScript用アニメーション作成ライブラリ「Animation.js」の紹介。 Animation.jsを使って、次のエフェクトが実現可能です。 エレメントのアニメーション移動 文字のアニメーション切り替え 色のアニメーション切り替え フェードイン・フェードアウト なかなか面白そうなクラスですね。 javascriptのアニメーションクラスは他にもいろいろありますが、自分にとって使いやすいアニメーションクラスを選ぶのがいいですね
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
