jQueryのこと-シングルページで使えそう-
のんびり燐華ページ内リンクカレント表示
シングルページなどに使うと便利。セクションに場所のclassを入れておくとよき。
参考サイト：https://shogo-log.com/link-current/
$(function () {
var set = 200;//ウインドウ上部からどれぐらいの位置で変化させるか
var boxTop = new Array;
var current = -1;
//各要素の位置
//'scrollpoint'は場所を取得したい対象の要素に付ける(自由に名前変えて良し)
$('.scrollpoint').each(function (i) {
boxTop[i] = $(this).offset().top;
});
//最初の要素にclass="scrollpoint"をつける（自由に名前を変えて良し）
changeBox(0);
//スクロールした時の処理
$(window).scroll(function () {
scrollPosition = $(window).scrollTop();
for (var i = boxTop.length - 1; i >= 0; i--) {
if ($(window).scrollTop() > boxTop[i] - set) {
changeBox(i);
break;
}
};
});
//ナビの処理
function changeBox(secNum) {
var NavElem = $(".g-nav li a");//参照したい場所
//配列になっているので要素が増えるたび下のif文も増える
if (secNum != current) {
current = secNum;
secNum2 = secNum + 1;//以下にクラス付与したい要素名と付与したいクラス名
$('.g-nav li a').removeClass('current');
//位置によって個別に処理をしたい場合
if (current == 0) {
$(NavElem[0]).addClass('current');
// 現在地がsection1の場合の処理
} else if (current == 1) {
$(NavElem[1]).addClass('current');
// 現在地がsection2の場合の処理
} else if (current == 2) {
// 現在地がsection3の場合の処理
$(NavElem[2]).addClass('current');
}
else if (current == 3) {
// 現在地がsection4の場合の処理
$(NavElem[3]).addClass('current');
}
else if (current == 4) {
// 現在地がsection4の場合の処理
$(NavElem[4]).addClass('current');
}
}
};
});スムーススクロール
なめらかにリンクのところへ飛びます。上部のリンク内表示で使うときれいに飛びます。
$(function () {
$('a[href^="#"]').click(function () {
var adjust = -100;
var speed = 500;
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top + adjust;
$("html, body").animate({ scrollTop: position }, speed, "swing");
return false;
});
});テキストの動き～左から右へ出現～
左から右へテキストが表示されます。下記のコードはなめらかに出現します。
↓HTMLコード
<p>
<span class="slide-in"><span class="leftAnime-inner">Recipe Diary</span></span>
</p>↓jQueryコード
function slideAnime() {
$('.slide-in').each(function () {
var elemPos = $(this).offset().top - 50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight) {
// 左から右へ表示するクラスを付与
$(this).addClass('slideAnime-LR');
$(this).children('.leftAnime-inner').addClass('slideAnime-RL');
} else {
// 左から右へ表示するクラスを取り除く
$(this).removeClass('slideAnime-LR');
$(this).children('.leftAnime-inner').removeClass('slideAnime-RL');
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
slideAnime();/* アニメーション用の関数を呼ぶ*/
});↓cssコード
/* --- 左から右へテキスト流れる --- */
.slide-in {
display: inline-block;
overflow: hidden;
/*事前に透過0にして消しておく*/
opacity: 0;
}
.leftAnime-inner {
display: inline-block;
}
/*親要素につきます*/
.slideAnime-LR {
animation-name: slideTextX100;
animation-duration: .8s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideTextX100 {
from {
/*要素を左の枠外に移動*/
transform: translateX(-100%);
opacity: 0;
}
to {
/*要素を元の位置に移動*/
transform: translateX(0);
opacity: 1;
}
}
/*子要素につきます*/
.slideAnime-RL {
animation-name: slideText-X100;
animation-duration: .8s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideText-X100 {
from {
/*要素を右の枠外に移動*/
transform: translateX(100%);
opacity: 0;
}
to {
/*要素を元の位置に移動*/
transform: translateX(0);
opacity: 1;
}
}