Archive for 12月, 2012

パララックスでのイベントの考察。scroll / throttle / debounce / touchmove / mousewheel

by codechord. 0 Comments

[追記:2015/05] 2012年12月の投稿なので情報がかなり古いです。iOS7ではスクロールイベントが取りやすくなってます。とはいえ、スマホのパララックスは要注意。

こんにちは。Advent Calendar 2012 軽めのjQuery の17日目を担当します。
http://www.adventar.org/calendars/29

パララックスエフェクトを実装するためのイベントについて少し触れてみたいと思います。

パララックスエフェクトで考えること

パララックスエフェクトのような動きを考える時、いくつかの項目を考慮する必要があるとおもうんですが、例えば

  • イベント発火のタイミング
  • パララックスエフェクトの実装
  • スマホで動作する際の妥協点。
  • 如何に心地よくぬるぬると動かせれるか。

などなど。僕の場合このあたりを考えるんですけど、一番最後の、如何に心地よくぬるぬると動かせれるかが、パララックスのエフェクトを実装するなかでの決め手だと思っています。
実際の所写真などを多用すると、どうしても重くなりますし、いろいろ試行錯誤してみて、ある程度のところで妥協点を見つけるという感じになってしまいますが。

軽めのjQueryということで、イベントの発火のタイミングの一部と、心地よくアニメーションする方法の一部を急いで作ったDemoを見ていただきながら少し考えてみたいと思います。すこし重くなるかもしれません。

ここで使用しているDemoファイルは、githubにも置いておきましたので、ご自由にお使いください。

続きを読む »

一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTP(FTP)で作業効率化する方法。

by codechord. 8 Comments

こんにちは。Sublime Text 2 Advent Calendar 2012 の13日目です。
http://www.adventar.org/calendars/20

釣りタイトルですいません。
記事が思ったより長くなってしまったので、まず簡単に何をしたいかを説明します。
僕だけじゃないと思うんですが、sass/SCSSを使っている場合に限りですが、サーバにアップするのが自動でできなくて、イライラを感じたことはありませんか?SublimeText2使ったら解消でき、作業効率化できますよ。というお話で、一連の設定手順を紹介します。

SublimeText2を使って、Sass/SCSS(compass)を使い自動生成したcssファイルを自動でサーバにアップロード。これって、大規模開発には向かないかもしれませんが、中小規模のサイト制作には、この方法で一石三鳥!?と思うんです。少なくとも僕の場合はなりました。

SublimeText2での、sass/SCSS(compass)の導入方法と、SFTP/FTPパッケージの導入方法もこの記事に含まれてます。くだりが長いのでお急ぎの場合は、ページ中段のキャプチャ画像がある辺りまでお進みください。

続きを読む »