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