jQuery 画像や動画をぐいっとポップアップ表示!jQueryプラグインの「Lity」 画像イメージをクリックした際に、ポップアップで表示するプラグインとしては「Lightbox」が非常に人気があり多くの方のWEBサイトに実装されていました。きっと、一度はお世話になったことのある方も多いのではないでしょうか。 (adsbygo... 2018.06.20 jQuery
jQuery 画面内に表示されたときに動きをつける「jquery.inview」 スクロールしていくと要素が順番に表示されたり、横からスライド表示されたりするWebサイトが見られるようになってきました。これは、画面内に指定した要素が表示されるタイミングでイベントを実行させるという処理をして表現をしています。今回はそのよう... 2016.10.18 jQuery
jQuery ウィンドウサイズによるクラス名の付与&削除する方法 レスポンシブサイトを作成するときに、画面サイズによって要素のクラス名を外したり、付与したりする方法をご紹介します。jQueryを使ってクラス指定をコントールしてみましょう。 サンプル1 ・・・背景色を指定したクラス名を切り替える。 サンプル... 2016.02.23 jQuery
jQuery 横並びにしたブロック要素の高さを揃えたい! 横並びに配置したコンテンツが、中身の高さ(画像の大きさやテキストの長さ)によって、バラバラになってしまうことってありませんか?そんな場合には、コンテンツ内の要素に関係なく一番高さを取っている要素に合わせて、下のラインを揃えてくれる方法があり... 2016.02.09 jQuery
jQuery 使い勝手の良いslick.jsスライダー(レスポンシブ対応) 今では、様々なスライダーのプラグインが存在しますが、バリエーションの多さや対応の幅で使いやすいと評価の高い「slick」をご紹介します。スマホやタブレット端末などでの「スワイプ機能」にも対応しているので色々と使い勝手が本当にいいです!(ad... 2015.10.15 jQuery
jQuery 可変グリッドレイアウトを実装できるMasonry 可変グリッドレイアウトとは、ブラウザの幅に応じてコンテンツのレイアウトを調整し整列してくれる仕様のことを指します。有名なサイトで言えば「pinterest」などがそうですが、この可変型のグリッドを簡単に実現できるjQueryプラグイン「Ma... 2015.08.03 jQuery
jQuery スクロールをキーとしたアクションを「waypoints.js」で実現 画面をスクロールをすることで、ナビゲーションを上部固定する方法のひとつとして、jQueryプラグインの「waypoints.js」をご紹介します。上部ナビ固定をする方法は、これまでもいくつかご紹介させて頂きましたが、今回はアニメーションエフ... 2015.04.22 jQuery
jQuery jQueryで上部固定ナビゲーション(プルダウン付)を実装するには! これまでにも何度か紹介してきた「固定ナビ」ですが、今回は「スクロール+プルダウン」の表現を可能にする方法をメモしておきます。まずは、デモサンプルを確認してみてください。// // DEMOHTMLを記述 入れ子になっているナビゲーションを用... 2015.04.14 jQuery
jQuery アイコン画像やイラストが、ふわふわ浮かぶ「jqFloat」で遊び心を! 雲や気球など、ふわふわ~っと浮かばせたいイラストなどをWEBサイト上に配置したいときに、jQueryプラグインの「jqFloat」を使えば実現できます。// // まずは、デモサンプルを確認してみてください。DEMO1.jqFloatをダウ... 2015.04.03 jQuery
jQuery グローバルナビをスクロール時に固定する方法 グローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフ... 2015.03.31 jQuery
jQuery 読み込み完了までローディング画像でストレスを軽減する方法 ギャラリーページなど大きい画像を並べていたり、パララックスサイトのように1ページあたりの容量が比較的大きくなるようなページ構成をすると、ユーザー環境によっては配置されている画像が徐々に表示されたり、コンテンツがバラバラに表示されて崩れてしま... 2015.03.13 jQuery
jQuery 各セクションの開始位置にトップをしっくり合わせてくれるプラグイン「window.js」 表示されるwindowいっぱいにひとつのセクションを表示し、スクロールごとに別のページを閲覧しているような表現をすることが可能な「window.js」をご紹介します。スクロールをすることで切り替わる他、少しズレて静止した状態を修正してくれる... 2015.02.10 jQuery
jQuery 上からスライドしてくるツールチップ テキストにマウスオーバーすると、上からスライドしながらツールチップが表示されるような動きを実装していきたいと思います。// // DEMOまずは、必要なソースをダウンロードしてください。ダウンロードHTMLを記述 対象となるテキストを囲う要... 2015.01.30 jQuery