タグ「かわいいアニメーション」

タグかわいいアニメーション

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 14 / 14件)

商用利用無料！UIでよく見かけるかわいいアニメーションで動くSVGアイコンがコピペで利用できる -Potlab Icons | コリス

2019/04/15 66 users コリス SVGアイコン Potlab Icons コピペ

雪がしんしんと降るアニメーションや天気、一言メモまでタブに表示できる拡張機能「New Tab」 - GIGAZINE

2016/01/01 15 users GIGAZINE webstore タブ Chrome 天気

ブラウザで新規タブを開いたときに、雪がしんしんと降り積もるアニメーションを表示してくれるChromeの拡張機能が「 New Tab 」です。かわいいアニメーションだけでなく、時間や天気、一言メモまで表示できるとのことなので実際に使ってみました。 New Tab - Winter Animation - Chrome ウェブストア https://chrome.google.com/webstore... 続きを読む

[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ | コリス

2015/01/15 93 users ソリッドコリスチュートリアル CSS ゴーストボタン

大きな写真画像の背景やMaterial Designなどのフラットなスタイルに合うソリッドなラインでデザインされたゴーストボタンを実装するチュートリアルをまとめました。シンプルなものから、かわいいアニメーションや一味違...記事の続きを読む続きを読む

ぷるるんと動くアニメーションが気持ちいい！新感覚のナビゲーション -Gooey pagination | コリス

2014/10/30 67 users Safari Firefox Chrome コリス縦長ページ

コンテンツスライダーや縦長ページのナビゲーションでよく見かけるビュレットタイプのナビゲーションをかわいいアニメーションで実装するテクニックを紹介します。アニメーションの操作が気持ちいいので、コンテンツより楽しんでしまうかも。実際の操作は、下記ページでお楽しみください。 ※Chrome, Safari, Firefox, IEは11では動作しました。 Page scroll concept こっ... 続きを読む

[JS]ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるスクリプト -Stackbox | コリス

2014/07/04 54 users jQuery コリスモーダルボックスメインページぺら

ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるjQueryのプラグインを紹介します。ぷるぷるだけでなく、ぶらーんとさせたり、しゃかしゃかさせたり、ぺらっとさせたり、さまざまなものが揃っていて楽しいアニメーションが満載です。 Stackbox Stackbox -GitHub Stackboxのデモ Stackboxの使い方 Stackboxのデモデモはメインページだけでなく、デ... 続きを読む

[CSS]ボタンにぷるるんとかわいいアニメーションを与えるスタイルシート -Galatin effect | コリス

2014/05/21 91 users アニメーションgif アニメーションゼリーデモ HTML

a要素にテキストを配置して実装したシンプルなボタンに、ゼリーのようにぷるるんとさせるアニメーションを与えるスタイルシートを紹介します。 ↓は、デモをアニメーションgifにしてみました。実際の動作は、下記ページで楽しめます。 Gelatin over button effect with Sass HTML HTMLは非常にシンプルです。 [html] Click Here Click Here ... 続きを読む

[CSS]アイデアがいい！よく見かける普通のアイコンに一手間加えるスタイルシートのデモ | コリス

2014/05/16 93 users ウェブページ役目アニメーションコリス演出

ウェブページでよく見かけるアイコンをクリックやタップした時に、ちょっとしたアニメーションを加えたデモを紹介します。かわいいアニメーションで楽しくなるだけでなく、アイコンをクリックしてどうなるのかが伝わる役目も果たしています。無くても困らないけど、あると嬉しい演出っていいですね。 Animated Shopping Cart Icons デモではフルーツショップのサイトを例に、カートに商品を入れ... 続きを読む

[CSS]このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション | コリス

2014/02/26 64 users コリス Twitter 蝶番ホバーエフェクト Webkit系

Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。パタリと開いた後、ぷら〜んとするのいいですね。実際の動作は、下記デモページでお楽しみください。 Chrome, SafariのWebkit系がよいです。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awe... 続きを読む

[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation | コリス

2013/11/20 63 users コリス Firefox Chrome アニメーションホバー時

シンプルなHTMLでサークル状に実装したエレメントのホバー時に、かわいいアニメーションを与えるスタイルシートを紹介します。実際の動作は、下記ページで確認できます。 Chrome, Firefoxなどのブラウザでご覧ください。 CSS3 Circle Animation アイデアの元となったのは、こちらのサイトの中央のサークル。 Vibrant Villages サークルのアニメーションは、ここで... 続きを読む

[JS]円グラフにピッツァのようなかわいいアニメーションを与えるスクリプト -Pizza Pie Charts | コリス

2013/11/05 40 users コリス jQuery ピッツァスクリプトドーナツ

円グラフをピッツァやドーナツに見立て、ホール状のものから1ピースを抜き出すようなアニメーションがかわいいエフェクトを備えたjQueryのプラグインを紹介します。円グラフは、確かにホールのピッツァに似てますねｗ Pizza Pie Charts Pizza Pie Charts -GitHub Pizza Pie Chartsのデモ Pizza Pie Chartsの使い方 Pizza Pie C... 続きを読む

[CSS]デザインは美しく、かわいいアニメーションを備えたナビゲーションを実装するデモ | コリス

2013/04/22 211 users MENU 半透明コリスグラデーションアニメーション

シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています... 続きを読む

[CSS]メール用のちょっとかわいいアニメーションを実装するスタイルシートのデモ | コリス

2013/04/16 48 users ポパーコリス便箋 Safari CSS

ホバーで封筒を開き、便箋を出し入れし、また封筒を閉じるアニメーションをスタイルシートで実装するデモを紹介します。画像もスクリプトも一切無しです。 Animated letter ※デモはChrome, Safariがベストです。封筒や手紙のイラストに画像は一切使用されてなく、封筒は変形やボックスシャドウ、便箋は疑似要素などで描かれています。他にもいろいろとアレンジが出来そうですね。 HTML... 続きを読む

[JS]ぷるぷるっとかわいいアニメーションでレイアウトを変更するレスポンシブ用のスクリプト -DyLay | コリス

2013/04/14 168 users jQuery easing コリス jquery.js ソート

ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。 DyLay! V2 DyLay -GitHub DyLayのデモ DyLayの使い方 DyLayのデモデモはフィルタとソートでレイアウトを変更します。デモページ DyLayの使い方 Step 1: 外部ファイル「jquery.js」と「easing.... 続きを読む

ねぇねぇGoogle先生、Eメールってどうやって送られるの？（動画） : ギズモード・ジャパン

2012/05/21 30 users ギズモード Gmail ジャパン AV機器 Google先生

AV機器ねぇねぇGoogle先生、Eメールってどうやって送られるの？（動画） 2012.05.21 20:00 [0] [0] いいかい、みんな！　Eメールはこうなっているんだよ！毎日お世話になっているGmail。どうやってメールは送られて、あの人の元に届いているのか、Google先生がかわいいアニメーションで解説してくれました。それでは、先生お願いします。 Google先生「送信ボタンを押し... 続きを読む

(1 - 14 / 14件)