js(JQuery)

実装したい項目から選択

• .slide_toggle

  ボタンクリック時に特定の要素を表示 / 非表示

  							
  								$(document).on('click','.class-ボタン名',function(){
  									 $('.class_表示したいもの').slideToggle();
  								});
  							
  						

• resize

  画面幅640px以上の時、画面幅640px以下、470px以上の時、画面幅470px以下の時にそれぞれcssを指定する
  (読み込んだ際、画面幅を変更した際に起動)

  							
  								$(window).on('load resize',function(){
  									 var wh = $(window).width();	
  									 if(wh <= 640 && 470 < wh){
  										  $('.example > div > .bg_grad').css('width', wh - 30 + 'px');
  										  $('.swiper-container_about').css('width', wh - 130 + 'px');
  									 }else if(wh <= 470){
  										  $('.example > div > .bg_grad').css('width', wh - 40 + 'px');
  										  $('.swiper-container_about').css('width', wh - 80 + 'px');
  									 }else{
  										  $('.example > div > .bg_grad').css('width', wh - 40 + 'px');
  										  $('.swiper-container_about').css('width', wh - 140 + 'px');
  									 }
  								});
  							
  						

• .ready

  サイトを読み込んだら一番heightが大きい要素に高さを合わせる

  							
  								$(document).ready(function(){
  								   var maxHeight = 0;
  									 //もしdivがmaxHeightの値より大きい場合はdivの高さを全部合わせる
  									 $(".class_高さを合わせたい要素").each(function(){
  									     if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
  									 });
  									 //divの高さを取得する
  									 $(".class_高さを合わせたい要素").height(maxHeight);
  							  });
  							
  						

• .prop

  択一チェックボックス ※inputに共通クラスを付与

  							
  								$(function(){
  								   $('.work').on('click', function() {
  								    if ($(this).prop('checked')){
  								           // 一旦全てをクリアして再チェックする
  								           $('.work').prop('checked', false);
  								           $(this).prop('checked', true);
  								    }
  								   });
  								});
  							
  						

• .html

  指定要素内のhtmlを書き換え(サンプルは画面幅でhtmlを変更)

  							
  								$(function(){
  									 var w = $(window).width();
  								    var x = 640;
  									 if(w <= x){
  									  $('.class_書き換えたい一個親の要素').html('<img src="img/top_sp.png"><header class="top_nav"><a href=""><img src="img/logo_white.png" width="149"></a></header>');
  								   } else {
  								    $('.class_書き換えたい一個親の要素').html('<img src="img/top.png"><header class="top_nav"><a href=""><img src="img/logo_white.png" width="149"></a></header>');
  									 }
  								});
  							
  						

• .scrollTop

  スクロール位置をデフォルト一番下にする。

  							
  								$(".class_スクロールする要素").scrollTop(100000000);
  							
  						

• .scroll

  スクロールしてheaderが動いたら.fixedを追加(topに戻ると削除)

  							
  								$(function(){  
  									 var nav    = $('header'),
  									      offset = nav.offset();
  									  
  									 $(window).scroll(function () {
  									    if($(window).scrollTop() > offset.top) {
  									       nav.addClass('fixed');
  									    } else {
  									       nav.removeClass('fixed');
  									    }
  									 }); 
  								});
  							
  						

• data-scroll

  aタグにdata-scrollを追加するとhref="#〇〇"の位置までスクロールする。(data-offset=数値で停止位置の微調整)

  							
  								  $('a[data-scroll]').on('click', function(e){
  									   e.preventDefault();
  									   var id = $(this).attr('href');
  									   var offset = ($(this).attr('data-offset') != undefined) ? parseInt($(this).attr('data-offset')): 0;
  									   $("html,body").animate({scrollTop:$(id).offset().top + offset}, 1000);
  									});
  							
  						

• .offset().top

  トップからのスクロール量(h)が指定した数値(200)を上回り、フッターのトップからの距離(f)を下回っている間クラスを付与する。

  							
  								$(window).scroll(function(){
  							     var h = $(window).scrollTop(),
  							          f = $('footer').offset().top;
  							     if(h > 200 && h < f - 1000){
  								      $('main > .fixed').addClass('view');
  							     }else{
  								      $('main > .fixed').removeClass('view');
  							     }
  							  });
  							
  						

• .delay

  アクション全体を遅らせたい時は一番上に指定。個別で指定したい場合はfunctionの中に指定。

  							
  								// 全体に指定したい場合
  								$('#modal .container > div > *').delay(400).queue(function(next) {
  							     $(this).remove();
  							     $('.class_').addClass('view');
  							     next();
  								});
  								
  								// 単体に指定したい場合
  								$(document).on('click','#modal .container > span',function(){
  									 $('#modal').removeClass('view');
  									 $('body').removeClass('modal_view');
  									 $('#modal .container > div > *').delay(400).queue(function(next) {
  								      $(this).remove();
  								      next();
  									 });
  								});								
  							
  						

• .delay / for

  画面読み込み後、リストのクラスを順番に削除

  							
  								$(document).ready(function(){
  									for(var i = 0; i < 10; i++){
  										$('aside .face_right li.ready_view').eq(i).delay(1200 + i * 300).queue(function(next){
  										  $(this).removeClass('ready_view');
  										  next();
  										});
  									}	
  								});							
  							
  						

• swiper.js

  swiper.min.js / swiper.css を読み込み下記のコードで該当するスライダーの設定と機能を調整する。

  															
  						    var swiper = new Swiper('.swiper-container', {
  						       pagination: '.swiper-pagination',
  					         paginationClickable: true,
  					         nextButton: '.swiper-button-next',
  					         prevButton: '.swiper-button-prev',
  					         slidesPerView: 5,
  					         slidesPerGroup: 5,
  					         loop: true,
  					         loopFillGroupWithBlank: true,
  						    });
  						    
  						    ↓下記の記述に変更(上記ではハミ出る + ボタンが動かない)
  						    
  								var w = $(window).width();
  									 $('.swiper-container').width(w);
  								   var swiper = new Swiper('.swiper-container',{
  									    nextButton: '.swiper-button-next',
  									    prevButton: '.swiper-button-prev',
  									    slidesPerView: 1.2,
  									    centeredSlides : true,
  									    slidesPerGroup: 1,
  									    loop: true,
  									
  									    navigation: {
  					               nextEl: '.swiper-button-next',
  					               prevEl: '.swiper-button-prev',
  					            },
  								 });
  														
  						

  便利すぎ！jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう | WordPressテーマ／DigiPress

  引用元URL　: https://digipress.digi-state.com/tech/introducing-swiper-js/

  ちょっと機会があって、swiper.js使ったからその時のメモ。本当は単語ごとにスムーススクロールとか設置した方がいいんだろうけど、めんどく( ブラウザの検索機能を使ってくだしあ。ちょくちょく間違ってる可能性があるから、間違ってる箇所があったら教えていただければ気まぐれで修正します。)

• .animate / .data

  ボタンにdata属性を指定しクリックした際に、ボタンのdata-idと同じ数値のidを持つ要素までスクロールする仕組み

  																						
  								// html
  								<div class="list">
  							     <a data-id="1">1まで飛ばす</a>
  							     <a data-id="2">2まで飛ばす</a>
  							     <a data-id="3">3まで飛ばす</a>
  								</div>
  								
  								<section id="list1">1の飛び先</section>
  								<section id="list2">2の飛び先</section>
  								<section id="list3">3の飛び先</section>
  								
  								// script
  								$(document).on('click','.list a',function(){
  									 for(var  i  =  1;  i  <  50;  i++){
  										  if ($(this).data("id") === i) {
  										    	var a = $('#list' + i).offset().top - 100;   
  									       $('.modal_box').animate({scrollTop: a}, 1000);
  									    }
  									 }	
  								});
  							
  						

• function target

  個別に要素を指定して、一つののアクションをそれぞれに割り当てる

  demo

  											
  								$(function() {
  								  $(window).on('load scroll', function() {
  										add_class_when_visible($('#type_1'));
  										add_class_when_visible($('#type_2'));
  										add_class_when_visible($('#type_3'));
  										add_class_when_visible($('#type_4'));
  										add_class_when_visible($('#type_5'));
  								  });
  								});
  								
  								function add_class_when_visible(target){
  									
  										// スクロール位置を取得
  								    var scrollTop = $(window).scrollTop();
  								    var scrollBtm = scrollTop;
  								    
  								  if(target.length){
  								    // 対象要素の位置を取得
  								    var targetTop = target.offset().top;
  								    var targetBtm = targetTop + target.height();
  								
  								    // 画面内にある場合
  								    if(scrollBtm > targetTop && scrollTop < targetBtm) {
  								        target.find('h2').addClass('fixed');
  								    } else {
  								        target.find('h2').removeClass('fixed');
  								    }
  									}    
  								}													
  							
  						

  要素が画面内にあるかどうか判別する処理を実装する | cly7796.net

  引用元URL　: http://cly7796.net/wp/javascript/determine-whether-an-element-is-in-the-screen/

  要素が画面内にあるかどうか判別して、画面内にある場合にのみclassを付与する処理を実装してみます。

• .each / .offset().top / .scrollTop()

  (1 - (position - scroll) / $winH) とは （1 - (要素が画面に入り込むまでの距離) / 画面幅）。

  demo

  															
  						    $(function () {
  					        $('.scroll').each(function () {
  					          var $win = $(window),
  					              $winH = $win.height(),
  					              $connect = $(this),
  					              position = $connect.offset().top,
  					              current = 0,
  					              scroll;
  					          $win.on('load scroll', function () {
  					            scroll = $win.scrollTop();
  					            current = (1 - (position - scroll) / $winH) * .6 * 100;
  					            if (current > 99.9) {
  					              current = 100;
  					            }
  					            if (scroll > position - $winH) {
  					              $connect.css({'background-position-y': 100 - ( current / 1.3 ) + '%'});
  					            }
  					          });
  					        });
  					      });
  														
  						

  [jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog

  引用元URL　: https://theorthodoxworks.com/study/jquery-scroll-connected-animation/

  アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。

• chart.js / canvas

  chart.js canvas でグラフと図を描画

  demo

  [HTML5] CanvasでRetina対応を行う - YoheiM .NET

  引用元URL　: https://www.yoheim.net/blog.php?q=20121005

  CanvasでRetina対応できるのかを調べました。今回はその結果を記載したブログとなります。

• event.preventDefault();

  要素をクリックした後にその要素にクラスを追加して、指定の秒数後にリンク先へ移動する

  																			    
  					     $(document).on('click','.class_名', function(event) {
  								   event.preventDefault();
  								   var linkUrl = $(this).attr('href');
  								 
  								   // ここにリンク先への遷移直前に実行する内容を記述↓
  								   $(this).parent().addClass('break');
  								 
  								   function action() {
  								     location.href = linkUrl;
  								 
  								     // ここにリンク先への移動直後に実行する内容を記述↓
  								   }
  								   setTimeout(action,1000);
  								});