🫠
jQuery
■ コンテンツAの高さを取得して、コンテンツBに与える
$(window).on('load', function() {
var height = $(".contentsA").height();
$(".contentsB").css("margin-top", height + 10); //10pxだけ余裕をもたせる
});
■ 『mw wp form』使用時のバリデーション（エラー箇所までスクロール）
<script type="text/javascript">
$(document).ready(function(){
//バリデーションに引っかかってページ読み込みした場合にその位置まで戻る処理
let href = "";
$(".error").each(function(){
if ($(this).text() != "") {
href = "#"+$(this).prev().attr("id");
return false;
}
});
if(href != ""){
// スクロールの速度
var speed = 400; // ミリ秒で記述
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
position = parseInt(position) - 72;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
}
});
</script>
■ ページ内スクロール
$(function () {
$('a[href*="#"]').click(function () {
const headerHeight = $("#header").outerHeight();
const speed = 400;
const target = $(this.hash === "#" || "" ? "html" : this.hash);
if (!target.length) return;
const targetPos = target.offset().top - headerHeight;
$("html, body").animate({ scrollTop: targetPos }, speed, "swing");
return false;
});
});
下記は完全版
// 固定ヘッダーの高さ（＋余白の追加）
const headerHeight = document.querySelector('header').offsetHeight;
// イージング関数（easeOutExpo）
function scrollToPos(position) {
const startPos = window.scrollY;
const distance = Math.min(position - startPos, document.documentElement.scrollHeight - window.innerHeight - startPos);
const duration = 800; // スクロールにかかる時間（ミリ秒）
let startTime;
function easeOutExpo(t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
}
function animation(currentTime) {
if (startTime === undefined) {
startTime = currentTime;
}
const timeElapsed = currentTime - startTime;
const scrollPos = easeOutExpo(timeElapsed, startPos, distance, duration);
window.scrollTo(0, scrollPos);
if (timeElapsed < duration) {
requestAnimationFrame(animation);
} else {
window.scrollTo(0, position);
}
}
requestAnimationFrame(animation);
}
// LazyLoad対策（遅延読み込み解除）
function removeLazyLoad() {
const targets = document.querySelectorAll('[data-src]');
for (const target of targets) {
target.addEventListener('load', () => {
target.removeAttribute('data-src');
});
target.setAttribute('src', target.getAttribute('data-src'));
}
}
// ページ内リンクのスムーススクロール
for (const link of document.querySelectorAll('a[href*="#"]')) {
link.addEventListener('click', (e) => {
const hash = e.currentTarget.hash;
// "#"と"#top"の時（ページトップへスクロール）
if (!hash || hash === '#top') {
e.preventDefault();
scrollToPos(1); // iOSのChromeでfixedされた固定ヘッダーなどが動くバグがあるため0ではなく1に
// それ以外の時（アンカーへスクロール）
} else {
const target = document.getElementById(hash.slice(1));
if (target) {
e.preventDefault();
// 遅延読み込み解除
removeLazyLoad();
const position = target.getBoundingClientRect().top + window.scrollY - headerHeight;
scrollToPos(position);
// URLをアンカーで更新する
history.pushState(null, null, hash);
}
}
});
};
// 別ページ遷移後にスムーススクロール
const hash = window.location.hash;
if (hash) {
const target = document.getElementById(hash.slice(1));
if (target) {
// 遅延読み込み解除
removeLazyLoad();
window.addEventListener("load", () => {
const position = target.getBoundingClientRect().top + window.scrollY - headerHeight;
window.scrollTo(0, 0);
scrollToPos(position);
});
}
}
※ 「html」タグに「height: 100%;」がついていたら、うまく動作しない。
下記は完全版var02（2023/08/22記載）
$(window).on('load', function() {
// 固定ヘッダーの高さ（＋追加したい余白）
var headerHeight = jQuery('header').outerHeight() + 30;
// ページ内のアンカーへスクロール
jQuery('a[href*="#"]').click(function () {
var target = jQuery(this.hash === '' ? 'html' : this.hash);
var position = target.offset().top - headerHeight;
if (target.length) {
jQuery('html, body').animate({scrollTop:position}, 500, 'swing');
// #タグをURLに残す場合は削除
return false;
}
});
// ページ外のアンカーへスクロール
var urlHash = location.hash;
if(urlHash) {
var target = jQuery(urlHash);
var position = target.offset().top - headerHeight;
// どこからスクロールさせるか ※一番上ならscrollTop(0)
jQuery('body,html').stop().scrollTop(position - 200);
setTimeout(function(){
jQuery('body,html').stop().animate({scrollTop:position}, 500, 'swing');
}, 100);
}
})
こちらのコードだと違うページからの遷移の際もスクロール位置がずれる事なく、指定位置までスクロールされる。
参考URL
■ タブ切り替え（data-target）
jQuery(function() {
// タブ
var $tab = $(".tab");
// コンテンツ
var $content = $(".useful");
// 初期表示
$tab
.filter('[data-target="tab1"]')
.addClass("active");
$content
.filter('[data-target="tab1"]')
.addClass("active");
// タブクリックイベント
$($tab).on("click", function() {
$tab.removeClass('active');
$content.removeClass("active");
// タブ切り替え
$(this).toggleClass("active");
var $target = $(event.currentTarget);
var $tabData = $target.data('target');
// コンテンツ切り替え
$content
.filter('[data-target="' + $tabData + '"]')
.addClass("active");
})
})
■ 文法： 文字列内に変数を入れる
var hoge = "ほげ";
document.write(`ああああああ${hoge}いいいい<br/>`);
var foo = 16;
document.write(`${foo} * 2 = ${foo * 2}`);
■ URLにクエリパラメーターがあるか確認する方法
// 対象URL：https://gray-code.com/js_sample/url2.html?id=5&username=taro&mode=read
// URLを取得
var url = new URL(window.location.href);
// URLSearchParamsオブジェクトを取得
var params = url.searchParams;
if( params.has('id') ) {
console.log(params.get('id')); // 5
}
■ 関数を遅らせて実行させる
$(function(){
setTimeout(function(){
～ここに処理を記載～
},1000);
});
参考url
■ 郵便番号.js
1.<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>を読み込ませてから
2.formタグのクラスに"h-adr"を指定する。
3.form内に<span class="p-country-name" style="display: none;">Japan</span>を設置する。
4.郵便番号を入力するフォームのクラスに"p-postal-code"を指定する。
5.住所を表示させる要素のクラスに、都道府県名(p-region)、市区町村(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) を指定する。
参考url
■ ラジオボタンのチェックを外せるようにする
$(function () {
//インプット要素を取得する
var inputs = $("input[type='radio'");
//読み込み時に「:checked」の疑似クラスを持っているinputの値を取得する
var checked = inputs.filter(":checked").val();
//インプット要素がクリックされたら
inputs.on("click", function () {
//クリックされたinputとcheckedを比較
if ($(this).val() === checked) {
//inputの「:checked」をfalse
$(this).prop("checked", false);
//checkedを初期化
checked = "";
} else {
//inputの「:checked」をtrue
$(this).prop("checked", true);
//inputの値をcheckedに代入
checked = $(this).val();
}
});
});
参考url
■ slick(トップのメインビジュアル画像でのスライド)
<script>
jQuery(function() {
$('.top_mv').slick({
fade: true, //切り替えをフェードで行う。初期値はfalse。
autoplay: true, //自動的に動き出すか。初期値はfalse。
autoplaySpeed: 3000, //次のスライドに切り替わる待ち時間
speed: 1000, //スライドの動きのスピード。初期値は300。
infinite: true, //スライドをループさせるかどうか。初期値はtrue。
slidesToShow: 1, //スライドを画面に3枚見せる
slidesToScroll: 1, //1回のスクロールで3枚の写真を移動して見せる
arrows: false, //左右の矢印あり
dots: false, //下部ドットナビゲーションの表示
pauseOnFocus: false, //フォーカスで一時停止を無効
pauseOnHover: false, //マウスホバーで一時停止を無効
pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効
});
});
</script>
参考url
■ jquery(レスポンシブ - ブレイクポイント）
$(function(){
if (window.matchMedia('(max-width: 668px)').matches) {
/* ウィンドウサイズ668以下の処理を記述 */
} else if (window.matchMedia('(max-width:768px)').matches) {
/* ウィンドウサイズ768以下の処理を記述 */
} else if (window.matchMedia('(min-width:769px)').matches) {
/* ウィンドウサイズ769以上の処理を記述 */
}})
参考url
■ inview.jsを用いたフェードインアニメーション
CDNまたはダウンロードでinview.jsファイル読み込み
CDN → <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
↓↓ js ↓↓
// ==============================================================================================
// inview.js
// ==============================================================================================
// 一回のみフェードイン
$(function () {
$(".fadeUp_one .fadeLeft_one .fadeRight_one").one("inview", function (event, isInView) {
if (isInView) {
$(this).addClass("is-inview");
} else {
$(this).removeClass("is-inview");
}
});
});
// 表示領域に入るたびにフェードイン
$(function () {
$(".fadeUp").on("inview", function (event, isInView) {
if (isInView) {
$(this).addClass("is-inview");
} else {
$(this).removeClass("is-inview");
}
});
});
↓↓ css ↓↓
/* ============================================================================================================== */
/* 共通（フェードインcss） */
/* ============================================================================================================== */
.fadeUp {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s, transform 0.6s;
}
/* フェードイン(スクロールした後) */
.fadeUp.is-inview {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}
.fadeUp_one {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s, transform 0.6s;
}
/* フェードイン(スクロールした後) */
.fadeUp_one.is-inview {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
}
/* 左から */
.fadeLeft_one {
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.8s, transform 0.6s;
}
.fadeLeft_one.is-inview {
opacity: 1;
transform: translateX(0);
transition-delay: 0.3s;
}
/* 右から */
.fadeRight_one {
opacity: 0;
transform: translateX(30px);
transition: opacity 0.8s, transform 0.6s;
}
.fadeRight_one.is-inview {
opacity: 1;
transform: translateX(0);
transition-delay: 0.3s;
}
■ 画像や文字を目隠ししてから表示アニメーション
↓↓ js ↓↓
// ======================================================================================================================
// 目隠ししてから表示アニメーション
// ======================================================================================================================
$(function () {
$(".effect").one("inview", function (event, isInView) {
if (isInView) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
});
↓↓ css ↓↓
/* ============================================================================================================== */
/* 目隠ししてから表示 */
/* ============================================================================================================== */
.effect {
position: relative;
opacity: 0;
}
.effect.active {
opacity: 1;
}
.effect::before {
content: "";
position: absolute;
z-index: 1;
top: 0%;
right: 100%;
bottom: 0%;
left: 0%;
background: #e95544;
}
.effect.active {
animation-name: kf_c01a;
animation-duration: 2s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
opacity: 1;
}
.effect.active::before {
animation-name: kf_c01b;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes kf_c01a {
100% {
color: inherit;
}
}
@keyframes kf_c01b {
50% {
left: 0%;
right: 0%;
}
100% {
left: 100%;
right: 0%;
}
}
■ 〇〇の高さ分スクロールされたら、〇〇にクラスに付与
$(function () {
$(window).on("scroll", function () {
if ($("#mv").height() < $(this).scrollTop()) {
$("#header").addClass("change");
} else {
$("#header").removeClass("change");
}
});
});
■ ページ上部にスムーススクロール
// #page-topをクリックした際の設定
$('#page-top').click(function () {
$('body,html').animate({
scrollTop: 0//ページトップまでスクロール
}, 500);//ページトップスクロールの速さ。数字が大きいほど遅くなる
return false;//リンク自体の無効化
});
■ ハンバーガーメニュー（使用例）
↓↓ js ↓↓
$(function () {
var state = false;
var pos;
$(".hamburger").click(function () {
if (state == false) {
pos = $(window).scrollTop();
$("body, .hamburger, .hamburger_menu").addClass("show");
$("body").css({ top: -pos });
state = true;
} else {
$("body, .hamburger, .hamburger_menu").removeClass("show");
$("body").css({ top: 0 });
window.scrollTo(0, pos);
state = false;
}
});
});
↓↓ css ↓↓
body.show {
overflow-y: hidden;
}
// クリックボタン
#header .hamburger span:first-child {
position: absolute;
width: 40%;
height: 2px;
background-color: #ffffff;
top: 40%;
left: 5%;
right: 0;
margin: auto;
transition: all 0.5s;
}
#header .hamburger span:last-child {
position: absolute;
width: 45%;
height: 2px;
background-color: #ffffff;
top: 56%;
left: 0;
right: 0;
margin: auto;
transition: all 0.5s;
}
#header .hamburger.show span:first-child {
width: 45%;
transform: rotate(-45deg);
top: 50%;
left: 0;
}
#header .hamburger.show span:last-child {
width: 45%;
transform: rotate(45deg);
top: 50%
// ハンバーガーメニュー
.hamburger_menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
margin-left: auto;
padding: 100px 0;
z-index: 5;
background-color: var(--color1);
transition: all 0.4s ease-in-out;
transform: translate(0, -200%);
opacity: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.hamburger_menu.show {
transform: translate(0, 0);
opacity: 1;
}
■ 画像をぼかしからくっきり表示アニメーション
↓↓ js ↓↓
// ぼかしからくっきりへとアニメーション
$(function () {
$(".blurImg").on("inview", function (event, isInView) {
if (isInView) {
//表示領域に入った時
$(this).addClass("is-blur");
} else {
//表示領域から出た時
}
});
});
↓↓ css ↓↓
.blurImg {
opacity: 0;
transition: transform 0.5s linear;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.blurImg.is-blur {
-webkit-animation-name: imageBlur;
animation-name: imageBlur;
opacity: 1;
transition: 0.8s;
}
@-webkit-keyframes imageBlur {
from {
opacity: 0;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-ms-filter: blur(15px);
-o-filter: blur(15px);
filter: blur(15px);
}
to {
opacity: 1;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
-o-filter: blur(0px);
filter: blur(0px);
}
}
@keyframes imageBlur {
from {
opacity: 0;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-ms-filter: blur(15px);
-o-filter: blur(15px);
filter: blur(15px);
}
to {
opacity: 1;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
-o-filter: blur(0px);
filter: blur(0px);
}
}
■ 指定の範囲内のみで要素を固定する（fixed）
// ==============================================================================================================
// 指定したセクション間のみfixedさせる
// ==============================================================================================================
$(function () {
let box = $("#sidebar"),
boxHeight = box.innerHeight(),
boxWrapper = $("main"),
boxWrapperHeight = boxWrapper.innerHeight(),
boxWrapperTop = boxWrapper.offset().top,
boxWrapperBottom = boxWrapperTop + boxWrapperHeight,
marginTop = 20;
$(window).on("scroll", function () {
let value = $(this).scrollTop();
if (value > boxWrapperBottom - boxHeight - marginTop) {
box.css({
top: boxWrapperBottom - boxHeight - value,
position: "fixed",
});
} else if (value > boxWrapperTop - marginTop) {
box.css({
top: marginTop,
position: "fixed",
});
} else {
box.css({
position: "static",
});
}
});
});
■ ラジオボタン（2回クリックでchecked解除）
$(function(){
//インプット要素を取得する
var inputs = $('input');
//読み込み時に「:checked」の疑似クラスを持っているinputの値を取得する
var checked = inputs.filter(':checked').val();
//インプット要素がクリックされたら
inputs.on('click', function(){
//クリックされたinputとcheckedを比較
if($(this).val() === checked) {
//inputの「:checked」をfalse
$(this).prop('checked', false);
//checkedを初期化
checked = '';
} else {
//inputの「:checked」をtrue
$(this).prop('checked', true);
//inputの値をcheckedに代入
checked = $(this).val();
}
});
});
■ フォームの値をすべて取得する
var $form = $('#myform');
var query = $form.serialize();
var param = $form.serializeArray();
参考url
■ 複数選択可能なチェックボックスの選択されている値をすべて取得する
$("#btn2").on("click", function(){
// 配列を宣言
var arr = [];
$('[class="chk"]:checked').each(function(){
// 無効化する
$(this).prop('disabled', true);
// チェックされているの値を配列に格納
arr.push($(this).val());
});
console.log(arr);
});
参考url
■ 1文字ずつ登場するテキストアニメーション（複数行可能）
↓↓ html ↓↓
<p class="vdl_m f60 line_15 c_white" data-text-split>
「モノ」を乗せて<br>
「オモイ」を届ける。
</p>
↓↓ css ↓↓
[data-text-wrap] {
display: inline-block;
}
[data-text-inner] {
display: block;
width: 0.001%;
overflow-x: hidden;
background-color: transparent;
}
@keyframes text {
0% {
width: 0.001%;
}
100% {
width: 100%;
}
}
↓↓ js ↓↓
$(window).on("load", () => {
$("[data-text-split]").each((index, element) => {
const brSplitted = $(element).html().split("<br>");
let mapped = [];
brSplitted.forEach((item, index) => {
const itemSplitted = item.split("");
const brFormatted = itemSplitted.map((item) => {
return `<span data-text-wrap><span data-text-inner>${item}</span></span>`;
});
mapped[index] = brFormatted.join("");
});
const result = mapped.join("<br>");
$(element).html(result);
const length = $(element).find("[data-text-wrap]").length;
for (let i = 0; i < length; i++) {
$(element)
.find("[data-text-inner]")
.eq(i)
.css("animation", `text 30ms ${40 * i}ms forwards`);
}
});
});
参考url
■ タブ切り替え
$(() => {
const tabItem = $(".tabItem");
const contentsItem = $(".contentsItem");
tabItem.on("click", function () {
tabItem.removeClass("active");
contentsItem.addClass("active");
$(this).addClass("active");
const num = $(this).index();
const target = contentsItem.eq(num);
target.addClass("active");
});
});
■ 特定のクエリパラメーターを取得
var param = location.search;
var paraGety = function paraGety(para) {
var pageURL = window.location.search.substring(1),
urlValue = pageURL.split('&'),
paraName;
for (var i = 0; i < urlValue.length; i++) {
paraName = urlValue[i].split('=');
if (paraName[0] === para) {
return paraName[1] === undefined ? true : decodeURIComponent(paraName[1]);
}
}
};
const targetParm = paraGety('target');
■ ドロップダウンメニュー
$(function() {
const trigger = $(".line");
trigger.hover(
function() {
$(".nav_sub:not(:animated)", this).slideDown();
},
function() {
$(".nav_sub", this).slideUp();
}
)
})
参考url
■ swiper.jsの使い方（背景画像をズームアップしながら、フェードで切り替え）
参考url
■ slick（メイン画像が連動するサムネイル付きスライダーの作り方）
参考url
■ スクロールするとフェードイン（プラグインなし）
// 画面表示と一緒にフェードイン
jQuery(function () {
$(".fadeIn__bottom").each(function () {
$(this).addClass("is__show");
});
});
// フェードインさせる要素までスクロールするとフェードイン
jQuery(function () {
$(window).scroll(function () {
$(".fadeIn__bottom2").each(function () {
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 100) {
$(this).addClass("is__show");
}
});
});
});
// 少し早い段階でのフェードイン
jQuery(function () {
$(window).scroll(function () {
$(".fadeIn__bottom3").each(function () {
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 100) {
$(this).addClass("is__show");
}
});
});
});
// ノーマルフェードイン
jQuery(function () {
$(window).scroll(function () {
$(".fadeIn").each(function () {
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 100) {
$(this).addClass("is__show");
}
});
});
});
参考url
Discussion