2D、3D、アバターなど、オンラインだからこそ実現できる、 “こんな展示会を開催したい“想いを、共に制作
![アイデアクラウド](https://cdn-ak-scissors.b.st-hatena.com/image/square/406b499399e2f69825c1dbf95bc302c155a5912d/height=288;version=1;width=512/https%3A%2F%2Fideacloud.co.jp%2Fic%2Fwp-content%2Fuploads%2F2022%2F03%2Fogp.png)
こんにちは! LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…(´Д`) 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト
最近のパターンを記載しました こちらをごらんください 各ブラウザごとに サポートするようになっているので 自分用のメモもかねて GIFファイルを使う <link rel="shortcut icon" href="favicon.gif" /> <link href="http:/XXXXXXXXXX/favicon.gif" rel="shortcut icon" type="image/gif"/> PNGファイルを使う <link rel="shortcut icon" href="favicon.png" /> <link href="http:/XXXXXXXXXX/favicon.png" rel="shortcut icon" type="image/png"/> WindowsIcoファイルを使う <link href="favicon.ico" rel="icon" ty
Flash(フラッシュ)CS3+ActionScript 3.0で、ランダムな動きをする光のFLASHアニメーションを作るチュートリアルです。 まだまだAS3勉強中です。さらっと作れて尚かつリッチ!そのうえ使い回しが効く小ネタをアップして行く予定です。 【完成図】今回のお題はこんな感じです。 【ステップ1 - 概要】 今回、エフェクト全体を1箇所で操作できるクラスを作ります。 そのクラスをcallするだけで、光の数・色・透明度・サイズ・方向・スピード・ぼかしの質感の全てをお好みに変える事ができます。 なので、色々な光のバリエーションでFLASHアニメーションを簡単に作ることが可能です。 【ステップ2 - FLASHドキュメント作成】 ファイル>新規>『Flashファイル(AS3.0)』を選択。 お好みのステージサイズ・フレームレートを設定します。 (*今回は、サイズ:600×300px、フ
Sencha Animatorを使えば、これまでのリッチメディア広告に匹敵するCSS3広告を作成することができます。文字や画像をスムーズに遷移させるアニメーションを作成したり、グラデーションがかかったボタンをデザインしたり、さらに分析用のトラッキングコードを埋め込んだりすることがSencha Animatorの中で行えます。また、これらは全てWeb標準技術を使ってできることです。 これらの標準技術を使えば、現在デスクトップ用のブラウザ向けのリッチメディア広告で使われているほぼ全ての機能は、Apple iOS、BlackBerry Torch、そしてGoogle Android向けに移植・再現することが可能です。 CSS3広告について企画・検討されている広告代理店、広告制作会社の皆様、Sencha Animatorの広告作成者向けオプションについてお問い合わせください。 Contact Us
スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。 Slideshow with jmpress.js [ad#ad-2] デモ 実装 デモ まずは、そのダイナミックな3Dのアニメーションをご覧ください。 スライドは5枚あり、それぞれアニメーションが異なります。 デモページ:別レイアウト 実装 実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。 紹介記事はこちら。 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js HTML jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。 実装は一枚の広大なカンバスとなるルート(section要素)に、各パネル(div要
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く