jQuery

jQuery

画像や動画をぐいっとポップアップ表示!jQueryプラグインの「Lity」

画像イメージをクリックした際に、ポップアップで表示するプラグインとしては「Lightbox」が非常に人気があり多くの方のWEBサイトに実装されていました。きっと、一度はお世話になったことのある方も多いのではないでしょうか。 (adsbygo...
jQuery

画面内に表示されたときに動きをつける「jquery.inview」

スクロールしていくと要素が順番に表示されたり、横からスライド表示されたりするWebサイトが見られるようになってきました。これは、画面内に指定した要素が表示されるタイミングでイベントを実行させるという処理をして表現をしています。今回はそのよう...
jQuery

ウィンドウサイズによるクラス名の付与&削除する方法

レスポンシブサイトを作成するときに、画面サイズによって要素のクラス名を外したり、付与したりする方法をご紹介します。jQueryを使ってクラス指定をコントールしてみましょう。 サンプル1 ・・・背景色を指定したクラス名を切り替える。 サンプル...
jQuery

横並びにしたブロック要素の高さを揃えたい!

横並びに配置したコンテンツが、中身の高さ(画像の大きさやテキストの長さ)によって、バラバラになってしまうことってありませんか?そんな場合には、コンテンツ内の要素に関係なく一番高さを取っている要素に合わせて、下のラインを揃えてくれる方法があり...
jQuery

使い勝手の良いslick.jsスライダー(レスポンシブ対応)

今では、様々なスライダーのプラグインが存在しますが、バリエーションの多さや対応の幅で使いやすいと評価の高い「slick」をご紹介します。スマホやタブレット端末などでの「スワイプ機能」にも対応しているので色々と使い勝手が本当にいいです!(ad...
jQuery

可変グリッドレイアウトを実装できるMasonry

可変グリッドレイアウトとは、ブラウザの幅に応じてコンテンツのレイアウトを調整し整列してくれる仕様のことを指します。有名なサイトで言えば「pinterest」などがそうですが、この可変型のグリッドを簡単に実現できるjQueryプラグイン「Ma...
jQuery

スクロールをキーとしたアクションを「waypoints.js」で実現

画面をスクロールをすることで、ナビゲーションを上部固定する方法のひとつとして、jQueryプラグインの「waypoints.js」をご紹介します。上部ナビ固定をする方法は、これまでもいくつかご紹介させて頂きましたが、今回はアニメーションエフ...
jQuery

jQueryで上部固定ナビゲーション(プルダウン付)を実装するには!

これまでにも何度か紹介してきた「固定ナビ」ですが、今回は「スクロール+プルダウン」の表現を可能にする方法をメモしておきます。まずは、デモサンプルを確認してみてください。// // DEMOHTMLを記述 入れ子になっているナビゲーションを用...
jQuery

アイコン画像やイラストが、ふわふわ浮かぶ「jqFloat」で遊び心を!

雲や気球など、ふわふわ~っと浮かばせたいイラストなどをWEBサイト上に配置したいときに、jQueryプラグインの「jqFloat」を使えば実現できます。// // まずは、デモサンプルを確認してみてください。DEMO1.jqFloatをダウ...
jQuery

グローバルナビをスクロール時に固定する方法

グローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフ...
jQuery

読み込み完了までローディング画像でストレスを軽減する方法

ギャラリーページなど大きい画像を並べていたり、パララックスサイトのように1ページあたりの容量が比較的大きくなるようなページ構成をすると、ユーザー環境によっては配置されている画像が徐々に表示されたり、コンテンツがバラバラに表示されて崩れてしま...
jQuery

各セクションの開始位置にトップをしっくり合わせてくれるプラグイン「window.js」

表示されるwindowいっぱいにひとつのセクションを表示し、スクロールごとに別のページを閲覧しているような表現をすることが可能な「window.js」をご紹介します。スクロールをすることで切り替わる他、少しズレて静止した状態を修正してくれる...
jQuery

上からスライドしてくるツールチップ

テキストにマウスオーバーすると、上からスライドしながらツールチップが表示されるような動きを実装していきたいと思います。// // DEMOまずは、必要なソースをダウンロードしてください。ダウンロードHTMLを記述 対象となるテキストを囲う要...