jQuery

スポンサーリンク
jQuery

マウスのホイールを使って画像の切替を行う

タイトルの通りです。マウスのホイールをいじると画像が切り替わるjQueryの機能を作成してみました。 サンプルコードの実行結果はこちら 今回使用したプラグイン ・imagesloaded ・jquery.mousewheel...
jQuery

画像読込の進捗具合が分かるプログレスバーを作成

タイトルの通りです。読み込み中の画像を表示しないようにし、かつ画像読込の進捗度を表示してみます。 サンプルコードの実行結果はこちら サンプルコードをみると、画像は100枚ほど読み込みますが、ブラウザへの負担が大きいので、実際に読み込む画...
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

タブを作成して、空間を最大限に使う

今回はパネルを使って、複数のコンテンツを1つのエリアに配置して、ブラウザ上部に設けたタブをクリックすることによって表示する コンテンツを切り替えるものを作成します。詳細はサンプルコード上にコメントアウトしました。 サンプルコードの実行結...
jQuery

ついてくるヘッダーメニューを作成する

タイトルの通りです。画面をスクロールしてもついてくるメニューを今回作成します。 サンプルコードの実行結果はこちら
スポンサーリンク
タイトルとURLをコピーしました