CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト | NxWorld

2015/12/06 82 users NxWorld ゴースト 矢印 CSS ブラッド

フラットやゴーストといったようにシンプルで一見ボタンと認識しづらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。 サンプルと記述内容について CSSで記述している内容はこのサ... 続きを読む

レスポンシブ対応！無料ダンロードできるすごいHTMLテンプレート素材18個まとめ - Photoshop VIP

2014/09/26 149 users レスポンシブ対応 Photoshop Vip 無料 CSS

昨日ご紹介した記事では、Webデザイン用レイアウトをまとめましたが、今回はすでにデザインは終了し、アニメーションエフェクトやレスポンシブデザインなどを実装した最新テンプレートを集めています。もちろん無料ダウンロードでき、スピーディーにWeb開発を進めることができます。 海外デザインブログnoupeで、新しい無料HTMLテンプレートを中心にまとめたエントリー「20+ Free HTML/CSS, P... 続きを読む

SVGや動画、CSSアニメーションを使った面白いアイデア満載！じっくりチェックしておきたい最近のWebサイトのまとめ | コリス

2014/09/24 77 users コリス SVG ベクターデータ CSSアニメーション モチーフ

まだまだ魅力溢れるスクロールエフェクト、SVGなどのベクターデータや動画を使った演出、ユーザーを楽しませたり注目を得るアニメーションエフェクトなど、面白いアイデア満載のWebサイトを紹介します。 Garden 制作のコンセプト：Garden Estúdio 秋を感じるカラースキームとイラストだけがこのサイトの魅力ではありません。公園のモニュメントをモチーフにしたSVGの素敵なエレメント、スクロール... 続きを読む

任意の要素を3D回転させ、立体的に見せる国産のjQueryプラグイン・TURNBOX.js - かちびと.net

2014/08/05 60 users 国産 net 要素 疑問 相性良さ

任意の要素をアニメーションエフェクトで立体的に見せる、というスクリプト・TURNBOX.jsのご紹介。フラットなデザインと相性良さそうです。 要素に立体的なアニメーションエフェクトを与えて、3DなUIにする事ができます。フラットなデザインに使って欲しいとの事です。開発者さんはNOHTさんという日本の企業さんなので疑問があった場合でも連絡が取りやすいので安心ですね。 TURNBOX.js 動作サンプ... 続きを読む

面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」:phpspot開発日誌

2011/12/22 61 users jQueryプラグイン phpspot開発日誌 IE6 文字

textualizer 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 様々なアニメーションエフェクトがあり、文字に動きをつけて注目を集めたい場合なんかに使えそうです。 IE6を含むレガシーなブラウザにも対応しています。 次のような簡単な分かりやすいソースコードで実装できます。 キャンペーンサイトなど、インパクト重視のサイトに入れてみるとよさそうですね 関連エ... 続きを読む

jQuery事始めvol.2・画像にマウスオーバーして動作するアニメーションエフェクトを作ってみる - かちびと.net

2011/04/04 110 users マウス net 画像

以前に書いたjQuery事始め、という記事の 続編のような内容の記事です。基本を理解 したら今度はコードを真似して体で覚えて みるのも勉強方法の有効な手の一つだと 思います。ご自分で改変して遊べる程度の 簡単なコードなのでぜひチャレンジしてみて ください。 内容はjQueryを覚えたいけどなかなか時間が無い、というWebデザイナーさん向けです。多くのプラグインやチュートリアルが存在しますが、jQu... 続きを読む