tmlib.js の AnimationSprite を使ってコマ送りアニメーションさせてみよう | TM Life
tmlib.js の最新版には AnimationSprite と SpriteSheet というクラスが定義されています. これらのクラスを使う事で ActionScript ライクにコマ送りアニメーションさせることができます. 幾つかサンプルを用意しましたのでよかったら参考にしてください. Table of contents tmlib.js って何？ SpriteSheet って何？ AnimationSprite を使ったサンプル AnimationSprite の使い方 Reference tmlib.js って何？ そもそも tmlib.js って何って方のために軽く紹介. 簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリです. 詳しくは下記のリンクにて tmlib.js とは 以前, 勉強会で発表させていただいたスライドです. GitHub tm
東京スカイツリー TOKYO SKYTREE
このたびの「令和６年能登半島地震」により被災された皆様に心よりお見舞い申し上げます。 一日も早い復興をお祈り申し上げます。
Solitary CSS3 Slider (Fade Transition) | CSSDeck
Blog New Fork Share Full Screen Result Embed on your webpage (blogs, articles, etc.) | | Login I made this very cool slider using just CSS3 (Not a single line of JS or jQuery is used in this slider). It uses :target pseudo class to select the current image to be displayed. The ids on images are same as the href of the links so when a link (or navigation button) is clicked, the image corresponding
これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス
Flashも無し、jQueryも無し、キーフレームを使ったCSS3アニメーションで実装したかっこいいドロップダウン型のナビゲーションを紹介します。 Two Level Superfishy Menu [ad#ad-2] デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a href="#">Home</a></li> <li> <a href="#">About Us</a> <ul> <li><a href="#">What we do</a></l
CSS3 Animations；アニメーション - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋
coding かつては4ブラウザの接頭辞を含めなければ動作しないという、スタイルシートがとんでもなく冗長になるということがあったが、2013年6月時点での実装では、webkit/blinkのみ接頭辞を用意すれば良い。 @keyframesの後にキーフレーム名を記述し、アニメーション変化の仕方を記述する。0%が始点、100%が終点となる。それぞれエイリアスでfromとtoのキーワードが用意されているが、今回のサンプルでは用いていない。 自然にループさせるために、0%と100%に同じプロパティを用意し、50%に変化させるプロパティを記述した。また、:hover擬似クラスでマウスを置いたときにアニメーションが開始するように仕向けておき、animation-iteration-count: infinite;として、無限ループするようにしてある。animation-nameで@keyframesで
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
jQueryで塗りがアニメーションするようなギミックを作る
Flashでよくやっていた表現で、jQueryで置き換えられるものはないかと考えていて、ふとコレを思いついたので紹介します。応用次第ですので、アイディアのネタとして見てください。 今回も、言葉で表現しにくいので、↓のデモをモダンブラウザで見てください。 マウスオーバでアニメーションします。 作り方 このアニメーションは、同じサイズのPNGファイルを2つ重ね、後ろの画像をアニメーションさせることで、実現しています。 前面画像の白い部分は、透明になっていて、背景画像が透き通ってみえるようになっています。その状態で、背景画像をアニメーションさせることで、塗りがアニメーションしているように見えるというからくりです。 HTML+CSS いたってシンプルです。前面画像をコンテナDIVで囲み、コンテナDIVに背景画像を設定しています。 <!DOCTYPE html> <html lang="ja"> <
[CSS]ホバー以外にも使ってみたいCSS3アニメーションのテクニック
アニメーションのエフェクトを仕込む際、:hoverを使ってユーザーのホバー操作に対して実行することが多いですが、それ以外の擬似クラス :active, :focus, :checked, :disabled やMedia Queriesに仕込むスタイルシートのテクニックを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに -「:hover」の例 「:active」でCSS3アニメーション 「:focus」でCSS3アニメーション 「:checked」でCSS3アニメーション 「:disabled」でCSS3アニメーション Media QueriesでCSS3アニメーション 対応ブラウザ はじめに -「:hover」の例 CSS3アニメーションのトリガーとしては、「:hover」を利用す
animation-delay－CSS3リファレンス
CSSソースは外部ファイル（sample.css）に記述 div.sample { animation-name: anime1; animation-duration: 5s; animation-timing-function: ease; animation-iteration-count: infinite; animation-delay: -2s; } @keyframes anime1 { 0% {width: 50px; height: 50px; background-color: aqua;} 100% {width: 200px; height: 50px; background-color: blue;} } HTMLソース <html> <head> <link rel="stylesheet" href="sample.css" type="text/css">
デキテル 車検 鈑金塗装 中古車販売のホームページを2分で作成
車屋さんのWEB集客を 最大化しませんか？ 最強のWEB集客の最大化プラン。 クルマ業界専門のWEBコンサルタントが責任をもって実施します。
クロスフェードとは - IT用語辞典
概要 クロスフェード（crossfading）とは、複数の音声を繋ぎ合わせる技法の一つで、前の音声をフェードアウトしながら、同時に次の音声をフェードインすること。繋ぎ目をはっきり区切らずに滑らかに移行することができる。 先に流していた音声のボリュームを少しずつ絞っていき、同時に次の音声のボリュームを次第に大きくしながら重ねて流し、滑らかに次に移行する。DJが様々な曲をミックスする際に曲間の切れ目を意識させず円滑に次の曲に移行したい場合などによく用いられる。 映像の場合、先のシーンを少しずつ暗転させて消していき、同時の次のシーンを少しずつ浮かび上がらせながら重ねて流す繋ぎ方を「ディゾルブ」（dissolve）というが、これを音声と同じようにクロスフェードと呼ぶこともある。 クロスフェード再生音楽プレーヤーなどの持つ再生機能の一つで、前の曲をフェードアウトさせながら同時の次の曲をフェードインし
Hype
Animate in a Snap Tumult Hype’s keyframe-based animation system brings your content to life. Click “Record” and Tumult Hype watches your every move, automatically creating keyframes as needed. Or, if you’d prefer to be more hands-on, manually add, remove, and re-arrange keyframes to fine-tune your content. It is easy to create natural curves by clicking and dragging on an element's motion path to
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition対応ブラウザ：webkit系(GoogleChrome、Safari等)JavaScript：未使用（※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-in-
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://saucerjp.heroku.com/