jQuery マウスのホイールを使って画像の切替を行う
タイトルの通りです。マウスのホイールをいじると画像が切り替わるjQueryの機能を作成してみました。
サンプルコードの実行結果はこちら
今回使用したプラグイン
・imagesloaded
・jquery.mousewheel...
jQuery
jQuery jQuery 画像読込の進捗具合が分かるプログレスバーを作成
タイトルの通りです。読み込み中の画像を表示しないようにし、かつ画像読込の進捗度を表示してみます。
サンプルコードの実行結果はこちら
サンプルコードをみると、画像は１００枚ほど読み込みますが、ブラウザへの負担が大きいので、実際に読み込む画...
jQuery Masonryのギャラリーの画像にホバーしたときに動きを付けてみる
今回はMasonryのギャラリーの画像にマウスのカーソルを乗せたときに青い半透明のアニメーションがでるようしてみました。
サンプルコードの実行結果はこちら
今回使用したプラグイン
・Mansonry
・imagesloaded
...
jQuery Masonryのギャラリーの画像をクリックすると、画像が拡大し、キャプションがでるようにしてみる
前回の記事でMasonryのギャラリーを作成しましたが、今回はそれに、見出しをつけてみます。
サンプルコードの実行結果はこちら
今回使用したプラグイン
・Masonry
・colorbox
・imagesloaded
...
jQuery Masonryのギャラリーにフィルター機能を追加する
Masonryのギャラリーにフィルターを付けてみました。実行結果を見て頂ければ分かりますが、画像のギャラリーがまず表示されます。次に国名をクリックすると、その国名に該当する写真だけを抽出して表示します。
サンプルコードの実行結果はこちら
...
jQuery Masonryでギャラリーページを作ってみる
今回使用するjQueryプラグイン
●Masonry
フレキシブルなレイアウトを生成するために使用するjQueryプラグインです、幅、高さが異なるコンテンツを領域ぴったしに並べるためのものです。
●imagesLoaded
...
jQuery 空間を最大限に使いトップページの画像をタブで切り替える。
今回、書くのは、
トップページに複数の作品を乗せたいときに、
スクロールさせず、画面上部に配置したタブを
切り替えることにより、表示させるものを
切り替えるjQueryを作成します。
分かりにくいので、実行を結果をご覧ください...
jQuery 画面を下にスクロールさせると、違うデザインのメニューがついてくる
タイトルの通りです。画面をスクロールさせると、違うデザインのメニューがついてくる機能を今回作成しました。
サンプルコードの実行結果はこちら
今回は「throttle-debounce」プラグインを使用しています。これは、スクロールや...
jQuery タブを作成して、空間を最大限に使う
今回はパネルを使って、複数のコンテンツを１つのエリアに配置して、ブラウザ上部に設けたタブをクリックすることによって表示する
コンテンツを切り替えるものを作成します。詳細はサンプルコード上にコメントアウトしました。
サンプルコードの実行結...
jQuery ついてくるヘッダーメニューを作成する
タイトルの通りです。画面をスクロールしてもついてくるメニューを今回作成します。
サンプルコードの実行結果はこちら