2012年09月

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

jqueryでスクロールの途中で横からメッセージがズドーンと出てくる

LPでたまに見るんですが、こういうやつです。
↑ひらいたら下の方にスクロールしていってください。

前回の記事でスクロールの途中からグローバルメニューがついてくる

というのを書きましたが、基本的にはそれと同じです。



あらたに使うのは

.animate({'ホニャ','ワンワン'});

だけ

$(function(){
$(window).scroll(function () {
if($(window).scrollTop() > 100) {
$('#move1').animate({'right':'0px'});
}
});
});

scrollまわりは前回と同じです。

条件としては

scrollTop() > 100

上からスクロールが100px以上しているときー、、となります。

#move1がついている画像を、今の位置から、right:0pxの位置まで
スムーズに動かします。

#move1はcssであらかじめ以下のようにしておきます。

#move1{position:absolute;right:-600px;}

right:-600pxからright:0pxまでスムーズに動かす、ということになります。



あとは、同様のものを3パターン作ればOK!


読んでる途中で、タイトルがズドーンと出てきて、目をひくことまちがいなしだ!


サンプルのjqueryの全文はこちら

<script>
$(function(){
$(window).scroll(function () {
if($(window).scrollTop() > 100) {
$('#move1').animate({'right':'0px'});
}
if($(window).scrollTop() > 600) {
$('#move2').animate({'left':'0px'});
}
if($(window).scrollTop() > 1000) {
$('#move3').animate({'right':'100px'});
}
});
});
</script>


jqueryでスクロールすると途中からついてくるメニューを作る

最初に開いたときは、ページの中頃にグローバルメニューがあるのに、
ページを下にスクロールしていくと、途中からメニューがついてくるサイトありますね。

(ちょっとキャプチャをつくるのが面倒なので、ひとまず割愛)



最初から位置を固定させるプロパティがcssにはあって、

position:fixed;
left:20px;
top:20px;

などでやりますが、スクロールすると途中からついてくるという動きも
jqueryを使うと、簡単にできます。

jqueryの記述はこちら

<script>
$(function(){
offset = $('#gmenu').offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
$("#gmenu").css({"position":"fixed","top":"0px"});
} else {
$("#gmenu").css("position","static");
}
});
});
</script>

HTMLはこうなってます。

<div id="gmenu">
<ul>
<li><a href="#"><img src="img/common/menu1.jpg" alt="トップ" /></a></li>
<li><a href="#"><img src="img/common/menu2.jpg" alt="会社概要" /></a></li>
<li><a href="#"><img src="img/common/menu3.jpg" alt="サービス" /></a></li>
<li><a href="#"><img src="img/common/menu4.jpg" alt="こだわり" /></a></li>
<li><a href="#"><img src="img/common/menu5.jpg" alt="お問い合わせ" /></a></li>
</ul>
</div>


ここであらたに覚えないといけないのは、2つです。

offset()

これと

$(window).scroll(function () {
ホニャララ
});

この2つだ。


offset()は、ページの一番左上から見てどこにいるのかを数字で返してくれる。

$('#gmenu').offset(); だったら、

<div id="gmenu">が、そのページの一番左上からみて、横に何px、縦に何pxのとこにいますよ、と
数字を返してくれる。

offset = $('#gmenu').offset();

だから、offsetという名前の変数に、その何pxと何pxという数字を入れました、と。

この数字を取り出すには、2通りあって、

offset.top で、上から何px?という数字が出てくるし、
offset.left で、左から何px?という数字が出てくる。


次、

$(window).scroll(function () {
ホニャララ
});

これ。

これは、もう英語の構文みたいに、そのまま覚えちゃったほうがいいですな。

画面がスクロールするたびに、ホニャララを実行しますよ、ってやつ。

僕がマウスのスクロールホイールに触って、コリッ・・ってやっただけで
ホニャララが発動するんだ。

繊細なやつですよ。


ついでにもういっこあった

$(window).scrollTop()

これは、見れば予想がつくけど、そのページの上からどれくらいスクロールしたかの数字がわかる。

ホイールをコリっ・・・で50pxぐらい画面が動いたら、ここに入ってくる数字は50になるってわけ。


あとはもうわかりやすいっすね。

<script>
$(function(){
offset = $('#gmenu').offset();  
$(window).scroll(function () { 
if($(window).scrollTop() > offset.top) {
$("#gmenu").css({"position":"fixed","top":"0px"}); 
} else { 
$("#gmenu").css("position","static"); 
}
});
});
</script>

①offsetっていう名前をつけた変数に、#gmenuの現在の位置(ページの左上からみてどのへんにいるか)を入れときますよ。
②コリっとスクロールした瞬間発動させるよ。(次以降のやつらを)
③もし、今スクロールしてる量が、offsetの上からの距離、つまりは#gmenuの上からの距離を上回ったら・・
④#gmenuのcssをposition:fixedにして、top:0pxに張り付けちまえ!
⑤ち、ちがったら?
⑥そんときは、#gmenuのpositionは普通のやつstaticに戻しときゃいいよ。



という一連の流れ。
スクロールが発生するたびに③〜⑥をいちいち考えてるってことですね。


アディオス!

HTML5でコーディングするならとりあえずie9.jsとhtml5shiv.jsを入れる

最近のマークアップ界隈を観察してみると、

HTML5でマークアップするときは2つのjsを読み込ませるのが多いみたいです。

ie9.js とhtml5shiv.js


■ ie9.js

これは、internetexplore6,7,8をie9に近づけるためのライブラリ。

・position:fixed;
・max-heightやmin-heightなどの最大サイズ設定 
・aタグ以外での:hover
・margin:0 autoで中央寄せ 
・透過PNG

・opacityで透明度 


などなどを対応させるという。

これまでIE6やIE7のハックをしてきたコーダーの方々にとっては、

「そうそう、IE6と7に対応させるときは大体ソレだよね」

なやつらですね。
 
ちなみに入れるときは、ie9以下にだけ読み込ませるようにしときましょう。

<!--[if lt IE 9]>
<script src="js/ie9.js"></script>
<![endif]-->

ie9.jsはこちらでダウンロードできます。




■  html5shiv.js


これはIE8以前のブラウザにも、HTML5のタグをちゃんと認識させるためのライブラリ。

こちらでダウンロードできます。


javascriptでaタグにonclickつけるときにreturn falseもつける

最近ajaxだったり、リッチな動きをさせるためだったりで、
<a>タグにonclick属性とつけるときがちょくちょくあります。

すると、以下のような記述になる。

<a href="#" onclick="hogehoge">いでよ!</a> 

 そうすると、hogehogeが実行されると同時に#に飛んじゃいますね。

#だけにしとくと、ページの一番上にアンカーリンクで飛んじゃいます。


なので、onclickは機能させつつ、href="#" は機能させたくない。

そんなときに便利なのがreturn false です。

<a href="#" onclick="alert('出た!');return false;">いでよ!</a>
 

これをつけとくと、alertはちゃんと実行されて、href="#"は無視される。

(falseが返される、という)


もっと踏み込んで原理を知ろうかと思ったんですが、
時間がかかりそうなので、とりあえず覚えろカテゴリーに入れときます。

「aタグにonclickやるときはreturn falseも忘れずに!」 ×10(覚えた)


ところで、aタグでhref="#"を実行されたくないなら、

<div>にonclickをつけちゃって、cssでcursorをいじれば、もっとシンプルになりますわね。

EC-CUBEで注文メールが届かないと思ったらやること

管理ページで


システム設定>パラメータ設定

に入る。


ズラーっとよくわからないのが並んでいるので


MAIL_BACKEND


を探す。


最初はそこが"smtp"になっているので、それを"mail"
にしてみる。


それでうまくいっきました。
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

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

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

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ