ちょっとした小技系
タブ切り替えやアコーディオンなどなど、ページの補助的な機能を作りためています。
下記のタグをクリックすると各ブロックにスクロールします。
タブ切り替えボックス
タブをクリックするとBOXが切り替わります。
HTML
<div id="tabBox">
<ul>
<li>タブ1<span class="act"><i class="fas fa-caret-down"></i></span></li>
<li>タブ2<span><i class="fas fa-caret-down"></i></span></li>
<li>タブ3<span><i class="fas fa-caret-down"></i></span></li>
</ul>
<div id="box01">
<div class="tab01">
<h4>タブ1</h4>
<p>ここはタブ1スペースです</p>
</div>
<div class="tab01">
<h4>タブ2</h4>
<p>ここはタブ2スペースです</p>
</div>
<div class="tab01">
<h4>タブ3</h4>
<p>ここはタブ3スペースです</p>
</div>
</div>
</div>
Js
//タブ切り替えボックス
jQuery('#tabBox li').on('click',function(){
let index=jQuery('#tabBox li').index(this);
jQuery('.tab01').eq(index).css('display','block').siblings().css('display','none');
jQuery('#tabBox li .act').removeClass('act');
jQuery('span',this).addClass('act');
});
アコーディオンタブ
一つだけ開いて、ほかのタブは閉じる仕様
- タイトル1
- ここはタブ1スペースです
タイトルバーをクリックすると閉じます
- タイトル2
- ここはタブ2スペースです
- タイトル3
- ここはタブ3スペースです
- タイトル4
- ここはタブ4スペースです
- タイトル5
- ここはタブ5スペースです
HTML
<dl id="tabAco">
<dt>タイトル1<i class="fas fa-chevron-circle-down act"></i></dt>
<dd>ここはタブ1スペースです<br>タイトルバーをクリックすると閉じます</dd>
<dt>タイトル2<i class="fas fa-chevron-circle-down"></i></dt>
<dd>ここはタブ2スペースです</dd>
<dt>タイトル3<i class="fas fa-chevron-circle-down"></i></dt>
<dd>ここはタブ3スペースです</dd>
<dt>タイトル4<i class="fas fa-chevron-circle-down"></i></dt>
<dd>ここはタブ4スペースです</dd>
<dt>タイトル5<i class="fas fa-chevron-circle-down"></i></dt>
<dd>ここはタブ5スペースです</dd>
</dl>
Js
//アコーディオンタブ
jQuery('#tabAco dt').on('click',function(){
//thisはクリックしたdd、siblingsはその他のdd
jQuery(this).next('dd').slideDown(300).siblings('#tabAco dd').slideUp(300);
//全てのactをとってクリックされたところだけactを付ける
jQuery('#tabAco dt i').removeClass('act');
jQuery('i',this).addClass('act');
});
プルダウンメニュー
コンテンツの多いサイト向きのプルダウンメニュー。マウスホバーでサブメニューが出てきます。
HTML
<div id="pulMenu">
<ul>
<li><a href="dummy.html">ナビメニュー1</a>
<ul class="childMenu">
<li><a href="dummy.html">子メニュー</a></li>
<li><a href="dummy.html">子メニュー</a></li>
<li><a href="dummy.html">子メニュー</a></li>
<li><a href="dummy.html">子メニュー</a></li>
</ul>
</li>
<li><a href="dummy.html">ナビメニュー2</a>
<ul class="childMenu">
<li><a href="dummy.html">子メニュー</a></li>
<li><a href="dummy.html">子メニュー</a></li>
<li><a href="dummy.html">子メニュー</a></li>
</ul>
</li>
<li><a href="dummy.html">ナビメニュー3</a>
<ul class="childMenu">
<li><a href="dummy.html">子メニュー</a></li>
<li><a href="dummy.html">子メニュー</a></li>
</ul>
</li>
</ul>
<figure>
<img src="image/imag06.jpg" alt="コンテンツ">
</figure>
</div>
Js
//プルダウンメニュー
jQuery('#pulMenu>ul>li').hover(function(){
jQuery('.childMenu',this).stop().slideDown('slow');
},function(){
jQuery('.childMenu',this).stop().slideUp('slow');
});
TOPへスクロール
ほとんどのサイトにあるトップへスクロール機能。サンプルは右のto top。
こちらはsvgで書き出してfixed指定してます。あとはjsで設定。
HTML
<div id="page_top"><img src="image/to_top.svg" alt="TOPへ"></div>
Js
//TOPへ
const topBtn = jQuery('#page_top');
let showFlug = false;
//スクロールが100に達したらボタン表示
jQuery(window).on('scroll',function () {
if (jQuery(this).scrollTop() < 100) {
if (showFlug == false) {
showFlug = true;
topBtn.stop().animate({'bottom' : '100px'},500);
}
} else {
if (showFlug) {
showFlug = false;
topBtn.stop().animate({'bottom' : '-200px'}, 200);
}
}
});
//スクロールしてトップに戻る
topBtn.on('click',function () {
jQuery('body,html').animate({ scrollTop: 0 }, 500);
});
プリローダー
ページが表示されるまでクルクル回ってるアレです。最近は色々なローダーを目にします。手軽に済ませたい時はFontAwesome使って@Keyframesのrotateでアニメーションします。
HTML
<!-- ローダー -->
<div id="loader">
<p id="img"><i class="fas fa-circle-notch"></i></p>
</div>
<style>
#img {
font-size: 50px;
color: $m-red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
z-index: 50;
animation: loader 2s linear infinite;
}
#loader {
width: 100%;
height: 100%;
background-color: #fff;
position: fixed;
top: 0px;
left: 0px;
z-index: 49;
}
@keyframes loader {
0% { transform: rotate(0deg); }
50%{ transform: rotate(180deg); }
100%{ transform: rotate(360deg); }
}
</style>
Js
//ローダー
/* 読み込み完了 */
window.addEventListener('load',function(){
stopload();
});
/*jsを多用すると効かないことがあるのでaddEventListenerがダメだったらsetTimeoutで強制表示*/
/* 1秒経ったら強制的にロード画面を非表示にする */
setTimeout(function(){
stopload();
},1000);
function stopload(){
jQuery('#loader').delay(500).fadeOut(800);
}
同一ページスクロール
同じページ内でスクロールさせます。三項演算子を使うのが一般的ですが#を干渉させたくなくてdata属性を使いました。セレクタの取得方法が違うだけで原理は同じです。
HTML
<!-- data属性とsectionのid名は同じにしておく-->
<ul id="scrollNav">
<li data-id="area01">アコーディオンタブ<i class="far fa-caret-square-down"></i></li>
<li data-id="area02">プルダウンメニュー<i class="far fa-caret-square-down"></i></li>
<li data-id="area03">TOPへスクロール<i class="far fa-caret-square-down"></i></li>
<li data-id="area04">プリローダー<i class="far fa-caret-square-down"></i></li>
<li data-id="area05">同一ページスクロール<i class="far fa-caret-square-down"></i></li>
</ul>
Js
//同一ページスクロール
jQuery('#scrollNav li').on('click',function(){
//クリックしたid名を取得する
let idName = jQuery(this).attr('data-id');
//取得したidの場所の距離を測る
let position = jQuery('#'+idName).offset().top;
jQuery('body,html').animate({ scrollTop: position-50 }, 800,'swing');
});
//三項演算子Ver href属性と#を使う
jQuery('a[href^="#"]').click(function() {
const speed = 500;// スクロールの速度
let href= jQuery(this).attr('href');
let target = jQuery(href == '#' || href == '' ? 'html' : href);
let position = target.offset().top;//PCの移動先を取得
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
続きを見るorもっと見る
省略された長いテキストやコンテンツを表示する機能です。Demoボタンをクリックするとモーダルウィンドウのサンプルが現れます。複数の非表示コンテンツを個別に開くことを想定。
Demo
SAMPLE
楽長は室のおじぎうそらをゴーシュを置いゴーシュました。
ではさっぱりくたくたたたにおいて狸だまし。気の毒ですましんたはたそれからゴーシュの生意気たちのなかをはやはり生意気ただて、ここだけトマトを出しれのましまし。云えすぎおまえは枝をいそがしいましてさっきの曲のこどもたちとこらえ第六枝げの話があわててったまし。間は明方とりどいた。
頭は二飛びだし大のようで歩きでいだ。糸はシュッ一つたりおまえに過ぎていん。頭は兎をどっかりにどなりし次へ頭のようへ云って顔がいてもうあとからなんてっな。もっともやっと扉から眼が云いたます。
ぼくたったに野鼠をひて楽譜の見るだ。舞台のもぐり込みございた。「かっこうに叫びん。狸、それを楽器。
続きを見る
云い。」あなたもはじめのところのどう前のところが倒れるないござい。狸は顔をお風車から云いて日を狸がはじいてじつにさっき下げれましときにあるでしょです。もう拍手出て、つりあげのでしてしまいでしが壁がそして弓をもう週間しだらた。
「家い。水をはいった。なるな。そこは何を猫に来てだけもござとじぶんのはうまくものなてねえ。」ぼくは楽そうをちがうてねえ鳥馬車から来たりないみみずくのゴーシュを弾いてまげとまえてやろじ。
笑いもきいて音楽にはいるましです。これはどうせこどももいいものないてまわりはなかなか黒いわけないた。「半分の一生けん命の一足を。歩き。」
君はまた聞いたませ。下はかっこうに終るて前た。
そしてたくさんもどうしてもまぜないませ。むずかしい作曲たとしがやるて野ねずみを落ちようた小太鼓をめがけてではほっとセロをぺんひるまたで。すこしかとみみずくもからさもなったでながらひどいもののは一生けん命はゴーシュの音たまし。
茎は何がこんどう風車のままそれを弾いたようにねシュッ汗が人へおどすてそれかすわり込んのをやってしまったます。「すると少しはじめの鳥。
ウィンドウを閉じる
HTML
<div id="story" class="demoBtn">Demo</div>
<article id="demoStory">
<h4>SAMPLE</h4>
<div>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p class="more">続きを見る<i class="fas fa-caret-down"></i></p>
<div class="hide">
<p>サンプルテキストサンプルテキストサンプルテキスト</p>
</div>
</div>
<div>
<ul class="demoBox">
<li>BOX</li>
<li>BOX</li>
<li>BOX</li>
</ul>
<p class="more">続きを見る<i class="fas fa-caret-down"></i></p>
<div class="hide">
<ul class="demoBox">
<li>BOX</li>
<li>BOX</li>
<li>BOX</li>
</ul>
</div>
</div>
<div class="demoClose"><i class="fas fa-times"></i>ウィンドウを閉じる</div>
</article>
Js
//もっと見る
const demoHide = jQuery('#demoStory');
//非表示ブロック
demoHide.each(function(){
jQuery('.more',this).on('click',function(){
//入れ子でthisの中身が変わっていく
const hideBox = jQuery(this).next('.hide');
//クリックされたデモボタン下のhide部分 more+hide
if(hideBox.css('display') == 'none'){
hideBox.slideDown('slow');
jQuery(this).html('たたむ<i class="fas fa-caret-up"></i>');
} else {
hideBox.slideUp('slow');
jQuery(this).html('続きを見る<i class="fas fa-caret-down"></i>');
}
});
});
//Demoウィンドウ表示
jQuery('#area06 .demoBtn').on('click',function(){
demoHide.fadeIn('slow');
});
//Demoウィンドウ閉じる
jQuery('.demoClose',demoHide).on('click',function(){
demoHide.slideUp('slow');
});
スクロールとレスポンシブMenu
下にスクロールするとメニューがスライドダウンして現れます。スマホ幅にするとハンバーガーメニューになります。
HTML
<header id=menuHeader>
<h1>グローバルMENUサンプル</h1>
<div id="spBtn"><i class="fas fa-bars"></i></div>
<nav id="glMenu">
<ul class="clearfix">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</nav>
</header>
<!-- スマホの時#glMenuの要素を#spMenuの中に移す-->
<nav id="spMenu"></nav>
Js
//スクロールとメニュー系
const menuTop = 80;//トップからのスクロール値
const header = jQuery('#menuHeader');
const pcMenu = jQuery('#glMenu');
const spMenu = jQuery('#spMenu');
const menuItem = pcMenu.html();//navリンク要素を全て取得
//設定したスクロール値に達したらメニュー表示
function menuFix(){
jQuery(window).on('scroll',function(){
if(window.scrollY > menuTop){
header.slideDown(500);
} else {
header.slideUp(300);
}
});
}
//スマホのハンバーガーメニュー動作
function spNav(){
jQuery('#spBtn').on('click',function(){
if(spMenu.css('display') == 'none'){
spMenu.slideDown(500);
jQuery(this).html('<i class="fas fa-times"></i>');
} else {
spMenu.slideUp(300);
jQuery(this).html('<i class="fas fa-bars"></i>');
}
});
}
//ウィンドウ幅を縮小拡大した時の処理、面倒なので無くてもいいかも
jQuery(window).on('load resize',function(){
jQuery('ul',pcMenu).remove();//条件分岐の外にremove置かないと増え続ける
jQuery('ul',spMenu).remove();
if(window.innerWidth < 768 ){
spMenu.prepend(menuItem);
header.css('display','block');
//スマホの時スクロールイベントをストップ
jQuery(window).off('scroll');
} else {
pcMenu.prepend(menuItem);
menuFix();
}
});
//スマホとPCで読み込みを分ける、再読み込みで切替
if(window.innerWidth > 768 ){
menuFix();
jQuery('ul',spMenu).remove();
} else {
//#spMenuに要素を移す
spMenu.prepend(menuItem);
//#glMenuの要素を消す
jQuery('ul',pcMenu).remove();
}
spNav();
イベントスクロール
縦スクロールしていくとイベントを発生させる仕掛けです。各エリアタイトルにoffset().topを設定しています。
js
$(function(){
const trick1 = $('#area1 h2').offset().top;//それぞれのトップからの距離
const trick2 = $('#area2 h2').offset().top;
const trick3 = $('#area3 h2').offset().top;
const trick4 = $('#area4 h2').offset().top;
const trick5 = $('#area5 h2').offset().top;
$(window).on('scroll',function(){
let point = $(this).scrollTop();
if(trick1 < point){
$('#area1 .box img').animate({'bottom': '0'},1500,'swing');
}
if(trick2 < point){
$('#area2 .box img').animate({'bottom': '0'},1500,'easeOutBounce');
}
if(trick3 < point){
$('#area3 .box img').fadeIn(3000);
}
if(trick4 < point){
$('#area4 .box img').eq(0).animate({'bottom': '0'},1000,'linear',
function(){
$('#area4 .box img').eq(1).animate({'bottom': '0'},1000,'linear');
});
}
if(trick5 < point){
$('#area5 .box img').animate({'bottom': '0'},1500,'easeInOutBounce');
}
});
});
パララックススクロール
各エリアごとに規定値に達したら背景を固定して見せています。
Js
$(function(){
const boxb = $('#area2').offset().top;
const boxc = $('#area3').offset().top;
const boxd = $('#area4').offset().top;
const boxe = $('#area5').offset().top;
//98pxはheaderの高さ
const topSpeace = 98;
$(window).on('load scroll',function(){
//スクロールの値を取得
let point = $(this).scrollTop();
$('#area1').css('background-position','0 '+(point+topSpeace)+'px');
if(boxb-topSpeace < point){
$('#area2').css('background-position', '0 '+(point -boxb+topSpeace )+'px');
}else{
$('#area2').css('background-position','0 0');//トップに固定
}
if(boxc-topSpeace < point){
$('#area3').css('background-position', '0 '+(point -boxc+topSpeace )+'px');
}else{
$('#area3').css('background-position','0 0');
}
if(boxd-topSpeace < point){
$('#area4').css('background-position', '0 '+(point -boxd+topSpeace )+'px');
}else{
$('#area4').css('background-position','0 0');
}
if(boxe-topSpeace < point){
$('#area5').css('background-position', '0 '+(point -boxe+topSpeace )+'px');
}else{
$('#area5').css('background-position','0 0');
}
});
});
電話をPC時無効にする
レスポンシブでスマホ時はTELがかけられるボタンを、PCでクリックするとSkypeとかが立ち上がってしまうことを停止する機能。些細な疑問を発生させないために設定すると親切かも。
Js
//userAgentでの切替
const ua = navigator.userAgent;
if(ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0) {
jQuery('a[href^="tel:"]').css('cursor', 'default')on('click',function(event){ event.preventDefault();
});
return false;
}
