2016年03月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

マスクがかかっている画像のスライスを一瞬で。(photoshopのスライススピードアップ)

psdファイルをスライスするとき
「レイヤーに基づく新規スライス」を使うと激的に早くなるよね。

ショートカットを割り当てておくとさらに早くなる。

やりかた http://dis.ne.jp/blog/topics/3035.html 


これ、めちゃめちゃ使うんだけど、1つ困ったことがあって、マスクがかかっている画像は、元画像の大きさにスライスが作られちゃったりして、不便だった。

デザイナーの知人に相談したら
「マスクがかかっていたらレイヤー結合しちゃえばいいよ」

それでした。

選択ツールで画像をクリックして、「あ、マスクかかってるな」と思ったら、その場ですぐに「command+E」(すぐ下のレイヤーと結合)

するとマスクと画像が結合されて、欲しいものができる。

そしてすかさず、レイヤーからスライス作成!!

僕は、alt+command+1 に割り当ててるから、連続技でこれをやると、マスクがかかっている画像も0.7秒でスライスできる。

できる、スライスが。 

androidでも速いハンバーガーメニュー(開閉メニュー)をつくる

スマホといえば、もう最近はほぼハンバーガーメニューだよね。
タップで上から降りてくる。
バツボタンをタップでまたあがっていく、というような。

普通につくると、以下のようにやりたくなる。

$('header nav').css({"top":"-1000px"});
$('#openMenu').click(function(ev){
ev.stopPropagation();//①
$('header nav').height($(window).height());//②
$('header nav').animate({top:0});//③
$('body,html').css({"overflow":"hidden","height":"100%"});//④
}); 

あらかじめ上のほうにメニューをふっとばしておいて、
#openMenuボタンをクリックしたらanimateでtop:0まで降りてくる。 

細かく説明すると、
①android対策等で親要素にクリックが伝搬しないようにする
②降りてくるメニューはウィンドウと同じ高さにセット(必要に応じて使う)
③メニューをtop:0の一までおろしてくる
④メニュー内をスワイプしてるときに背景がスクロールしちゃうのを防ぐ

わりとシンプル。
iphoneだけならこれでも全然いい。

※閉じるの処理はちょっと割愛してます。


でもandroidだと

「なんか遅いんですけど」
とか言われたりする。

そういうときは、めんどくさいけど、css3でアニメーションさせることになる。

んで作ったのが以下の様な感じ。

css

header nav{
width:100%;
top:-1000px;
overflow:scroll;
transform:translate(0px,0px);
-webkit-transform:translate(0px,0px);
transition: transform 0.3s ease-out;
}

header nav.on{
transform:translate(0px,1000px);
-webkit-transform:translate(0px,1000px);

js

$('#openMenu').on('click',function(ev){
ev.stopPropagation();
$('header nav').height($(window).height());
$('header nav').addClass('on');//⑤
$('body,html').css({"overflow":"hidden","height":"100%"});
}); 

jsはもともとのとほとんど同じだけど、animateで動かしてたのを消して、addClassだけになった。
⑤class="on"をnavタグにつける。

そしてアニメーション処理をやらせてるのは、cssのほう。

transitionでアニメーションで動くようにして、
.onがついてるのとついてないので、transform:translate(x,y)の位置を変えるという処理。

※閉じるの処理は割愛


 androidでtransformが効かなくて30分ほどロスしたけれども、ただ-webkit-プレフィクスをつけるだけだったという。

注意ですわね。 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ