コピペで簡単実装！押したくなるボタンエフェクト用HTMLスニペット44個まとめ - PhotoshopVIP

2020/02/07 14 users PhotoshopVIP コピペ CSS HTML テクニック

この記事では、HTMLとCSSを中心にデザインされた、思わず押したくなる最新ボタンエフェクト用コードスニペットをまとめてご紹介します。 コンテンツに注目を集めたいときに最適なテクニックが中心で、CSSのみでスタイリングできるアニメーションエフェクトも手軽にコピペで利用できます。 ウェブがますます進化し、ネッ... 続きを読む

CSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリ・「Scene.js」 | かちびと.net

2019/09/24 13 users プリセット CSS ライブラリ net 制御

Scene.js Scene.jsはCSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリです CSSとJSの両方をサポート、SVGサポート、時間の制御、タイムラインベースで複数要素を同時に制御、アニメーションエフェクトを手軽に付与できるプリセットなどを特徴としています アイデアと応用... 続きを読む

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 動作サンプ... 続きを読む

Font Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSS・「Font Awesome Animation」 - かちびと.net

2014/01/30 13 users Font class エフェクト CSS アイコンフォント

Font Awesome Animation Font Awesome AnimationはFont Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSSです。CSSを読み込んで指定されたclassを加えればアイコンをアニメーションさせる事が出来ます。CSS3に対応したブラウザのみエフェクトがかかりますので利用シーンは限られそうですが、手軽に使えて良さそうです。 Font ... 続きを読む

パララックスエフェクトを効果的に使った、ミニマルサイトデザインまとめPhotoshopVIP |

2013/10/23 41 users パララックスエフェクト ウェブサイトデザイン Inspir

スクロールすることで、アニメーションエフェクトをたのしむことができる、パララックスエフェクト。最近のデザイントレンドでもあるミニマル、フラットデザインと一緒に利用することで、より繊細なうごきを表現するWebサイトが増えているようです。 海外デザインブログWebDesignLedger.comで、パララックスエフェクトを利用した、シンプルなウェブサイトデザインをまとめたエントリー「17 Inspir... 続きを読む

フラットでカッコいいモーダルダイアログ実装デモ:phpspot開発日誌

2013/07/12 25 users phpspot開発日誌 Codrops デモ 一見 価値

Nifty Modal Window Effects | Codrops フラットでカッコいいモーダルダイアログ実装デモ。 表示される際のアニメーションエフェクトが豊富に用意されていてデモとして一見の価値ありです。 勿論、サンプルそのままDLできるのでカスタマイズして使うこともできそう 関連エントリ 何でも埋め込めてカッコいいモーダルダイアログ実装用jQueryプラグイン「Pop Easy」 jQ... 続きを読む

CSS3を使った多彩なアニメーション用ライブラリ「magic」:phpspot開発日誌

2013/06/21 26 users Magic フェードイン phpspot開発日誌 Flash

CSS3を使った多彩なアニメーション用ライブラリ「magic」 2013年06月21日- magic css3 animations CSS3を使った多彩なアニメーション用ライブラリ「magic」 要素をフェードイン、アウトさせる等の多彩なアニメーションが詰まっています。 スマホやタブレットで要素にアニメーションエフェクトを付けたい際に使えるかもしれません 関連エントリ Flashみたいに美しいC... 続きを読む

CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」:phpspot開発日誌

2013/02/18 39 users jQueryプラグイン phpspot開発日誌 CSS3

CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 2013年02月18日- Textillate.js CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」。 実に様々なテキストアニメーションが実現できてページにアニメーションエフェクトを付けたい際に便利。 CSS3非対応ブラウザは動作し... 続きを読む

Lettering.jsを併用して、任意のテキストにCSS3のアニメーションエフェクトを実装するスクリプト・textillate.js - かちびと.net

2013/01/31 34 users テキス Lettering.js エフェクト ライブラリ 種類

ちょっと面白かったのでメモ的に。 タイポグラフィ用のライブラリ、 Lettering.jsを併用して、テキス トにCSS3によるアニメーション効果 を容易に与える事が出来る、という スクリプトのご紹介。 使いどころは限定されますが、動きが面白かったのでメモ的に。以前ご紹介したLettering Animateを少し進化させたような感じ。 textillate.js エフェクトの種類もかなり用意され... 続きを読む

カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」:phpspot開発日誌

2012/11/20 28 users Baraja phpspot開発日誌 アニメーション カード

Baraja: A Plugin for Spreading Items in a Card-Like Fashion | Codrops カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」。 カードをシャッフルしたり広げたり、自在に操るアニメーションエフェクトを作成できるjQueryプラグイン。 こんなアニメーション機能が、ほとんどのブラウザでも使えたらまさに次世代に... 続きを読む

jQueryで動かすアニメーションエフェクトが素敵なプリローダー・CUSTOM PRELOADER EFFECT - かちびと. net

2012/01/11 36 users プリローダー jQuery easing CSS 備忘録

ちょっとお洒落なプリローダーを探してた という方の参考になるかな・・と思ったの と、自分でも使いたかったので備忘録です。 アニメーションエフェクトが素敵なプリ ローダー・CUSTOM PRELOADER EFFECTの ご紹介です。 エフェクトはjQueryとeasingで動かし、エレメントはcssで作成しています。コードも軽量で分かりやすいし、エレメントはcssベースなのでなかなか使い勝手がいい... 続きを読む

面白いテキストアニメーションが作れる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... 続きを読む