jQuery

replaceWith()の使い方〜jQuery

replaceWith()はある要素を指定されたHTMLやDOMエレメントで置き換えるものとリファレンスでは説明されていますが、少しわかりにくいので解説します。 ざっくりとみると、html()と働きが似ています。 html()は指定したタグの中身をhtmlタグ付きで変えることができますが、指定したタ  >>続きを読む

onメソッドのイベントにhoverを使う方法:動的に作成した要素にイベント設定〜jQuery

jQueryで動的に要素を追加することをマニピュレーションといいます。動的なサイトを作成するには欠かせないものですが、時には困ったことが起こります。 例えば動的に作成した要素にイベント処理を行うときです。サンプルを見ながら問題点と解決を考えていきます。 サンプル1:ある要素をクリックしたら別の要素の  >>続きを読む

iOSシミュレータの使い方〜Macユーザー用

スマホサイト作成のときにiOSの実機をシミュレーションする必要があります。 その場合MacにはiOSシミュレータが用意されています。 iOSシミュレータを使用するにはXcodeがインストールされている必要があります。 XcodeはApp Storeで無料でダウンロードできます。Macでの開発で何かと  >>続きを読む

scrollTopとscrollTop()の使い方〜jQuery

scrollTopとscrollTop() 似ているけれども違うものです。 それぞれの使い方をしっかりとマスターしましょう。 scrollTop()について scrollTop()はメソッドです。 scrollTop()は、引数を指定した場合としない場合で働きが変わります。 引数を指定しない場合はj  >>続きを読む

マウスホバーで画像を入れ替える〜jQuery

マウスホバーでボタンなどの画像をフワッとクロスフェードさせたいという相談が多いので、何種類かのアプローチと失敗例などを書きました。 CSS3でクロスフェードさせるサンプル jQueryでimgタグの画像をクロスフェードさせる(成功例) jQueryでCSSのbackground-mageをクロスフェ  >>続きを読む

パララックス 円運動をさせる〜jQuery

パララックス効果の中で円運動をさせるスクリプトを書いてみました。 円運動は円の半径を決めてその角度を少しずつ変化させることで実現できます。 x座標とy座標を数式で表すと次のようになります。 rが半径でradianが角度(ラジアン)です。 x = r*cos(radian) y = r*sin(rad  >>続きを読む

Ajaxでモーダルウインドウ内にテキストを読み込む〜jQuery

今回のサンプルは、モーダルウインドウ内に別のHTML文を表示し、読み込んだHTML文から更に別HTMLを読み込む仕組みです。(中級者向け) モーダルウインドウは半透明のレイヤーをブラウザの表示領域いっぱいに広げて現在のページを隠します。そして、画像などを表示する領域をブラウザの中央部に置くものです。  >>続きを読む

hover()とanimate()を使ったボタン〜jQuery

animateを使用すれば幅や高さ、あるいはマージンなどを簡単にアニメーションさせることができます。 次のスクリプトはマウスを重ねると幅が100pxから200pxへと変化します。また、マウスが外れると幅はもとの大きさになります。 また、背景色をアニメーションさせています。 background-co  >>続きを読む

パララックスの仕組み〜jQuery

主な仕組み スクロールイベントを使用してスクロールした量だけオブジェクトを移動させます。 スクリプトで使用する主なメソッド スクロールイベントはscroll( )メソッドを使用します。 スクロール量を取得する方法は$(window).scrollTop( )で取得できます。 オブジェクトの現在の座標  >>続きを読む

フローティングナビ〜付いてくるナビゲーション

縦長のページを作成するときに欲しい機能としてナビゲーションがどこまでも付いてくるものです。 簡単にできるfloater.jsのプラグインを活用した方法です。 floater.jsはこちら floater.jsはMITライセンスですから、商用使用も可能ですし、再配布もできます。ただし、上部に書かれてい  >>続きを読む