sej20xx のすべての投稿

ハンバーガーメニューからバツに変化するトグルアニメーション

ハンバーガーメニューのラインを活かしたトグルアニメーションのうち
2017年8月現在アップル社のスマホUIにも採用されている
ハンバーガーメニューと閉じるボタンを意味するバッテンの表現とを往復する
トグルアニメーションを作成しCodePenに置きました

See the Pen hamburger to cross by sekiyaeiji (@sekiyaeiji) on CodePen.dark

アップル社のスマホUIではハンバーガー風のデザインは2本線なのですが
ハンバーガーメニューは一般的には名前の通り(つまりバンズと具による)3本線なので
3本ラインにして、中央の1本は
バッテン表現の際にジャマにならないように
回転しながらフェードアウトしてしまっています

このようなアニメーション表現の存在は
時として不当に軽視されがちですが
インタラクションの前後関係を説明する小さな気遣いとして
使いどころによってはヘルプなどの言葉による説明よりも
実ははるかに有用な場合もあると感じます

3本の線が移動するだけのアニメーション表現ですが
移動の軌跡のバリエーションには限りがありません

こんなにシンプルなマイクロインタラクションですが
CSSアニメーションはまだまだ多彩な可能性を秘めていると思わせられる表現の一例だなと感じました

スマホ Google画像検索の スワイプインタラクション をまねてみるデモ

スマホブラウザで Google image search して画像をタップすると
こんなスワイプインタラクションがあらわれるよね、というデモ
 
 
demo : 『Swipe like Google image search on smartphone』 JSFiddle

 
このデモはpointerイベントには対応してないので
Touch PCでは動きません。

また、Android2系以下でスムースに動かないももあるかもですが、
その場合は動作のどれかをフォールダウンする必要がありますね。

Mac で Compass 1.x.x にうまくアップデートできないときに疑ってみる 「xcode-select」

Compassをインストールした後に
Mac OS を Mavericksにアップデートしたからか…

なぜそうなったのかは不明だが
自機において Compass が0.x.xから1.x.xにバージョンアップできなかったため
ググったら出てきたので以下にまとめた。
 
 
『Mavericks における Compass 0.1x.x → 1.x.x アップデート には 要 xcode-select –install』 Qiita
 
 
SASSの最新の機能が使えるようになった。

複数行にも3点リーダー(「…」)を表示する

-webkit-line-clamp によって
webkit系のブラウザにおいて
複数行のテキストにも三点リーダーが表示できるということで
demo をつくってみるテスト。
 
 
demo 『webkit-line-clamp』 CodePen

See the Pen webkit-line-clamp by sekiyaeiji (@sekiyaeiji) on CodePen.


 
 
以下の4つのプロパティで表現しています。

display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;

 
終端に設定したい行数を
この -webkit-line-clamp に値として設定するのですね。

-webkit ベンダープレフィックスが記述されていることからわかる通り
webkit系ブラウザのみで再現されます。

ただし、iOSやAndroidの旧バージョンのブラウザにおいて
すべて正しく動作する保証はありません。
 
 
1行のテキストにおける三点リーダーの場合は
以下のように

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

 
によって表現できたわけですが
webkit系ブラウザ以外でも徐々に複数行の3点リーダー表現が
可能になりそうです。