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

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

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

無料で商用利用も可能な配信・動画・イラストで使えるフリー素材をまとめた「素材屋あいりす」

2022/08/05 11 users イラスト 商用利用 フリー素材 配信 動画

配信画面やデスクトップの壁紙などに使えるイラスト素材や、トランジションに使える動画素材など、配信・動画・イラストで使えるフリー素材をまとめた「素材屋あいりす」が開設されました。素材は無料で商用利用可能で、使用報告すら不要です。 素材屋あいりす | 配信・動画・イラストに使えるフリー素材サイト https://... 続きを読む

Reactのトランジションで世界を分岐させるハンズオン

2022/01/13 30 users React ハンズオン 機構 世界

ReactのSuspense機能に付随するトランジションは、使いこなせば有用ですが裏で何が起こっているのか分かりにくい機能です。この本では、手を動かすことでトランジションの機構をしっかりと理解することを目指します。 続きを読む

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

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

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

Alexa Presentation Languageの限界を超えて、アニメーションや相槌を実現する - ZOZO Technologies TECH BLOG

2019/05/23 9 users 相槌 アニメーション Apl 限界 サイコ

こんにちは。音声UIの開発をしている武田です。今年もAmazon Alexaのコンテストが開催されます。このコンテストで専用の賞まで用意されている今熱いデザイン言語、Alexa Presentation Languageでできることを紹介します。 はじめに APLとは 表示する際のトランジションを追加する トーストを実装する 相槌を打つ さいご... 続きを読む

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... 続きを読む

電撃 - 『とある魔術のバーチャロン』は“トランジション”でシームレスに戦闘可能【TGS2017】

2017/09/21 10 users バーチャロン セガゲームス シームレス 幕張メッセ 電撃

千葉・幕張メッセで開催されている “東京ゲームショウ2017” 内で行われた 『電脳戦機バーチャロン×とある魔術の禁書目録（インデックス） とある魔術の電脳戦機（バーチャロン）』 ステージの様子をお届けします。 『とある魔術の電脳戦機』は、セガゲームスが2018年2月15日に発売する、PS4/PS Vita用対戦型バトルアクションゲームdesu 。 巨大ロボット・バーチャロイドによる対戦型アクショ... 続きを読む

電撃 - 『とある魔術のバーチャロン』シナリオは鎌池先生書き下ろし！ “トランジション”や操作スタイルが判明

2017/09/12 20 users バーチャロン バーチャロイド 電撃 シナリオ 魔術

セガゲームスが2018年に発売予定の、PS4/PS Vita用対戦型バトルアクションゲーム 『電脳戦機バーチャロン×とある魔術の禁書目録（インデックス） とある魔術の電脳戦機（バーチャロン）』 の新情報が公開された。 『とある魔術の電脳戦機』は、巨大ロボット・バーチャロイドによる対戦型アクションゲーム『電脳戦機バーチャロン』シリーズと、鎌池和馬（かまち かずま）先生が電撃文庫で展開する学園異能バト... 続きを読む

iOSのビデオ作成アプリ「Clips」に、ディズニーとピクサーのキャラクターが登場 | TechCrunch Japan

2017/07/22 11 users CLiPS Pixar iOS ウッディー ピクサー

Appleの超簡単 ビデオ編集アプリのClips が、4月の公開以来初めて大きく改訂された。追加された中で最大の目玉はコンテンツだ ―― 何といってもDisney/Pixarの世界から数多くのライセンス付きキャラクターが加わった。あのミッキーやウッディーがオーバーレイやトランジションのアニメーションになって登場する。 コンテンツは、簡単で失敗のないUIと並ぶClipsの大きなセールスポイントであり... 続きを読む

【起こせミラクル】バルセロナ対パリ・サンジェルマン【トランジションの迷宮で】 - サッカーの面白い戦術分析を心がけます

2017/03/10 7 users サンジェルマン 迷宮 面白い戦術分析 サッカー

ファーストレグを4-0で落としたチームが、セカンド・レグでこの差を引っくり返したことは、チャンピオンズ・リーグの歴史においてないらしい。バルセロナの合言葉は、起こせミラクル。リーグ戦で3バックを導入し、意欲満々でセカンド・レグに臨む。世界的に3-1-4-2の流行を感じるが、バルセロナもそのシステムを取り入れるとは予想していなかった。メッシをトップ下と解釈すれば、3-4-3の菱型になるけれども。ネイ... 続きを読む

適切なプロトタイピングツールを選ぶための５ステップ | UX MILK

2017/01/25 21 users プロトタイピングツール マイクロインタラクション リソース

プロトタイピングツールは、私たちデザイナーにとって重要なリソースとなっています。プロトタイピングツールにより、静的な文書では表現の難しい、アニメーション、トランジション、マイクロインタラクションなど多数の状態を表すことができるようになりました。 このニーズに対応するために、各企業はプロトタイピングツールを作成し始めています。そして今では、定期的に多くのツールが登場するのを目にしています。 しかし、... 続きを読む

2016年も大流行のマイクロインタラクション UX向上のカギは「イージング」 - WPJ

2016/12/21 37 users イージング WPJ ユーザーエクスペリエンス オブジェクト

2016年もUIデザイン界隈で大流行した「マイクロインタラクション」。自然なアニメーションでUXを向上させる鍵はイージングにありました。 アニメーションの長さやスピードを変更すると、非常にユニークなトランジションを作成したり、マイクロインタラクション（『「BMWのドア音」に学ぶ、完璧なUXデザインのためのマイクロインタラクション』参照）のユーザーエクスペリエンスが向上したりします。 オブジェクトを... 続きを読む

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

Java技術最前線 - JavaFX 2ではじめる、GUI開発　第16回 パスとシェイプに関するトランジション：ITpro

2013/10/18 5 users ITpro シェイプ つなぎ GUI開発 バス

前回に引き続き、今回もシェイプについて紹介していきます。 今回は、複数の要素から構成されるパスと、シェイプを対象としたトランジションについて紹介します。 javafx.scene.shape.Pathクラスで表されるパスは、現在の点から次の点までのつなぎを指定していくことで、複雑な形状を記述するシェイプです。 次の点までのつなぎを表すには、javafx.scene.shape.PathElemen... 続きを読む

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

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

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

CSS3を使ったトランジションが素敵なjQueryスライドショープラグイン。使い方もシンプルで良い。 → jq-tiles - コメンター

2012/10/17 13 users コメンター Facebookページ クリエイター シェア

コメンターとは コメンターは、クリエイターの気になるサイトやページをシェアして、匿名ならではの自由なコメントをみんなで楽しむコミュニティです。 このページをシェア 上記リンクをブックマークツールバーに登録することで、閲覧中のサイトをその場でシェアできます。 Facebookページ 2012年8月にオープンしたコメンターのFacebookページでは、クリエイター向けの最新Web/IT情報をどこよりも... 続きを読む

“空飛ぶ車”に新たなライバル、ジャイロコプター型三輪車の開発進む。 | Narinari.com

2012/04/08 12 users ハブ ライバル Narinari.com 空想 オランダ

かつては空想の世界だからあり得た“空飛ぶ車”が、現実の世界で利用される日も実はそう遠くない。米国では軽飛行機にもなる自動車として、2006年から開発が進められてきたテラフージア社の「トランジション」が、2012年後半の販売を予定しているとされているからだ。しかしこのほど、新たにオランダでも“空飛ぶ車”が開発されたそうで、「トランジション」のライバルとなるのか注目されている。 英ニュースサイトのハフ... 続きを読む

空飛ぶ自動車！ついにニューヨーク国際モーターショーでお披露目（+動画）:カラパイア

2012/03/11 15 users カラパイア お披露目 パルモ 自動車 FAA

3月11日2012 空飛ぶ自動車！ついにニューヨーク国際モーターショーでお披露目（+動画） 記事データ パルモ コメント(1) 画像 サイエンス＆テクノロジー 楽天SocialNewsに投稿！ # そらとぶ 2010年にお伝えした空飛ぶ自動車「トランジション」。市販するのにネックとなっていた重量問題が、FAA（米連邦航空局）の特例措置によりクリアとなり、実用化に向けて開発が進められていたがついにニ... 続きを読む

[HTML5] Brilliant and Useful HTML5 Tutorials You Must See – 使えるHTML5のチュートリアルまとめ - mBlog

2011/08/13 35 users mBlog チュートリアル canvasタグ レイアウト 実装

HTML5の使えるチュートリアルをまとめた記事。パーツ製作やシングルページウェブサイト、レイアウト、ポートフォリオ制作、トランジションを使ったイメージホバー、3Dトランジション、Canvasタグを使った制作、フォーム装飾、HTML5 Videoの実装、スライドショー、iPhone向けのHTML5 App制作などが紹介されてます。結構色々と紹介されてるので、目的に合ったチュートリアルが見つかりそう。... 続きを読む

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が必要だが、次世代のウェブで何ができるかを知りたい人は必見だろう。 ファイル管理やグラフィックス、オーディオなどなど、「もうウェブでそんなことまで出来ちゃうの？」ということがわかって刺激的だ。 またこのプレゼン自体もトランジションをうまいこと使っていたりし... 続きを読む

トランジション、3D、手ぶれ補正まで・・・YouTubeのビデオエディターが大幅バージョンアップ！ | IDEA*IDEA

2011/03/24 41 users エディター ビデオエディター YouTube 手ぶれ補正機能

YouTubeのビデオ編集機能が大幅にバージョンアップしたようです。かな〜り使えるようになったのではないですかね。↑ ぱっと見、そんなに変わったようには見えませんが・・・。↑ トランジションが用意されたり・・・。↑ 手ぶれ補正機能がついたり・・・。↑ 映像の縦横変換機能もつきました。ケータイムービーなんかに便利すね。↑ さらに3Dのエディターまでついたよ・・・。二つのカメラで撮影した映像をつなげる... 続きを読む