[B! UI][animation] ko-ya-maのブックマーク

ko-ya-ma id:ko-ya-ma

UIとanimationに関するko-ya-maのブックマーク (22)

Magic UI
50+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. Perfect companion for shadcn/ui.
ko-ya-ma 2024/05/24
ui

css

library

WebDesign

animation
リンク
[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート
最近ではグラデーションの使い方がいろいろ進化しています。中でも、ホバーやスクロールに合わせて、グラーデションが変化するエフェクトは非常に美しく、一度は試してみたい実装だと思います。ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します。実装は非常に簡単で、応用も利くので、ぜひお試しください。 Stunning hover effects with CSS variables by Tobias Reich 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。インスパイアされた美しいグラデーショングラデーションが変化するエフェクトの実装方法実装したデモこのエフェクトの可能性よくある質問と答えインスパイアされた美しいグラデーション Groverにある遊び心溢れる美
ko-ya-ma 2019/03/07
ui

css

javascript

animation
リンク
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。システムステータスの表示何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
ko-ya-ma 2018/11/15
ui

ux

animation

sample
リンク
どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。ユニバーサルスライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。互換性 React、VueJS、Angu
ko-ya-ma 2018/05/18
ui

javascript

jquery

react.js

vue.js

library

dev

animation
リンク
Web新時代！心地よいアニメーションを実現する6つの基本テクニックまとめ
機能的なアニメーション（英: Functional Animation）とは、論理的ではっきりとした目的を持った、控えめなアニメーションを指します。読み込み時間を短く感じさせるだけでなく、ユーザーインターフェースに生命を吹き込みます。インターフェースデザインを掛けあわせたり、分割したり、シェイプやサイズを変更することで、まるで人間のように、生きているような動きを実現できます。ナビメニューに応じてユーザーをスムーズに移動させたり、スクリーンに応じて要素が整理、変更されるのを伝えたり、デザイン要素の階層を補強するために、機能的なアニメーションを利用するように心がけましょう。今回は、アニメーションをうまく利用する6つの基本原則、テクニックをまとめてご紹介します。詳細は以下から。 01. レスポンシブなアニメーション UIデザインにおいてビジュアル・フィードバック（英: Visual Fee
ko-ya-ma 2016/08/03
animation

ui

ux

webdesign

tips
リンク
javascript-best-2016-may.html
最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。
ko-ya-ma 2016/05/17
css

javascript

animation

ui

sample
リンク
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
ko-ya-ma 2015/06/19
メニュー開く・閉じるの間のアニメーションサンプル集

ui

sample

css

animation

code
リンク
Webデザインのすごいアイデアや細かいこだわりがいっぱい！素晴らしいUXを堪能できるサイトのまとめ
デザインの細かいこだわりがすごい！こんな面白いアイデアはどこから生まれるんだろう？ CSSやSVGでこんなこともできるのか！次のプロジェクトのヒントになるような素晴らしいUXを堪能できるWebサイトを紹介します。時間のある時に、じっくりお楽しみください！
ko-ya-ma 2015/06/12
UX

web制作

まとめ

ui

idea

sample

animation

css

scroll
リンク
アニメーションが表現できる直感的なUIデザイン・プロトタイピングツール「Atomic」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。今回はUIデザイン・プロトタイピングツールの「Atomic」をご紹介します。ブログのネタ探しにネットサーフィンをしていたら偶然見つけたものなのですが、サイトを見ているだけで簡単そう＆すごそう！と思ったので実際に使ってみました。 Atomicとは https://atomic.io/ まずは、思わず使いたくなった紹介動画をご覧ください。アニメーションまでつけた分かりやすいプロトタイプが、なんともサクサクと簡単に……！しかも無料。（beta版だけかもしれませんが）これはとりあえず試してみるしかない！公式サイトの「SIGN UP FOR FREE」から登録ができます。「Atomic」の特徴それでは「Atomic」の特徴について、くわしくご紹介します。ブラウザ上で使える「Atomic」は、WindowsでもMacでも使えるオンラインツールなので
ko-ya-ma 2015/06/12
Prototype

ui

webservice

mockup

share

animation
リンク
ピュアCSSでシャキシャキ動くローディングアニメーション集「Loaders.css」:phpspot開発日誌
Loaders.css ピュアCSSでシャキシャキ動くローディングアニメーション集「Loaders.css」フラットなデザインに合いそうなモダンなローディングエフェクトが多数収録。スマホサイト等で活用できそうです関連エントリ流行りのYoutube風ローディングバー実装jQueryプラグイン超カッコ良いプレローディングエフェクトサンプルモダンなローディングエフェクトが実装できる「fakeLoader.js」
ko-ya-ma 2015/05/26
css

design

ui

animation
リンク
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
ko-ya-ma 2015/02/06
css3

JavaScript

まとめ

animation

ui
リンク
よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements
ボタンがぷるるんと弾けたり、サイドバーがゴムのようにびよ～んとスライドしたり、フォームがぶるったりと、Webページのさまざまな要素に柔軟性を加え、操作が楽しくなる「Elastic SVG Elements」を紹介します。
ko-ya-ma 2014/12/16
こりゃ楽しい

svg

animation

ui
リンク
[JS]スマホやタブレット向けの操作を楽しくするさまざまなアニメーションを実装できるスクリプト -Impulse
Bouncy Scrolling ※アニメーションGIFにしたらサイズがすごかったので静止画像です。デモページには他にもたくさんのデモがあります。 Impulseの使い方実装は各デモによってHTMLやJavaScriptが異なるので、「Pulldown Menu」で実装方法を紹介します。 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。ここは全デモ共通です。 <head> ... <script src="/scripts/impulse.js"></script> </head> Step 2: HTML ヘッダ、メニュー、コンテンツをそれぞれdiv要素で実装します。 <body> <div class="nav-header"> <div class="hamburger-menu-handle"></div> </div> <div class="pu
ko-ya-ma 2014/09/02
javascript

Animation

webdesign

ui

smartphone

scroll
リンク
[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート（SASSも有り）を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方使い方は非常に簡単です。 Step 1: 外部ファイル当スタイルシートを外部ファイルとして記述します。 <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK! Step 2: HTML あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。 <a class="
ko-ya-ma 2014/01/07
旧IE対応も必要か

css

css3

ui

button

animation

lib

MIT
リンク
IDEA * IDEA
ドットインストール代表のライフハックブログ
ko-ya-ma 2013/06/15
気の利いたちょっとした変化

css

ui

animation

web

css3
リンク
jQuery.Shapeshift
jQuery plugin which creates a column based grid system with drag and drop.Details Column Grid System: All it ems flow from left to right, top to bottom. Drag & Drop: Click and drag elements to move them, even to different containers. Responsive: Resize the browser window so see the grid change with the new dimensions. Works on Touch: Enable drag and drop on touch devices by using the included jQuer
ko-ya-ma 2013/04/24
ユーザがドラッグ＆ドロップでレイアウトを変えられる。その際、良い感じでアニメーションする

ui

jquery

animation

lib

javascript
リンク
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
ko-ya-ma 2013/04/10
html5

css3

ui

animation

code

ux

sample
リンク
半歩先いくかっこいいエフェクトだけでなく実装にもこだわったCSSのフレームワーク -Maxmertkit
単独でも素敵なかっこいいエフェクトで十分なのに、それらが全部まとまって、更に実装方法にもこだわったオープンソースのCSSのフレームワークを紹介します。ドラッグ&ドロップでさまざまなエレメントを表示します。 Maxmertkitの特徴 Maxmertkitのデモ：スタティック Maxmertkitのデモ：CSS3アニメーション Maxmertkitのデモ：ソーシャルメディアてっとり早くワクワクしたい人は、3つ目の「Maxmertkitのデモ：CSS3アニメーション」をご覧ください。 Maxmertkitの特徴 SASSベースのオープンソースのフレームワーク CSS3アニメーションを使った演出効果他のフレームワークとかぶらないネームスペースデザイン（カラー・サイズ）変更はテーマで簡単 Creed Creed（主義）のページではMaxmertの主な特徴が解説されています。例えばコードの簡
ko-ya-ma 2013/01/23
ui

css

animation

web

framework

OpenSource
リンク
[CSS]これは素敵なアイデア！borderを使ったCSS3アニメーションのテクニック
Simple yet amazing CSS3 border transition effects デモ実装デモデモはFirefox, Chrome, Safariなどのモダンブラウザでご覧ください。 IEはたぶん10でしょうか。デモは大きく分けて、3種類です。デモ下段最後は矩形のデモ、円形とは異なるアニメーションが楽しいです。実装 HTML HTMLは非常にシンプルでa要素にclassを指定するだけです。 <a href="#" class="one"></a> <a href="#" class="two"></a> <a href="#" class="three"></a> ... ... CSS まずは、共通のスタイルシートから。かわいい車の画像はdate:imageです。 a { background-image: url(data:image/gif;base
ko-ya-ma 2012/10/05
javascriptなしのホバーアニメーション。

css3

animation

ui
リンク
[CSS]タブコンテンツにCSS3アニメーションを少しだけ加えてかっこよくするチュートリアル
JavaScriptを使用しないで、スタイルシートでタブコンテンツを実装するポイントから、コンテンツの切り替えやタブのフォーカス時にちょっとしたCSS3アニメーションを加えるチュートリアルを紹介します。 Demo 4: 垂直型タブ実装 HTML タブの各コンテンツはdiv要素で、タブはinput要素で実装します。input要素のチェックでタブを切り替えます。 <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set"
ko-ya-ma 2012/04/16
css3

tab

ui

animation

tutorial

code

sample
リンク
1 2 次のページ