JavaScript

JavaScript

【jQuery】fixedで固定したフローティングアイテムをフッターの上で止める方法

フローティングアイテムをフッターの上で止める方法です。フッターと色が被ったりしてフッター上で止めるという実装もたまにやりたくなります。 jQueryを使ってフッターの高さやスクロールの位置をゴリゴリと…

はにわまん
JavaScript

要素をクリックした時の処理をjQueryで制御する方法【on / off】

ある要素をクリックされた時の挙動をjQueryで制御することはよくあります。1枚のLPページから、コーポレートサイトまで、サイトの形態は関係なく、ページ上で(遷移なしに)動的に動かしたい場合によく登場…

はにわまん
JavaScript

画像をポップアップ風に拡大表示できるライトボックスのJavaScriptライブラリ

画像を手軽にポップアップで拡大表示させることができるjavaScriptのライブラリを紹介します。一般的にこのような仕組みのことを「ライトボックス」と読んだりします。 この記事ではMITライセンスでサ…

はにわまん
JavaScript

パララックスには色んな種類がある!3パターンの実装例を紹介

パララックスって言葉は聞いたことあるけど、具体的にどういう動きすればパララックスなのか分からないって方は意外といるかもしれません。 ちょっとの前のわたしはセクションが重なる紙芝居風の動きをするのがパラ…

はにわまん
JavaScript

ヘッダー固定でページ内リンクをページ遷移で指定した時のズレを解消するJavaScript

ヘッダー固定にしていると頻発する問題として、「ページ内リンク先の位置がズレる!」があると思います。ズレるというか、ほとんどの場合は固定したヘッダーに隠れますね。 同じページ内でのページ内リンクだったら…

はにわまん
JavaScript

スムーズな移動!「smooth-scroll.js」で固定ヘッダーも考慮したページ内リンク

1ページで完結するようなLPでよく使われるのが、ヘッダーのグローバルメニューが各見出しへのページ内リンクになっているというもの。 普通に設置してもいいのですが、グイーンと移動してくれた方が、ページ内を…

はにわまん
JavaScript

YouTube動画の背景再生を設定できるjQueryプラグイン「jquery.mb.YTPlayer」

WebサイトでYouTube動画の背景再生を設定できるjQueryプラグイン「jquery.mb.YTPlayer」の紹介です。 「jquery.mb.YTPlayer」のダウンロード GitHubで…

はにわまん
JavaScript

【実例12パターン】画像スライダーはSwiper使っておけば間違いない!実用的な使い方を紹介

スライダー系プラグインの最高峰と名高い「Swiper」の紹介です。いろんなスライダープラグイン使ってますが、実現できるパターンが一番多いのではないかと思います。jQueryに依存していない点も評価が高…

はにわまん
JavaScript

画像を隙間なく詰めてピッタリ配置してくれるjQueryプラグイン「Masonry.js」

ギャラリーサイトなどで活躍しそうなjQueryプラグイン「Masonry.js」の使い方を紹介します。 縦横の大きさが違う画像を配置すると、デコボコになったり変な余白が生まれたりしますが、Masonr…

はにわまん
JavaScript

アプリのようなドロワーをWebサイトで実現!jQueryプラグイン「hiraku.js」の使い方

アプリのような画面ごとスライドするドロワーメニューを簡単に実装できるjQueryプラグインを紹介します。 動きとしてはこんな感じ。今の世代に一番馴染みのある動きだと思います。 日本人が開発しているとこ…

はにわまん
1 2 3