Responsive Nav — Responsive Navigation Plugin
Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window. Download Features Responsive Nav is a tiny JavaScript plugin which weighs only ~1KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “cle
【FadeThis】スクロールしたタイミングでフェードイン・アウトを繰り返す方法｜Gimmick log
TOPjQuery 【FadeThis】スクロールしたタイミングでフェードイン・アウトを繰り返す方法 【FadeThis】スクロールしたタイミングでフェードイン・アウトを繰り返す方法 公開日：2015.11.20 更新日：2023.03.19 jQuery, アニメーション スクロールしたタイミングで、要素をスライドさせながらフェードイン・フェードアウトが出来るFadeThisというjQueryプラグインを使ってみました。 WOW.jsでも可愛いアニメーション付きで実装出来ますが、こちらは一度実行されると、再度スクロールした場合はアニメーションが実行されないため、スクロールした時の動きをいつも同じにしたい！という場合にお勧めです。 しかも、jQuery 1.x を使えばIE6+から対応しているのがとっても助かります。 ライセンスはMIT。 FadeThis-配布サイト ※2015年11月2
<a href="tel:***">リンクをスマートフォン端末以外では無効にする - Qiita
非常に利便性の高い実装ですが、レスポンシブWebデザインでサイト制作をする場合には、PC端末等での閲覧・操作時に予期しない挙動となる場合があります。 "tel:" リンクを【スマートフォン端末以外では無効】にする方法はいくつかありますが、 「カスタムデータ属性の追加」といったHTML側の調整が必要ない 余計なDOMの書き換えが発生しない という条件では以下のシンプルな実装が考えられます。（jQuery使用） var ua = navigator.userAgent.toLowerCase(); var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua); if (!isMobile) { $('a[href^="tel:"]').on('click', function(e) { e.preventDefault(); }
CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design
@cappeeです。 特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。 例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。 トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。 overflow: hidden を使う 一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。 trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してく
レスポンシブ対応メニュー用jQueryプラグイン「meanmenu.js」
ウィンドウサイズが小さい場合に、自動的にナビゲーションを変形させてくれるjQueryプラグイン「meanmenu.js」のご紹介です。 PCやタブレットで表示する際は、ナビゲーションを横並びに配置しておき、ウィンドウサイズがある一定のサイズを基準にアコーディオン形式のナビゲーションに変形させることができます。 MeanMenu デモサンプル ▼サンプルとして多少カスタマイズしたサンプルをご用意しました。 デモサンプル（カスタマイズ） 【使い方】 1.meanmenu.jsをダウンロードします。 meanthemesよりデータ一式をダウンロードします。 2.jQuery本体とJavaScriptを読み込む 内に読み込む" ><script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/jav
固定ヘッダーメニューjQuery「jquery.exFlexFixed」を使ってみた。
最近はレスポンシブデザインの絡みもあって、 PCサイトで縦に長〜くてスクロールしていくレイアウトとか結構多いのです。 そういうケースでヘッダー部分を上部固定にして、メニューを常に表示させておくようにしたり、 セクションによってサブメニューが現れてメインメニューの下にくっつかせたりさせると ユーザビリティ的によろしい感じだったりするのです。 そこで、「jquery.exFlexFixed」というjqueryプラグインが良さそうだったので、使ってみました。 ダウンロードはこちらから可能です。 デモページ 普通にヘッダー部分が固定するだけだったら、 CSSで「position:fixed」で対応可能なのですが、 問題はサブナビゲーションがページの途中で現れて、一定の領域内ではヘッダーに固定されてほしい時ですよね。 このjquery.exFlexFixed.jsを使用すると、固定されてほしい領域の
ドロワー・スライドインメニューでヘッダー固定【デモあり】jquery Slidebarsが最強！drawer slidein menu
ドロワー・スライドインメニューでヘッダー固定【デモあり】jquery Slidebarsが最強！drawer slidein menu ドロワーメニュー（スライドインメニュー）でヘッダー固定でき、PCでも動作するjqueryプラグインは、Slidebarsが最強です。 drawer とは引き出しの意味です。 drawer menuとかslidein menuとは、facebookみたいに、メニュートグルボタンを押すと、横からスライドしてメニューが表示されるメニューの動作のことです。 まずはデモをご覧ください。 サンプルページ Slidebarsのいいところ iPhone・Android・PCで動作する 動作がなめらか ヘッダー固定できる 左開きも右開きなどいろんな種類のメニューが用意されている 設置が簡単！ 以前ご紹介したDrawer Slide Menu では、ヘッダー固定しようとすると
スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
スクロールについてくる要素とその可動範囲の指定。あれ？この場合ついていかない要素ってことになるのかな？ | Memorandum Book - written by Ravenala
長いページをスクロールしているとサイドメニューなどが見えなくなるときがありますよね。その場合、他のページに移動するにはヘッダーもしくはフッダー、サイドメニューの見える位置までスクロールしないといけません。結構、嫌になるときがありますよね。。。それを解消するには、ページのどの位置にいてもメニューが見えていればいいのです。簡単ですね。そう、お気づきのとおり「 position: fixed 」です。ただ、メニューの位置を初期位置のまま固定する仕様だとデザインの幅が狭くなりますので、指定した範囲を超えたら固定にするとかにしたほうがいいですね。 スクロールについてこなくなる（位置固定になる）要素を「div.menu」とすると。 html <div id="main"> <div id="column-left"> <div class="menu"> <ul> //省略 </ul> </div>
jQueryでページの最上部に位置固定したフルスクリーンスライドショー（クロスフェード）を設置する方法｜BLACKFLAG
最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。 背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますが、jQueryを使って、ページ最上部（ページヘッダー）にフルスクリーンでのスライドショーを設置し、スクロールすると下から通常のコンテンツが表示される、というページ構成を実装するスクリプトを作ってみたので紹介してみます。 少々言葉では説明しずらいのでまず動作サンプルから。 「jQueryでページ上部にフルスクリーンスライドショーを設置する方法」サンプルを別枠で表示 ページの最上部にフルスクリーンサイズにて画像がクロスフェードで切り替わるスライドショーを設置し、ページをスクロールさせるとページ上部にフルスクリーンスライドショーが固定されたまま下からコンテンツ要素が出現します。 スライドショー全体はブラウザサイズを変化させても
jQuery One Page Scroll by Pete R. | The Pete Design
Ready-to-use plugin All you need is an HTML markup, call the script and BAM! <div class="main"> <section>...</section> <section>...</section> ... </div> $(".main").onepage_scroll(); Pretty Neat Eh? You can customise the animation timing, the selector or even the animation easing using CSS3. I can't wait to see what you guys will come up with. Don't forget to grab them for free on Github'
パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0
レスポンシブWebデザインに対応した「jquery.heightLine.js」
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
[JS]レスポンシブWEBデザイン対応のjQuery スライダープラグイン「bxSlider」｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
jQuery ベースのコンテンツスライダーには色々ありますが、今回紹介させていただく「bxSlider」は設置が簡単で、自動再生やフェードインによる画像切り替えなどのカスタマイズも手軽にできる便利なプラグインです。 また、レンスポンシブWEBデザイン対応なのでスマフォやタブレットでも使える所も嬉しいですね。 bxSlider の設置 jquery.bxslider.min.js ファイルと jQueryファイル、CSS ファイルを <head> 内に設置します。 <link href="./bxslider/jquery.bxslider.css" rel="stylesheet" /> <script src="./jquery.min.js"></script> <script src="./bxslider/jquery.bxslider.min.js"></script> <scr
![[JS]レスポンシブWEBデザイン対応のjQuery スライダープラグイン「bxSlider」｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
要素内のテキストをはみ出さず、JSで「...」で省略してくれる「jQuery.dotdotdot」:phpspot開発日誌
jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content. 要素内のテキストをはみ出さず、JSで「...」で省略してくれる「jQuery.dotdotdot」。 次のように、はみだしたテキストを...で綺麗に要素内に収めてくれます。はみ出しているとカッコ悪いですが、サーバ側でこれをやるのはなかなか難しい。 JSなら綺麗にできますね。Read Moreみたいなテキストをつけることもできるみたい 関連エントリ フロートラベルを実装できるjQueryプラグイン「FlowupLabels.js」 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 階層的なスケジュール表示ができて便利なjQueryプラグイン「GraspSchedule.js」
Webサイトの背景をおしゃれに演出 Particleground
「Particleground」は、Webページの背景にパーティクルアニメーション（爆発時の飛散物のように、たくさんの点が同時に動くアニメーション）を表示するプラグインです。ユーザーの目を引くおしゃれな背景を手軽に導入でき、マウスカーソルに追従して動く視差効果（パララックス）の機能もあります。 ParticlegroundプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 9以降、スマートフォンではiOS 7.1のSafari、Android 4以降の「ブラウザ」に対応しています。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、 Particlegroundを配布ページからダウンロードします。ページ中央の「Downl
highlight: JavaScript text higlighting jQuery plugin
Text higlighting is part of DynaCloud – where tags/keywords are automatically highlighted once they’re clicked – so I took that code and made it a stand-alone JavaScript text highlighting jQuery plugin. Demo Each of the links will highlight the corresponding word. highlight javascript Remove highlights. Usage Add highlight Download jquery.highlight-2.js (2 KB) and add it to your page after jQuery.
jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法｜BLACKFLAG
Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、 並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形での スクリプトサンプルを試しに作ってみたので紹介してみます。 まずは動作サンプルから。 サンプル画面でウィンドウサイズを伸縮させてみてください。 「jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法」サンプルを別枠で表示 MediaQueriesでウィンドウサイズによって1行ごとに並ぶ要素数を変えてありますが それぞれ1行ごとの最大の高さに要素の高さが揃うようになっています。 全体構成についてまずはHTMLから。 ◆HTML <div class="listarea"> <ul> <li>このテキストはサンプル用のダミーテキストです。このテキストはサンプル用のダミーテキストです。このテキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jonom/jquery-focuspoint: jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.
jqueryを使って縦書きのレイアウトにする
