文字をtext-shadowでChoo Choo Train風にする、アホなjQueryプラグインを作った

タイトル通りのアホなjQueryプラグイン作ってみた。
指定したテキストに対して、text-shadowを生成してChoo Choo Train風にしてくれる感じ。
つらつら書くよりかは使い方書いた方が早いので書いてみる。

ダウンロードはこちらから

jquery.upload.jsを使って画像をアップしたらすぐに確認出来るのを作ったけど、IEでなぜかエラーが発生した問題

webサイトを作っていて画像をアップする際に、その場でプレビューしたいとかそういう場合がある。
で、そのためにjquery.upload.jsを使って出来るようにしていたんだが、
なぜかIEでは画像がアップロードできずエラーが出てしまうといった現象が。

そもそもjquery.upload.jsはIEに対応していないのか？
なんて思ったけど全然そんな事は無く他に要因があるのではないかと思って色々と調べてみた。

bootstrapとjquery.masonry.jsを使って、レンガ状(pinterest風)にサムネイルを並べていく

最近流行りのbootstrapを使うとすごく簡単にレスポンシブルなサイトを作る事が出来る。
特に自分みたいなエンジニア系のweb制作者にとってはbootstrap使う事によってデザインを整えられるし、
何よりも最大12カラムのグリッドシステムがすごく便利。

だけどグリッドシステムを使ってサムネイルを並べたときなどにそれぞれの高さが変わってしまうと不格好になってしまう。
なのでこれを解決するためにmasonryを使ってグリッドシステムをさらに綺麗に表示することにしてみた。

ブラウザの閉じるイベント時に何かしたいのでbeforeunloadを使ってみる

例えばフォーム入力中だとか、
ショートカットを押し間違えたとか、
意図しないタイミングでブラウザ閉じてしまうとか色々とあるわけで。
そういうときってあぁ〜って感じでちょっとがっかりしたりする。

でもGmailみたいに本当に閉じますか？みたいな感じでアラート出してくれると助かるわけで。
というわけで今日はその組み方的なお話。

jquery.hashchange.jsを使ってDOMの状態記録？的なことをする

パララックスサイトとか、スライダーを使うようなサイトを作っている場合、
jsだから戻るボタン押したりとかリロードをした場合、最初に戻るという残念な事が多い。
そういうのって地味にうわぁってなったりするしあまり良くないので、
じゃあそういうのってどうしたらいいのっていうのを解決する方法を書いてみる。

で、解決するために使うのはjquery.hashchange.jsというjQueryライブラリ。

ScrollTween.jsでのscrollTo()の調整

ScrollTween.jsではscrollTo()というメソッドがあり、
これを使うと任意の位置に移動する事が出来る。
けどよくあるぐいーんって移動するタイプではなくて、
ぱっと移動するのでちょっと面白みに欠けてしまうような気がする。

ということでぐいーんって移動するようにさせる為に関数を書いてみた。

パララックスを作るのに便利なScrollTween.js

パララックスサイトを最近作る機会があり、
普通にjsでscrollを取って諸々計算する方法でもいいかなと思ってたんだけど、
メンテナンスとかを考えると面倒だと思ってScrollTween.jsというのを使った。

もちろんパララックス系のライブラリはいくつもあったりはするんだけれども、
自由度が低いというかシーンが限られてるというか…みたいな感じであった。
その点ScrollTween.jsは直感的にいける感じのライブラリで中々良い。
ちなみにダウンロードはこちらから。

jQuery hashchange eventについて

TwitterみたいにURLの中とか後ろで#使って色々とやりたいな～って思って、
色々と調べていたらjQueryでhashchange eventというpluginがあることが判明。
というかURLの#ってハッシュっていって、location.hashで取れるとのこと。

上記のプラグインについては下記のURLが本家のサイトとのこと。
Ben Alman » jQuery hashchange event

jquery.cookie.jsでのスマフォ・PC判別

アメブロとかFC2ブログにあるような、
スマフォで見たときの「モバイル | PC」切り替えのやつ。

これをjs使って作成をしてみた。
多分探せばプラグインとかあるんだろうけど。

jquery.mousewheel.jsでのマウスホイールイベント(2012/7/25追記あり)

jquery.mousewheel.jsを使ってのマウスホイールイベントの取得をやってみた。
プラグインは今現在ダウンロードが出来ない？ので、
過去に使った案件より流用。