Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

2023/12/07 176 users auto height displayプロパティ トリガー

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto... 続きを読む

React の新しい概念「トランジション」で React アプリの応答性を改善する - 30歳からのプログラミング

2022/01/02 160 users React プログラミング 応答性 新しい概念 アプリ

React v18 には多くの改善や新機能が盛り込まれる予定だが、そのなかでも特に注目を集めると思われるのが、Concurrent Features と呼ばれる一連の機能。 これらの機能を使うことで、コンポーネントのレンダリングについてより柔軟な設定が可能になり、上手く使えばパフォーマンスや UX の向上を実現できる。 この記事で... 続きを読む

MtFの女性専用スペースの利用について、ひとりのMtFが考えたこと - kuroimtf’s diary

2018/12/28 91 users MtF レズビアンバー 人種 女性専用スペース ツイッター

※ツイッターにて 「自称レズビアンのMtFがレズビアンバーでビアン女性を口説き、断られたらMtF差別だと騒がれた」 その話をツイッターで目にしたとき、つい舌打ちがでた。「またあいつらか……」 自己紹介をしよう。 わたしは、おそらく、MtFというカテゴリーに入る人種である。トランジションはかなり進んでいる方だと思... 続きを読む

アニメーションを使った効果的なモバイルなトランジション例 | UX MILK

2018/11/15 353 users アニメーション UX MILK ソフトウェアデベロッパー

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を... 続きを読む

デモとコード例で学ぶ Vue.js のトランジション

2017/10/20 52 users transit Vue.js デモ Ｔｒａｎｓｉｔｉｏｎ 実装

フロントエンド開発においてトランジション、アニメーションの実装は比較的難しいものだと思いますが、心地の良い UI を作るためには必要不可欠です。Vue.js にはその実装を簡単にしてくれる機能があるので、デモを交えながらその使い方と、強力さを紹介します。 <transition> コンポーネント 要素が挿入、削除される時のアニメーションは Vue.js デフォルトで用意されている <transit... 続きを読む

iOS 純正メールアプリのUIがヤバイ件 — Medium

2016/04/23 287 users iOS medium 純正メールアプリ Slack ヤバイ件

社内のSlackでUI談義が突発的に始まることがあるのだけれども、以前そこで上がったiOS純正メールアプリのUIについてのネタがなかなか面白いのでまとめてみようと思った。結論から言うと、純正メールアプリ、ヤバイ。 まずは観察 メールの新規メッセージ画面は他の純正アプリではあまり見かけないようなトランジションを採用していて、開くと元の画面が少し後ろに下がってナビバーだけが見えつつもメッセージ画面が中... 続きを読む

インタラクション時代における iOS アプリの戻る（閉じる）操作の種類のまとめ 2014年版 - Qiita

2014/12/31 81 users iPhone iOS Qiita 階層 スワイプジェスチャー

背景 iPhone も年々デバイスサイズが大きくなっていき、左上のナビゲーションバー上のボタンを片手で押すことが困難になってきました。そのような時代においてはスワイプジェスチャーによるナビゲーション操作が今まで以上に重要になってきます。また、最近では情報の階層を分かりやすく表現するためにトランジションもどんどん工夫されています。トランジションが複雑になればなるほどその操作も複雑になるため、分かりや... 続きを読む

アプリ開発を外部にお願いする際！とっても重要な動きのディレクション | ブログ｜東京のアプリデザイン制作会社｜株式会社ハラハラ｜harahara Inc.

2013/10/02 73 users ディレクション Flas harahara Inc 外部 実装

弊社はアプリの開発を外部に発注することも多いのですがそういった中でスマホ特有のトランジション(動き)やジェスチャーなどユーザーの右脳に訴えかけるような表現も多くあるのでお仕事をお願いする際に気をつけたいことをまとめてみました。 Webとは違う まず当たり前ですがFlashやjavascriptによるリッチなコンテンツの実装をする場合とは根本的に異なることを認識していただくことが前提です。 Flas... 続きを読む

jQuery Mobileを触りながら覚えよう！ - jsdo.it - Share JavaScript, HTML5 and CSS

2011/06/10 467 users jsdo.it jQuery Mobile エフェクト 属性

Tweet サンプルを用意しました！フォークしてjQuery Mobileを体験してみよう！ スマートフォンサイトをプレビューするには、エディタ画面の「Smart Phone Preview」ボタンをクリックしてください。 こんなことを試してみるとオススメ！ aタグに data-transition 属性を付加するとトランジションのエフェクトを選ぶことができます。 Footer要素を画面下に固定す... 続きを読む

HTML5の可能性を示唆してくれる『HTML5 WOW!』は必見ではなかろうか | 100SHIKI

2011/05/12 76 users 100SHIKI 必見 グラフィックス HTML5 可能性

ちょいと技術的ではあるが、HTML5の可能性を感じられる良いプレゼンテーションだったのでご紹介。 HTML5 WOWを見るには最新のChromeが必要だが、次世代のウェブで何ができるかを知りたい人は必見だろう。 ファイル管理やグラフィックス、オーディオなどなど、「もうウェブでそんなことまで出来ちゃうの？」ということがわかって刺激的だ。 またこのプレゼン自体もトランジションをうまいこと使っていたりし... 続きを読む

オンラインプレゼンツール「Prezi」を使ってみたけど、これはすごいかも知れない

2009/10/29 379 users Prezi プレゼンソフト プレ デモ 既存

■ オンラインプレゼンツール「Prezi」を使ってみたけど、これはすごいかも知れない 少し前に話題になっていたけど使うチャンスがなかったオンラインプレゼンツール「Prezi」、社内でLTをする機会があったので使ってみた。いやぁ、これは相当面白いね。 サイトにあるデモを見ればどういう感じかわかると思うけど、ぱっと見ただけではトランジションが風変わりな普通のプレゼンソフトに見える。でもこれ、既存のプレ... 続きを読む