jQuery パララックス 円運動をさせる〜jQuery
パララックス効果の中で円運動をさせるスクリプトを書いてみました。
円運動は円の半径を決めてその角度を少しずつ変化させることで実現できます。
x座標とy座標を数式で表すと次のようになります。
rが半径でradianが角度（ラジアン）...
dororo
jQuery jQuery Ajaxでモーダルウインドウ内にテキストを読み込む〜jQuery
今回のサンプルは、モーダルウインドウ内に別のHTML文を表示し、読み込んだHTML文から更に別HTMLを読み込む仕組みです。（中級者向け）
モーダルウインドウは半透明のレイヤーをブラウザの表示領域いっぱいに広げて現在のページを隠します...
php&MySQL ダブルクォートで囲まれた文字列の変数展開〜PHP
PHPのダブルクォートの使い方の説明です。
ダブルクォートで囲まれた文字列の変数展開は便利な機能ですが、使い方によっては誤解を生じたり思ったとおり動作しなかったりします。
変数展開のいくつかの例を確認してみてください。
基本...
jQuery hover()とanimate()を使ったボタン〜jQuery
animateを使用すれば幅や高さ、あるいはマージンなどを簡単にアニメーションさせることができます。
次のスクリプトはマウスを重ねると幅が100pxから200pxへと変化します。また、マウスが外れると幅はもとの大きさになります。
また、...
PhotoShop イメージ画像のテキスト作成のポイント〜Photoshop
イメージ画像にテキストを置く場合、可読性が問題になります。
せっかく良い画像を用意したけれども、テキストの可読性が悪いためしっくりとこない場合も多いです。
簡単なパターンを試してみました。サンプルにした写真は東南アジアのある町の風景...
PhotoShop gifアニメの作成〜Photoshop
gifアニメーションの作成方法です。
今回の題材はMac版のFirefoxの初期画面に現れるキツネ君に勝手に協力してもらいました。
オリジナルのものは実はping形式になっておりgifアニメではありません。
もともとの画像はこんな...
jQuery パララックスの仕組み〜jQuery
主な仕組み
スクロールイベントを使用してスクロールした量だけオブジェクトを移動させます。
スクリプトで使用する主なメソッド
スクロールイベントはscroll( )メソッドを使用します。
スクロール量を取得する方法は$(w...
jQuery フローティングナビ〜付いてくるナビゲーション
縦長のページを作成するときに欲しい機能としてナビゲーションがどこまでも付いてくるものです。
簡単にできるfloater.jsのプラグインを活用した方法です。
floater.jsはこちら
floater.jsはMITライセンス...
jQuery スライドギャラリー解説補助資料〜jQueryドーナツ本
受講生対象の補助資料です。
以下jQuery教材のドーナツ本のスライドギャラリーの補助資料です。
スライダの構造
スクリプトの解説
HTML構造
ソースが読めてもスライド機能のからくりがわかりづらいで...
HTML&CSS アイコンフォントの使用方法〜疑似要素への導入方法も追加
アイコンフォントとは
アイコンフォントとはWebフォントと同じような仕組みでサーバー上のアイコンを表示する仕組みです。
アイコンフォントの使い方
疑似要素に導入する方法はこちら
Font Awesomeを例にしてCDN(Cont...