【レンタルサーバ】データベースの作成・追加・削除 – さくらのサポート情報
引用元URL : https://help.sakura.ad.jp/hc/ja/articles/206053952–%E3%83%AC%E3%83%B3%E3%82%BF%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%90-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E4%BD%9C%E6%88%90-%E8%BF%BD%E5%8A%A0-%E5%89%8A%E9%99%A4
js(JQuery)
実装したい項目から選択
要素の表示 / 非表示 の切替
画面幅でのレスポンシブ
要素の高さを合わせる
チェックボックス 択一設定
htmlを書き換える
一番下までスクロールした状態にする
トップから動いたら要素にクラスを追加
トップへスクロール
トップから一定数スクロールしたら表示
要素を時間差で削除する
listのクラスをを順番に時間差で削除する
スライダーの設定
簡易的なスクロールコード
スクロール量でアニメーション,css追加/変更
背景画像の動きをずらして立体的に見せる
chart.js canvas でグラフと図を描画
ページ遷移前に特定要素にクラスを追加したい
-
.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=20121005Canvasで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); });
Comments
-
y.kobayashiさん
はじめましてー!http://reiwinn-web.netで細々と記事を書いてるレーウィンです。
swiperの箇所にて関連リンクを設置していただき真にありがとうございます。とても嬉しいです!
1点お願いがありまして、swiperのリンク先を
https://digipress.digi-state.com/tech/introducing-swiper-js/
もしくは
https://www.wan55.co.jp/column/detail/id=588
もしくは
http://reiwinn-web.net/2018/03/15/swiper-4-1-6/
こちらのいずれかに変更していただけないでしょうか?
といいますのも、swiperはバージョン4以降、オプションの書き方が変更されました。
例を挙げますと、paginationの書き方は
pagination: {
el: ‘.swiper-pagination’,
clickable: true
}
このようになっております。
最新の情報を多くの方に知っていただきたく、お時間ありましたらご対応いただきたく思ってます。
よろしくお願いします。
こんなことをjsで解決したい!!などご不明点がございましたら、コメント欄より投稿していただければと思います。