STUDIO4℃ TOP
スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。 Slideshow with jmpress.js [ad#ad-2] デモ 実装 デモ まずは、そのダイナミックな3Dのアニメーションをご覧ください。 スライドは5枚あり、それぞれアニメーションが異なります。 デモページ:別レイアウト 実装 実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。 紹介記事はこちら。 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js HTML jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。 実装は一枚の広大なカンバスとなるルート(section要素)に、各パネル(div要
FlashのようなWebアニメーションをHTML5やJS、CSSなど標準規格を使って制作できる「Edge」のプレビュー版をAdobeが公開。 米Adobe Systemsは8月1日、HTML5に対応したWebモーション/アニメーション制作ツール「Adobe Edge」のパブリックプレビュー版を公開した。FlashのようなアニメーションをHTML、JavaScript、CSSなどの標準規格によってWebサイト上で表示できるようにする。 Dreamweaverなど同社のWeb開発ツールを補完。HTMLにネイティブ対応し、CSSベースのレイアウトデザインを損なうことなくモーションを追加できる。各種描画ツールを使い、CSS3でスタイリングされたHTML要素を生成し、視覚効果の高いコンテンツを制作できるとしている。プレビューはWebKitで行い、コンテンツのデザインや操作を忠実に再現。各種ブラウザや
Animated Buttons with CSS3 これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 ボタンといえば、マウスオーバーした時に色が変わって、押した時に凹みエフェクトが付くようなものが一般的ですがCSS3によってその自由度は大きく上がるようです 使わずとも一度はかならず見ておきたいボタン集となってます アイコン付きのボタン カーソルを合わせるとアイコンが拡大しながらフェードアウトしてプライスが表示されます アイコンからプライスへの変更に併せて右側の矢印色もアニメーションさせながら変更するサンプル アニメーションさせないなら画像のすり替えだけですがアニメーションさせているところがポイントですね 登録ボタンみたいなものにカーソルを合わせるとボタンが徐々に大きくなり矢印の角度なんかもアニメーションされる例 ボタンが大きくなり、更に文言を追加する例。色の変更
Adobe SystemsはHTML5に片足を突っ込んでいたが、米国時間7月31日、「Adobe Edge」と呼ばれるソフトウェアのプレビュー版を公開することで大胆な試みに打って出た。 長年にわたって、ウェブ上で意匠を凝らしたことを実現するためのAdobeの答えは「Flash Player」だった。Flash Playerはほぼ全てのコンピュータにインストールされているブラウザプラグインで、アニメーションゲームのプレイや動画のストリーミング、ブラウザ間の相違の除去といった機能を備えている。 しかし、OperaやMozilla、Apple、Googleといった提携企業、そして最終的にはMicrosoftまでもが、ウェブ標準で実現できることを進化させ始めた。その代表的なものが「HTML」「CSS」「JavaScript」の3つだ。 これらの新標準はとりわけ、新しいスマートフォンで利用されていた
Dear friends of the web, We're truly sorry to inform you that Animatable is no longer being developed. We were ridiculously excited by about our vision (and development to date) for the product, but unfortunately due to each of our personal responsibilities – being many client projects, running of our own businesses, writing, and speaking events – we just haven't managed to give Animatable the tim
→[文字の動き] モーションタイポグラフィで参考になった動画のまとめはこちら 追記:2009/05/30) 最近のアニメ系に3本追加。 @evianさん、ありがと〜〜 Flashなどで「文字に動きをつける」事を、Type Motion(タイプモーション) もしくはType Motion Design(タイプモーションデザイン)って僕の中では呼んでるんですが、間違ってる? テキストモーションなのかな? 追記:2009/05/28) 「モーションタイポグラフィ」だ! やっとすっきりした。 Lens氏、ありがと〜! でもモーションデザインってのはあると思うんだ。 「動き」も表現手法の1つだし、 動き次第で「硬度/質感/属性/性格/質量」等を表現できるから。 そんなわけで(どんなわけだよ)、主にタイトルや文字の動きで参考になりそうな映画やアニメ系の動画をYoutubeで探してみました。 3DCGで
前記事「「文字の動き」の参考になりそうな映画やアニメのOP/EDのメモ(超個人的趣味)」が意外に周囲に反応良かった(?)みたいなので、 最近、僕がFlash等のモーションタイポグラフィ(Motion Type Graphy)に参考になりそうだなーと思った動画やサイトも紹介してみます。 ほぼYoutubeで、超個人的主観です。 (他に良い作品があったら教えてください) ▼追加:2012/02/02 ◯YouTube – DADA RADWIMPS MV 日本語ならではのこの感性、個人的にツボ過ぎです。大好きです。 ▼ほぼテキストだけの構成 Getting Started With Google Analytics « WordPress.tv WordPress.tvのチュートリアル動画。 セリフと合わせてアナログチックな展開がいい味出してる。 YouTube – Type in motio
この国の“空気”に戦いを挑んだひとりの男の子と、彼を見守った女の子の、たった11日間の物語。 2009年4月TV放送開始(フジテレビ'ノイタミナ'他)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く