森のコーディング森のコーディング2016年03月マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。3月19マスクがかかっている画像のスライスを一瞬で。(photoshopのスライススピードアップ)カテゴリ:Photoshop生産性アップtipspsdファイルをスライスするとき「レイヤーに基づく新規スライス」を使うと激的に早くなるよね。ショートカットを割り当てておくとさらに早くなる。http://dis.ne.jp/blog/topics/3035.htmlこれ、めちゃめちゃ使うんだけど、1つ困ったことがあって、マスクがかかっている画像は、元画像の大きさにスライスが作られちゃったりして、不便だった。デザイナーの知人に相談したら「マスクがかかっていたらレイヤー結合しちゃえばいいよ」それでした。選択ツールで画像をクリックして、「あ、マスクかかってるな」と思ったら、その場ですぐに「command+E」(すぐ下のレイヤーと結合)するとマスクと画像が結合されて、欲しいものができる。割り当ててるから、連続技でこれをやると、マスクがかかっている画像も0.7秒でスライスできる。2016年03月19日01:18tacshockコメント:0トラックバック:03月14androidでも速いハンバーガーメニュー(開閉メニュー)をつくるカテゴリ:jQueryiphone/ipadサイトスマホといえば、もう最近はほぼハンバーガーメニューだよね。タップで上から降りてくる。バツボタンをタップでまたあがっていく、というような。普通につくると、以下のようにやりたくなる。nav').animate({top:0});//3$('body,html').css({"overflow":"hidden","height":"100%"});//4});あらかじめ上のほうにメニューをふっとばしておいて、#openMenuボタンをクリックしたらanimateでtop:0まで降りてくる。細かく説明すると、1android対策等で親要素にクリックが伝搬しないようにする2降りてくるメニューはウィンドウと同じ高さにセット(必要に応じて使う)3メニューをtop:0の一までおろしてくる4メニュー内をスワイプしてるときに背景がスクロールしちゃうのを防ぐわりとシンプル。iphoneだけならこれでも全然いい。※閉じるの処理はちょっと割愛してます。androidだと「なんか遅いんですけど」とか言われたりする。いうときは、めんどくさいけど、css3でアニメーションさせることになる。作ったのが以下の様な感じ。nav').addClass('on');//5$('body,html').css({"overflow":"hidden","height":"100%"});});jsはもともとのとほとんど同じだけど、animateで動かしてたのを消して、addClassだけになった。5class="on"をnavタグにつける。アニメーション処理をやらせてるのは、cssのほう。transitionでアニメーションで動くようにして、.onがついてるのとついてないので、transform:translate(x,y)の位置を変えるという処理。※閉じるの処理は割愛androidでtransformが効かなくて30分ほどロスしたけれども、ただ-webkit-プレフィクスをつけるだけだったという。長い英単語をいれるとtableの中をつきぬけちゃうイラレでスライスを速くするスクリプト。bluetoothヘッドセット1時間1円で暖かい。夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。お仕事のご依頼・お問い合わせはこちらコーディングのお仕事が得意です。