jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える
Posted: 2015.12.09 / Category: HTML&CSS, javascript / Tag: jQuery jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="nav-toggle
The best validation library for JavaScript - FormValidation
The best validation library for JavaScriptWritten in ES6Type safety using TypeScriptZero dependenciesNo jQueryCan be used as AMD, ES6 modules and global scripts
Vegas Background SlideShow
Vegas2Background SlideShowjQuery/Zepto PluginProject by Jay Salvat, Pictures from Unsplash. Need support? Don't waste your precious time, Hire me Feeling Generous? Buy me a beer, beer is good for motivation Need support?Don't waste your precious time, support is available for 24$. Ask your question and quickly receive a ZIP file with a clear running example with commented code and assets solving y
zepto.js — the aerogel-weight mobile javascript framework
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile API, so you can concentrate on getting
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/87c79333735eb75d10033e33d194426b66f5def3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
jQuery Documents Main Page - jQuery
jQuery API jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center. If you're updating to a newer version of jQuery, be sure to rea
iPhoneでWebアプリのホーム画面登録を促す「Mobile Bookmark Bubble」をjQuery Mobileと併用してみた - Startup Reality
昨今、jQuery MobileやSencha TouchやHTML5でけっこうなUIのスマートフォン用Webアプリを作れるようになってきました。でも、せっかくアプリっぽいのを作ったら、開発者としてはホーム画面に追加してほしいですよね。 そこで便利なのが、「Mobile Bookmark Bubble」というWebアプリのホーム画面登録を促すバルーンを表示するGoogle製のJavaScriptライブラリです。 これを使うと、以下のようなバルーンが下からにょきっと出てきます。 MOONGIFTさんもiPhone/iPadでホームボタン誘導「Mobile Bookmark Bubble」 と紹介しています。 普通に使うのはそんなに難しくないんですが、jQuery Mobileと一緒に使うのが意外と大変でした。なぜなら、Mobile Bookmark BubbleとjQuery Mobileは
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
[JS]普通のかっこいいスライドから、予想の斜め上いく3Dのアニメーションにも対応したコンテンツスライダー -Adaptor | コリス
シンプルなインターフェイスに、スライド時にさまざまなエフェクトが用意されたコンテンツスライダーを実装するjQueryのプラグインを紹介します。 下記キャプチャのエフェクトは3Dで、くるっぐい～ん、って感じです。 Adaptor, a jQuery 3D content slider Adaptorのデモ Adaptorの使い方 Adaptorのデモ コンテンツスライダーの対応ブラウザは、IE6を含むすべてのモダンブラウザです。 3DのエフェクトはFirefox, Chrome, Safariのみで、他のブラウザで表示した際はフェードのエフェクトになります。 スライドのエフェクト Adaptorの使い方 実装は3ステップです。 Step1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//code.jquery.com/jqu
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
ColorBox - ポップアップ内を自由に設定できる活かしたjQuery
View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped). Appearance is controlled through CSS so it can
jqueryで画像のロード完了後に実行 - downstairs lab
jqueryで以下のように書いたら画像の読み込み完了後に読み込まれると思っていたら、 ieは正しく動作せず。どうやら、ブラウザによって挙動が異なる模様。 http://api.jquery.com/load-event/ $("#photo img").load( function(){ //ロード完了後の処理 } そこでimagesLoadedプラグインを使用するとieでも画像の完了後の処理が可能になります。 https://gist.github.com/268257 $("#photo img").imagesLoaded( function(){ //ロード完了後の処理 }); 画像のロード完了処理の際はお気を付けください。
JavaScriptで画像ファイルをプリロード
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
jQuery親要素、子要素、兄弟要素取得のまとめ
※各メソッドにかいてある[条件]ってのは、タグ名やid、クラス名を指定するってことです。 条件を入れると、条件にあったものだけが取得されるようになります。 例：$(elem).parent("div.class-name, #id"); 通常のJavaScriptでの要素取得方法は→[JavaScript] 親要素・子要素・兄弟要素の取得方法 ■親要素の取得 □parent([条件]) 親要素の取得。 すぐ上の親要素のみ。さらに上の先祖要素にはさかのぼらない。 $(elem).parent("div"); 親要素がdivだったら親要素が取得できる。divじゃなければ空。 □parents([条件]) parent()と違い親より上の先祖要素までさかのぼる。 $(elem).parents(".class-name"); class-nameというクラス名がついた先祖要素のみ取得 □clos
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
jQuery入門講座：マウスホイール
索引 └ プラグイン目次 1章：小ネタ系 ├ イージングの追加 ├ 要素のセンタリング ├ クッキーの操作 ├ マウスホイール ├ スクロールバー(1) ├ スクロールバー(2) ├ スクロールバー(3) ├ スクロールバー(おまけ) └ アニメの一時停止/再開 2章：ショーケース系 ├ Nivo Slider(1) ├ Nivo Slider(2) ├ Nivo Slider(3) └ Nivo Sliderの改造 3章：カルーセル系 ├ carouFredSel(1) ├ carouFredSel(2) ├ carouFredSel(3) ├ carouFredSel(4) ├ carouFredSel(5) ├ スマホでカルーセル(1) ├ スマホでカルーセル(2) ├ カルーセルとnivo(1) ├ カルーセルとnivo(2) ├ カルーセルとnivo(3) └ カルーセルとniv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips
ドラッグ＆ドロップで画像をUPできるようにするjQueryプラグイン「JQuery File Uploader」:phpspot開発日誌