CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト - NxWorld
フラットやゴーストといったようにシンプルで一見ボタンと認識しずらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。 今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。 サンプルの記述内容について CSSで記述している内容はこのサンプルの見た目に関する記述も多いので、矢印の動きのみ抜き出したい場合はボタンとなる要素にposition: relative;を追記し、::before, ::afterで記述している内容や:hoverで記述している部分を使ってもらえれば同じ動きを再現できるかと思います。 また、紹介しているボタンに付いている矢印アイコンは、いずれもCSSのborderを使って実装をしています。 サイトによっては
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
【jQuery】斬新な動きのスライドショーが魅力の［Fullscreen Slit Slider］の使い方
今日は大胆な動きのスライドショーが魅力のjQueryプラグイン［Fullscreen Slit Slider］を紹介します。 まずは実際に［Fullscreen Slit Slider］を使ったサンプルをご覧ください。 実装サンプル：ONZE Fullscreen Slit Slider こちらのサンプルではカスタム仕様で「フルスクリーン対応、」「2.5秒ごとに自動再生」「キーボードの左右でスライダーを制御可能」にしています。 スライダーが切り替わるタイミングで上下左右に大胆なスリットが入り、ダイナミックな動きで次のコンテンツが表示されていきます。 見ていても気持ちイイ滑らかさですよね。 基本的にはコピペで実装できますが、細かな設定にはjQueryもしくはJavaScriptのプログラミングの知識が必要なので、難易度は中級〜上級者仕様になります。 初心者にはちょっと難しいかもしれません。
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
pure JavaScriptでアニメーションGIFを作る - 海峡
こんばんは、国民的スポーツのアニメGIFについてのニュースをお届けします。 今回はクライアントサイドのJavaScriptだけでアニメーションGIFを作る方法を共有させて頂きます。 ふつうアニメGIFを作ろうと思うとimagemagickなどを使ってサーバーサイドで処理させると思いますが、今回紹介するのはブラウザだけでアニメGIFを作る方法です。 jsgif antimatter15/jsgif · GitHub jsgifというJavaScriptでCanvasをアニメGIFに変換してくれる超絶便利ライブラリがあるのでこれを使います。 同名でアニメGIFをCanvasで制御再生できるライブラリがあって、そっちのほうが有名ですがそれとは別です。 どうやらAS3のライブラリをJSに移植したものみたいでソースコードを読もうとしても全然分からないけど、便利すぎるので全面の信頼をおいて使います。
Happy Programming » 上から落ちてきてバウンドして止まる写真
サムネイルをクリックしたら拡大画像が表示されるというJavascriptライブラリには有名な所で'Lightbox'や'highslide'がある。 それぞれのサイトではデモも見られるし、ダウンロードして自分で使う事も出来る。 http://highslide.com/ http://www.huddletogether.com/projects/lightbox2/#download いろんなサイトでも紹介されている。 もっと簡単なのをちょっと自分でも書いてみた。（例によってPrototype.jsを使用） var DropPhoto = Class.create({ initialize: function(elem) { this.elem = elem; var that = this; this.timeId this.elem.observe('click', function
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cosao.net/archives/5137