東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

jQuery

LOADING中はスクロール禁止

html { overflow-y: scroll; } body{ position: fixed; overflow-x: hidden; } .wrap { overflow: hidden; } #loading { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #000; text-align: center; display: table; color: #fff…

【jQuery each】li要素を順番にアニメーション

$(function(){ // リストを非表示 $('#fadein_area ul li').hide(); // 繰り返し処理 $('#fadein_area ul li').each(function(i) { // 遅延させてフェードイン $(this).delay(500 * i).fadeIn(1000); }); }); 【参考サイト】 http://www.dataplan.jp/blog/jq…

惰性スクロール(イージングスクロール) 記事まとめ

https://skygold.jp/web/1278.html http://webdrawer.net/javascript/jsscroll.html http://www.webopixel.net/javascript/435.html http://the-zombis.sakura.ne.jp/wp/blog/2015/02/02/post-2626/

【jQuery】タブ切り替え2(レスポンシブ対応でdisplay:noneからのfadein)

<ul id="click_box2"> <li class="select">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <div class="f_r"> <div class="content_wrap disnon show"> </div> <div class="content_wrap disnon"> </div> </div>

【jQuery】タブ切り替え

<ul id="tab"> <li class="select">ボタン1</li> <li>ボタン2</li> <li>ボタン3</li> <li>ボタン4</li> </ul> <div class="safety_cw"> <div class="content_wrap no1"> <div class="container_safety"> <h2>コンテンツ</h2> </div> </div> </div>

要素の高さをレスポンシブでそろえたい時【jquery-fixHeightSimple.min.js】

$(function(){ // ページ読み込みでsameheight関数 sameHeight(); // ブラウザリサイズ リサイズ完了時に実行 var timer = false; $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { sameHeigh…

touchmove.noscrollを使ったスマホナビ

これだと、スマホで背景は固定されるがPCではされない。まあいいや var current_scrollY; $(document).on('click', '.menu-trigger', function() { if ($(".menu-trigger").hasClass("active")) { // メニューを閉じるとき $(window).off('.noScroll'); $(th…

falsandtru版pjax やりかた

下記のコードを入れたところpjaxでトップページに戻ったときスライダーの切り替えがぐちゃぐちゃになる。たぶんsetintervalがいかれてる。 このページの「ページ読み込み時の処理」ってとこでいけるかなあ。あとで試す。とりあえずメモ。http://chibinowa.ne…

【jQuery】infinite scrollの使い方

ページングをクリックしなくても、スクロールすれば自動で次のページのコンテンツが出てくる、いわゆる「無限スクロール」をWordPressサイトで実装することができるプラグイン「Infinite Scroll」。とりあえず今回はワードプレスのプラグインのものを使用。 …

jquery callback コールバック queue 使いかた

下記コードは、 #bg_fvがフェードイン後に#logo_indexがフェードイン。そのあとに.home #g_naviがfadeInされる。最後にdequeueを。 $('#bg_fv').fadeIn(1000).queue(function () { $('#logo_index').fadeIn(500).queue(function () { $('.home #g_navi').fad…

背景画像を読み込んだら処理 imagesloaded

まずプラグインimagesloaded読み込み <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>そして以下。 $(function(){ $('#bg_fv').imagesLoaded( { background: true }, function() { $('#bg_fv').fadeIn(1000); }); }); 【背景画像】 https://www.imd-net.com/blog/2016/03/01-…

【jQuery】lazyload使い方

head内にlazyloadのプラグインjs読み込ませる。以下はオプションでカスタムのイベントloadImgをつくってる。 kikaku1をクリックすると、lazyloadが始まる。(img.lazyの画像読み込みが始まる)data-originalに本命のimgを。srcにloading中の画像を <img src="dummy.png" class="lazy" data-original="honmei.jpg" alt="*" /> $(functi…

【jQuery】特定の要素が画面内に表示(レンタリング)されたら際、処理を実行する。

$(function(){ // 処理実行の引き金となる要素を設定 var target = $("#target"); $(window).scroll(function(){ // 実行のトリガーになる要素のオフセット(一番上からの距離)から // 画面の縦幅を引いたものを処理実行までの距離とする(画面の下端を基準…

【jQuery】offsetとscrollTop

①offset()の基本 jQueryで要素の位置を取得したり移動させるにはoffset()を使います。 ブラウザの左上ではなく、ドキュメントの左上となります。 ですので、スクロールしたら起点はブラウザ上からは見えなくなります。 ②scrollTop()の基本 $(window).scrollT…

モーダルウィンドウでよく使うバブリング

・クリックなどのイベントは、子要素から親要素へと伝播される(バブリング) ・preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 ・return false; を使うと、その要素のイベントも親要素へ…

【jquery】fadeInupとかのモーションの場合のコーディング

fadeInupとかモーションするときは以下の感じでさきにcssメソッドでopacity:0にしてdisplayをblockにする。そんでshowメソッドからのanimate $("div").css({ "opacity":"0", "display":"block", }).show().animate({opacity:1})

jQueryで特定の要素が存在するかどうかを判別する処理

$(function(){ if($('#sample').length){ ~ ここに「#sample」が存在した場合の処理を記述 ~ } else { ~ ここに「#sample」が存在しなかった場合の処理を記述 ~ } }); もし次の要素がなかった場合次へボタン削除・・・とかで使った if($('.content_mod…

【jQuery】n番目の要素にアクセス

jQueryでクリックされた要素が何番目か取得する <ul> <li class="some-item">hoge</li> <li class="some-item">foo</li> <li class="some-item">bar</li> </ul> $('li.some-item').on('click', function(){ var index = $('li.some-item').index(this); console.log(index + 'th item clicked!'); }); インデックスは配列と同じで0から始まる 【参考URL】…

【jQuery】Masonry 実装メモ

①とりあえずまずレイアウトをcssなどでだいたいつくっとく。itemがmasonryのタイル1個1個のスタイル。ここでwidthやmarginプロパティを設定しておくとその通りにタイルが配置されるよう。 このタイルの横並びもdisplay:inline-blockで最初に処理しとく。そん…

【jQuery】マウスクリック連打とかイベント重複を防ぐ

var busy = 0; // これはクリックイベントのコードの直前に記述。 $('div').on('mouseover click', function() { //連打を防止したいイベントコード if (busy == 1) return false; // イベント内最初に記述 // 処理開始 $(this).append('●'); // 処理終了 */…

ページトップへ戻るボタン【追尾バージョン】

JavaScript $(function() { var topBtn = $('#pagetop'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function() { if ($(this).scrollTop() > 100) { topBtn.fadeIn(500); } else { topBtn.fadeOut(500); } }); //スクロール…

【jQuery】チェックを入れてからボタンを押せるようにする

jQuery $(function() { $('.cart_real').attr('disabled', 'disabled'); $('#cart_check').click(function() { if ($(this).prop('checked') == false) { $('.cart_real').attr('disabled', 'disabled'); } else { $('.cart_real').removeAttr('disabled'); …

【jQuery】ページ内スクロール

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒 // アンカーの値取得 var href= …

【jQuery】waypoint.js やり方

/bodyの直前に以下記述。ただしloadイベントを使っているのはページ自体にローディング機能をつけた場合の記述。 <script src="js/jquery.waypoints.min.js"></script> <script> $(window).on('load',function(){ $('selector1').waypoint(function(){ $('.selector2').addClass('fadeIn'); },{ offset : '-2400px' }); </script>…

velocity.jsのコールバック

$('selector1').velocity({skewX:"-12deg", scaleX:"1.3", translateX:"100%"}, {duration:500, complete: function(){ $('selector2').remove(); $('selector3').addClass('aaa'); } });

【jQuery】カンタンなローディング画面

【html】 <div> <ul id="images"> <li><img src="images/img01.jpg" alt="image"></li> <li><img src="images/img02.jpg" alt="image"></li> <li><img src="images/img03.jpg" alt="image"></li> <li><img src="images/img04.jpg" alt="image"></li> <li><img src="images/img05.jpg" alt="image"></li> <li></li></ul></div>

ローディングのJSを入れたら他のJSが動かなくなった時の対応

ローディングのJSを入れたら、・スティッキーヘッダーが高さ取得できない ・パーティクルのプラグインが動かないこのようなことが起こった 結論からいうとそれぞれのJSにイベントの対応すればOK 通常下記のようになっているところを $(document).ready(funct…

Instafeed.jsの使い方

①instafeed.jsをダウンロード。そしてクライアント用のアカウントを作成する。(自分のアカウントではあんまり作らないほうが良い) ②JSをユーザーアカウントから画像を取得出来るように書き換えるプラグインページに記載されている内容を下記に変更してhead…

【jQuery】fullpage.jsの使い方

html <div id="fullpage"> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> </div> css head内に記述

【jQuery】関数の設定

関数とは ある特定の処理をするために作られた、比較的小規模なプログラムのこと。関数は定義しただけではなにも働きをせず、定義された関数の機能が必要になったときに呼び出して使う。 関数定義と呼び出し function nameFunction(){ //関数が呼び出される…