2013年04月

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

画像が順番にフェードインしてくるのをjQueryでつくる。を理解する。

ページを開いたときに、画像が順番にフェードインしてきたらカッコイイ。


こういうやつです。
jquerydelay


























これをjQueryでつくる方法です。

htmlは以下のようにします。


<div id="photoFade">
<ul>
<li><img src="img/index/nyan1.jpg" alt="neko"></li>
<li><img src="img/index/nyan2.jpg" alt="neko"></li> 
<li><img src="img/index/nyan3.jpg" alt="neko"></li>
<li><img src="img/index/nyan4.jpg" alt="neko"></li> 
<li><img src="img/index/nyan5.jpg" alt="neko"></li>
<li><img src="img/index/nyan6.jpg" alt="neko"></li> 
</ul> 
</div>

css側では、あらかじめ<li>を透明にしときます。

#photoFade ul li{opacity:0;}

js側は以下のようにします。

$(window).bind('load', function() {
      $("#photoFade ul li").each(function(i){
$(this).delay(i*50).fadeIn();
});
});



jQueryで、上記のように並んでいる要素1つ1つを処理したい場合、each()を使います。

jQueryのeachの使い方リファレンス


↓こんな感じですね。
$('#photoFade ul li').each(function(){
hogehoge;
})

#photoFade ul の下にあるliの要素数分、命令hogehogeを繰り返す、というものです。

今回のサンプルでいうと、<li>が6個あるので6回繰り返します。
 

順番に処理してくれるのだから、そのままアニメーションを実行したくなります。
こんなふうに。
$('#photoFade ul li').each(function(){
$(this).fadeIn();
})
僕もずこれをやっちゃいました。

そうすると、全部一斉にフェードインしてきちゃって、
「eachで1つずつ処理した意味ないだろ!」と叫ぶことになりますね。

これは、javascriptが 1つ1つの処理が終わるまで待たずに次の処理をじゃんじゃん始めちゃうからです。
 

なので、フェードインが開始する時間を少しずつずらさないといけない。


そこで登場するのがdelay()さん。

delay()のリファレンス 


delay(1000);
とすると 1000ms(つまり1秒)たってからスタートしますよ、というやつ。

組み込んでみます。

$('#photoFade ul li').each(function(){
$(this).delay(1000).fadeIn();
})

 こうすると、1秒ずつ遅れてスタートしてくれるかと思いきや、そうなりません。
1秒たってから、全部がいっせいにスタート。

これだとさっきのやつと同じで、全部の処理を一気にスタートしてしまいます。

なのでこうします。

$('#photoFade ul li').each(function(i){
$(this).delay(i*1000).fadeIn();
})
わかりづらいですが、赤の部分が変わりました。

each(function(i){});

というようにfunction()の中に引数を入れると、
繰り返している回数の数が入ります。

for文と同じです。

繰り返すごとに i が増えていきます

こうすると、
以下のように動きます。

1回目の処理 → (1×1000)= 1秒後にスタート
2回目の処理 → (2×1000)= 2秒後にスタート
3回目の処理 → (3×1000)= 3秒後にスタート
4回目の処理 → (4×1000)= 4秒後にスタート
5回目の処理 → (5×1000)= 5秒後にスタート
 
こうして、1秒ずつずらすということができました。

実際1秒だと遅すぎるので、50msくらいが気持ちいいと思います、
 

これで完成ですが、これだけだとエラーを起こしちゃいます。

それは、画像が読み込まれる前にjavascriptが処理をスタートしようとして、
「あれれ、ul li imgを集めてこれないよ」と混乱しちゃうためです。

なので、画像が読み終わってから処理を開始する必要があります。

$(window).bind('load', function() {
hogehoge;
});

サーバーにリクエストしたデータのロードが完了してからhogehoge(処理)を開始するよっていう命令です。

これでいちばん外側を囲めばOKです。


完成!

【jQuery部分完成】
$(window).bind('load', function() {
      $("#photoFade ul li").each(function(i){
$(this).delay(i*50).fadeIn();
});
});

50の部分を100にしたり500にしたりすると、出てくるスピードを変えられますよ。

また、fadeIn()の部分を他のアニメーションにしたりして、違う見せ方もできますよ。

 

androidではボタンをタップ(タッチ)するとオレンジの枠がでてうっとおしい

スマートフォンサイトを作って、iphoneでチェックするときは、リンクをつけたボタン画像なんかをタップしても 全然気にならないのに、androidで見ると、いちいちタップするたびにオレンジの枠が出て、うっとおしいですよね。

あれはcssでサクリと消せます。

*{-webkit-tap-highlight-color:rgba(0,0,0,0);}

 cssファイルにこれを一行いれるだけです。


僕はiphoneユーザーということもあって、androidのオレンジの枠が気になるので入れておきたい派。 

iPhoneサイトでチェックボックスやラジオボタンを大きくしたい

inputのチェックボックスやラジオボタンって、サイズが変更できないですよね。
テキストボックスとかと違って。

で、デザイン上、チェックボックスをもう少し大きくしたいなーということってスマートフォンサイト制作では、ちょくちょくありまして、

画像で代替えしちゃう、みたいなことはやってたんですが、
もっとシンプルにcssででかくするというのがあったようなのでメモ。

css3のtransformを使います。
 
input[type="checkbox"] {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    margin-right:0.5em;
}

transform:scaleをつかって、拡大するっていう技です。

ここでは1.3倍にしてる。

拡大すると、チェックボックスとその次に続くテキストとの幅が縮まっちゃったりするので
margin-rightも追加してます。


ちなみにラジオボタンの場合は以下↓

input[type="radio"] {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    margin-right:0.5em;
}


簡単だね。 
 

androidでbox-sizingがうまくいかないバグ

スマホではとっても楽になる
css3のbox-sizingプロパティ。 


box-sizing:border-box

とすると、paddingとborderをwidthやheightの中に含めてくれます。

心置きなく

width:100%;
padding:10px;

とかできます。 


でも、androidだと、box-sizingがそのままではうまくいかない。
(バグではないですけど)

androidの場合はwebkitのベンダープレフィクスをつければOK

box-sizing:border-box;
-webkit-box-sizing:border-box;
 
他にもこの手のcss3 の解決法はありそう。
困ったらとりあえずベンダープレフィックスをつけてみるというのもひとつですね。
 

FilezillaでFTPES転送

サーバーに接続するときに、

「FTPESで接続してください」

って言われたとき。


ん?SFTPじゃなくて?そんな設定Filezillaにあったかな?

と思ったらあった。


FTPESは「File Transfer Protocol over SSL/TLS Explicitモード」のことだそうで。

Filezillaでいうと、

プロトコル → FTP - ファイル転送プロトコル
暗号化 → 明示的なFTP over  TLSが必要

を選ぶと、FTPESになりますよっと。 
記事検索

リモキュー

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

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

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