Tags

閉じる

Category

閉じる

Search

Search

閉じる

( ・ω・)⊃ “ animation “ の検索結果

mainimg.png

みなさん、アニメーションの参考を探すとき、どこを見てますか?

こんにちは!
わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。
去年から OH (http://wariemon.com) という名前でも活動中です。ご贔屓に。


みなさん、サイト制作のときにいれるアニメーションなど、どこから着想を得てますか?
ぼくは、Hoverstates というサイトをよく参考にしています!
実際に使われているアニメーションが多く掲載されているこのサイトの中から厳選のアニメーションをまとめました!

続きを読む

初めまして!
14年新卒で入社予定の、HTMLファイ部のゴンです!

現在は入社前インターンシップとして、カヤックに通い、
一流のマークアップエンジニアになるべく、研鑽を積んでおります。

今回は、CSSアニメーションやjQueryで使う、イージングの話を書こうと思います。

イージングの話!

イージングとは

イージングは、CSSアニメーションやjQueryで、アニメーションに緩急をつけるために使うプロパティです。
CSSやjQueryでアニメーションを作るとき、ease-inとか、linearとか、設定することがあると思います。

CSSではanimation-timing-functionjQueryではEasingと呼ばれるものです。

いろんな呼び方があるとは思うのですが、この記事ではイージングで統一します。

下はjQueryでアニメーションをするときの例です。

$("div.ball").animate({
    left: "300px";
}, 3000, "easeInQuad");

この"easeInQuad"にあたる部分が、イージングです!
イージングを設定することで、動きに、勢いや波をつけることができます。

イージングを設定して、ボールを左右に動かしたものがこちら!

ball_in_quint.gif

ちなみに、イージングがないとこんな感じです。

ball_linear.gif

イージングを使いこなそう!

イージングは結構、種類が多いです。
例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています!

でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか?
今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、
それぞれのイージングの特徴と、使いどころを紹介します!

続きを読む

CSS3のアニメーションってスゴい!

先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。

ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。
SafariやChromeなどwebkitブラウザで表示してみてください。

※PLAYボタンをクリックすると表示されますよ

見れない人のために動画も撮ってみました。

どうですか?CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。

今回はこのCSSのアニメーションのチュートリアルをご紹介します。

続きを読む

CSSアニメーションでアイコンを動かす

CSSアニメーションを使ってアイコンを動かしてみたいと思います。
以下、気をつけた点。

  • CSSアニメーションに非対応のブラウザでもアイコンとして成立している
  • 過剰なマークアップをしない

現実的に使えそうな路線で頑張ってみました。

続きを読む

警告とメッセージ