森のコーディング森のコーディング2012年09月マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。>9月18jqueryでスクロールの途中で横からメッセージがズドーンと出てくるカテゴリ:jQueryjavascriptLPでたまに見るんですが、こういうやつです。ズドーーン!↑ひらいたら下の方にスクロールしていってください。前回の記事でスクロールの途中からグローバルメニューがついてくるというのを書きましたが、基本的にはそれと同じです。{$('#move1').animate({'right':'0px'});}});});scrollまわりは前回と同じです。100上からスクロールが100px以上しているときー、、となります。#move1がついている画像を、今の位置から、right:0pxの位置までスムーズに動かします。#move1はcssであらかじめ以下のようにしておきます。#move1{position:absolute;right:-600px;}right:-600pxからright:0pxまでスムーズに動かす、ということになります。{$('#move3').animate({'right':'100px'});}});});</script>2012年09月18日17:05tacshockコメント:0トラックバック:09月13jqueryでスクロールすると途中からついてくるメニューを作るカテゴリ:jQueryjavascript最初に開いたときは、ページの中頃にグローバルメニューがあるのに、ページを下にスクロールしていくと、途中からメニューがついてくるサイトありますね。(ちょっとキャプチャをつくるのが面倒なので、ひとまず割愛)最初から位置を固定させるプロパティがcssにはあって、position:fixed;left:20px;top:20px;などでやりますが、スクロールすると途中からついてくるという動きもjqueryを使うと、簡単にできます。{$("#gmenu").css("position","static");}});});</script>HTMLはこうなってます。/></a></li></ul></div>ここであらたに覚えないといけないのは、2つです。{ホニャララ});この2つだ。offset()は、ページの一番左上から見てどこにいるのかを数字で返してくれる。id="gmenu">が、そのページの一番左上からみて、横に何px、縦に何pxのとこにいますよ、と数字を返してくれる。$('#gmenu').offset();だから、offsetという名前の変数に、その何pxと何pxという数字を入れました、と。左から何px?という数字が出てくる。{ホニャララ});これ。これは、もう英語の構文みたいに、そのまま覚えちゃったほうがいいですな。画面がスクロールするたびに、ホニャララを実行しますよ、ってやつ。僕がマウスのスクロールホイールに触って、コリッ・・ってやっただけでホニャララが発動するんだ。ついでにもういっこあった$(window).scrollTop()これは、見れば予想がつくけど、そのページの上からどれくらいスクロールしたかの数字がわかる。ホイールをコリっ・・・で50pxぐらい画面が動いたら、ここに入ってくる数字は50になるってわけ。あとはもうわかりやすいっすね。6}});});</script>1offsetっていう名前をつけた変数に、#gmenuの現在の位置(ページの左上からみてどのへんにいるか)を入れときますよ。2コリっとスクロールした瞬間発動させるよ。(次以降のやつらを)3もし、今スクロールしてる量が、offsetの上からの距離、つまりは#gmenuの上からの距離を上回ったら・・4#gmenuのcssをposition:fixedにして、top:0pxに張り付けちまえ!5ち、ちがったら?6そんときは、#gmenuのpositionは普通のやつstaticに戻しときゃいいよ。スクロールが発生するたびに3〜6をいちいち考えてるってことですね。アディオス!2012年09月13日18:30tacshockコメント:1トラックバック:09月8HTML5でコーディングするならとりあえずie9.jsとhtml5shiv.jsを入れるカテゴリ:javascriptHTML5最近のマークアップ界隈を観察してみると、HTML5でマークアップするときは2つのjsを読み込ませるのが多いみたいです。ie9.jsこれは、internetexplore6,7,8をie9に近づけるためのライブラリ。autoで中央寄せ・透過PNG・opacityで透明度などなどを対応させるという。「そうそう、IE6と7に対応させるときは大体ソレだよね」なやつらですね。ちなみに入れるときは、ie9以下にだけ読み込ませるようにしときましょう。src="js/ie9.js"></script><![endif]-->ie9.jsはこちらでダウンロードできます。html5shiv.jsこれはIE8以前のブラウザにも、HTML5のタグをちゃんと認識させるためのライブラリ。こちらでダウンロードできます。falseもつけるカテゴリ:javascript最近ajaxだったり、リッチな動きをさせるためだったりで、<a>タグにonclick属性とつけるときがちょくちょくあります。すると、以下のような記述になる。onclick="hogehoge">いでよ!</a>そうすると、hogehogeが実行されると同時に#に飛んじゃいますね。#だけにしとくと、ページの一番上にアンカーリンクで飛んじゃいます。