アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点
fixedになるとコンテンツの高さが変わる 最近ナビゲーション部分をウィンドウ上部までスクロールするとposition:fixedに切り替わってスクロール時に上部に配置され追随されるものがあるがWebページ内のナビゲーションがfixedに切り替わるとコンテンツから高さがその分引かれるためナビゲーションがアンカーリンク先への遷移の場合、正しく目的のところまで遷移できなくなってしまう。 例えばWebページ内の高さが2140pxでナビゲーションの高さが70pxのfixedになることで2140px-70px=2070pxとなりその分アンカーリンクの位置も変わるため正しく遷移できなくなる。 fixed時にアンカーリンクで正しく遷移できないサンプル ナビゲーションの高さを取得して計算する ナビゲーションの高さを取得してアンカーリンククリック時の移動位置を補正し、fixedになったときは失った高さ分を追
シンプルなタブメニュー
Result jQuery$(document).ready(function() { //最初に表示するコンテンツ $('.area:first').show(); //class="active"を追加 $('.tab li:first').addClass('active'); //クリックイベント $('.tab li').click(function() { $('.tab li').removeClass('active'); $(this).addClass('active'); $('.area').hide(); $($(this).find('a').attr('href')).fadeIn(); return false; }); });css.tab, .tab li, .tab li a { float: left; padding:3px; margin-rig
wow.jsとanimate.cssでかんたんアニメーション！ | らうんじ
こちらのページで多用しました。 パララックスともまた違い、要素ひとつひとつをバラバラに自在に動かすことができます。かなりいい感じ。 http://gallery-lounge.com/campaign/ WOW.jsの何が凄いって超かんたん。 まずはWOW.jsとanimate.cssを読み込む。 jsは任意の場所で。ちなみに参考のページでは本家サイトの通り</body>の直上。 wow.js http://mynameismatthieu.com/WOW/index.html animate.css http://daneden.github.io/animate.css/ アニメーションのCSSスタイルはこちらの中から選んでもらうとわかりやすいかも。 animate.cssのサイト（ダウンロードもこちらから） http://daneden.github.io/animate.css/
スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」 | NAKAZI LAB.（ナカジラボ）
「jquery-scrollInTurn.js」は、スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができます。 スクロールして指定要素より上に戻った時、再びフェードイン表示させる・させないの指定も可能です。 デモページ JavaScript (function($){ $(function() { $('#parent').scrollInTurn({ selector: '.child', delaySpeed: 100, fadeInSpeed: 300, fadeOutSpeed: 300, easing: 'linear', delayHeight: 50, fadeOutEvent: true }); }); })(jQuery); HTML <div id="contents"><p>↓scroll<br>↓scroll<br>↓scr
Fotorama — Simple and Powerful Responsive jQuery Image Gallery
Set upJust copy and paste the snippets below to integrate Fotorama. 1. This goes to the <head> of your page: <!-- jQuery 1.8 or later, 33 KB --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Fotorama from CDNJS, 19 KB --> <link href="/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <script src="/ajax/libs/fotorama/4.6.4/fotorama.js"></scrip
(K)jQueryでスマホでも実装可能なサイズ可変型タブパネルを作成 | web(K)campus|WEBデザイナーのための技術系メモサイト
スマホは少ない領域で必要な情報を表示させるため、ファーストビューに何を持ってくるか悩みます。仮に「新着情報」と「STAFブログ」を同じレベルで表示したい場合はドキュメントを切り替えて表示する「タブ」機能を使うのが有効的です。 PCではさんざん使用してきましたが、スマホサイトの作成の際にスマホ対応のタブ機能をJQueryで作成したので備忘録としてまとめておきます。 HTMLマークアップ ポイントとしては「タブ（ボタン）」と「パネル（内容）」を別のul要素とtab要素で囲うことです。「タブ（ボタン）」のhrefの飛び先の「#◯◯◯」と「パネル（内容）」のli要素のidは同じにします。初期状態で表示させたいパネルはselectedのclass名をつけておきます。 <body> <div id="contents"> <ul class="tab"> <li><a href="#tab1" cla
jQueryプラグインを使わずにアコーディオンメニューを作ろう | PLUSTRiCK
主にスマホサイトで用いられているアコーディオンメニュー。ゲーム系サイトであればゲーム内メニューの表示に。会員系サイトであれば会員メニューの表示に。EC系サイトであればカテゴリーメニューの表示に…などなど。 表示領域が限られているスマホサイトならではの便利な機能だと思います。今回はプラグインなしのアコーディオンメニュー制作のメモ。 アコーディオンメニューの中でも、特に汎用性の高い2つを備忘録的にメモ。 アコーディオンメニュー(ul、liを使用) ulとliを使用してのアコーディオン。 アコーディオンの開閉と同時に矢印の切り替えを実装。 複数の項目を同時に開くことが可能。同じ部分をクリックすることによって非表示になります。 jQuery $('.accordion_ul ul').hide(); $('.accordion_ul h1').click(function(e){ $(this).
【★★★ - ｊＱｕｕｅｒｙ】 - クリックで開くアコーディオンメニュー
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"
クリックで開閉するアコーディオンパネル
Result jQuery//最初以外を隠す $('#faq .answer').not(':first').hide(); //クリックイベント $('#faq .question').click(function() { //スライドの処理 if($(this).next('.answer').is(':visible')) { $(this).next('.answer').slideUp(300); } else { $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300); } });css.question { padding:5px; font-weight:bold; font-family:Arial; font-size:14px; border:1px solid #ddd; ba
jQueryでメニューやコンテンツをスライドさせて表示する
右はマウスオーバーでメニューがスライドします。 左はクリックするとコンテンツがスライドし、もう一度クリックすると閉じます。 吾輩（わがはい）は猫である。名前はまだ無い。 どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛を
jRumble | A jQuery Plugin That Rumbles Elements
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
画像やボックス要素にhoverするとエフェクト付きで別のボックス要素を表示するjQueryプラグイン・ContentHover
画像やボックス要素にマウスホバーすると 別のボックス要素をフェードエフェクトや スライドアニメーションで表示させる事が 出来るjQueryプラグインです。昔は色々と これ系を見かけましたけど最近は全然無い ですね。 これくらいなら自作する、という方も多いのか、以前はかなり見かけたホバーエフェクトのjQueryプラグインは全然見かけなくなりましたが、プラグインの方が楽な場合も多々あると思いますのでこういうのも覚えておくと工数を減らせるかもしれません。 ボックス要素が画像の上にオーバーレイ込みで表示されます。マウスを乗せたらRead more、みたいなのも容易に出来ますね。 divの上にdiv的な事も出来ます。 IEでも問題ないです。 簡単に実装出来ました。 コード<script type='text/javascript' src='http://ajax.googleapis.com/aj
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
要素を遅らせて表示させるjQueryのサンプル
jQuery書く コードは以下です。 $(function(){ var hide = $('h1,#contents'); //隠すhtmlタグを指定 var title = $('h1'); //タイトルのタグを指定 var cont = $('#contents'); //コンテンツのタグを指定 hide.addClass('none'); //変数hideにcssのclass"none"を指定 title.fadeIn(1000, function(){ //変数titleをフェードインさせ、その後上から移動させる $(this).animate({top : 0}, 500); }); cont.fadeIn(1000, function(){ //変数contをフェードインさせ、その後#footerを表示と移動 $('#footer').animate({width: 700,
jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる
最近更新ペースが遅くなっています。最近仕事の関係でサイトを作っているのですが、そこで使った方法を紹介します。スクロールしてコンテンツが現れたときにアニメーションが開始します。jQueryを使っています。 言葉ではイメージしにくいかもしれません。百聞は一見にしかず、ということでサンプルをご覧ください。画像が画面内に表示されると右にアニメーションします。 プラグインもありそうですが、安易にプラグインを使うのではなく自分で作った方が勉強になります。また、プラグインによっては色んな機能があるために無駄に容量が大きくなってしまうこともあります。そんな場合は、必要な機能だけ自分で書く方が読み込み速度的にも効果的なのかなと思います。 jQuery全体はこんな感じになります。 $(function(){ $('.effect').css("opacity",".3"); $(window).scroll(
リスト要素をドロップダウンメニューに変換する jQuery プラグインを作ってみた - Cyokodog :: Diary
更新履歴 2011-09-29 Ver 0.1.3 に更新 垂直方向へのスクロール状態でのメニュー表示位置ずれ不具合を修正しました。 2010-12-01 Ver 0.1.2 に更新 ドロップダウンメニューの保持を示すマーカー（»）の表示位置の調整処理を補正しました。 2010-11-17 Ver 0.1.1 に更新 メニューが画面の端で展開された際に、ウィンドウの表示枠からはみ出て隠れてしまわないように、表示位置を補正をするようにしました。Demo 先日、イントラの WEB ページで 10 年以上使用してる Java アプレット製のドロップダウンメニューを JavaScript でリニューアルしたいという相談を受けました。jQuery のプラグイン使えば簡単かなと思い安請け合いしたのですが、なかなかしっくりくるプラグインを見つけることができませんでした。具体的には水平/垂直の両方向に対応
サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ - CodingMania
jqueryを使って、サムネイル画像にマウスオーバーするとメイン画像を切り替えて大きく表示します。 ヘッダーで、jquery.jsと後述のswapimage.jsを読み込んでいます。 2014.01.24 同ページで複数設置できるように改訂。 キャプションつきの場合は、こちら↓ [キャプション付き]サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ サムネイルにリンクをつけたい場合は、こちら↓ [リンク付き]サムネイル画像をマウスオーバーで画像拡大、クリックでページ遷移 デモページへopen_in_new JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="tex
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Awkward Showcase - Demo #5
https://bqworks.com/slider-pro/
Web初心者がjQuery 簡単なタブメニューを実装する方法(サンプル付き) - Sedori Plan