HTML
<div class="wrapper">
<ul class="tab">
<li><a href="#lunch">ランチ</a></li>
<li><a href="#drink">ドリンク</a></li>
<li><a href="#dinner">ディナー</a></li>
</ul>
<div id="lunch" class="area">
<h2>ランチ</h2>
<ul>
<li>ガパオライス</li>
<li>ミートソーススパゲティ―</li>
<li>ハンバーグ定食</li>
</ul>
</div><!--/area-->
<div id="drink" class="area">
<h2>ドリンク</h2>
<ul>
<li>ウーロン茶</li>
<li>オレンジジュース</li>
<li>ジンジャーエール</li>
</ul>
</div><!--/area-->
<div id="dinner" class="area">
<h2>ディナー</h2>
<ul>
<li>カレーライス</li>
<li>ドリア</li>
<li>グラタン</li>
</ul>
</div><!--/area-->
</div><!--wrapper-->
CSS
/* エリアの表示非表示と形状 */
.area {
display: none; /* はじめは非表示 */
opacity: 0; /* 透過0 */
background: #fff;
padding: 50px 20px;
}
/* areaにis-activeというクラスがついた時の形状 */
.area.is-active {
display: block; /* 表示 */
animation-name: displayAnime; /* ふわっと表示させるためのアニメーション */
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes displayAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*========= レイアウトのためのCSS ===============*/
body {
background: #eee;
}
ul {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
.wrapper {
width: 100%;
max-width: 960px;
margin: 30px auto;
background: #fefefe;
}
.area h2 {
font-size: 1.3rem;
margin: 0 0 20px 10px;
}
.area li {
padding: 10px;
border-bottom: 1px solid #ddd;
}
JS
//任意のタブにURLからリンクするための設定
function GethashID (hashIDName) {
if(hashIDName){
//タブ設定
$'.tab li').find('a').each(function() { //タブ内のaタグ全てを取得
var idName = $(this).attr('href'); //タブ内のaタグのリンク名（例）#lunchの値を取得
if(idName == hashIDName) { //リンク元の指定されたURLのハッシュタグ（例）https://example.com/#lunch←この#の値とタブ内のリンク名（例）#lunchが同じかをチェック
var parentElm = $(this).parent(); //タブ内のaタグの親要素（li）を取得
$'.tab li').removeClass("active"); //タブ内のliについているactiveクラスを取り除き
$(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加
//表示させるエリア設定
$(".area").removeClass("is-active"); //もともとついているis-activeクラスを取り除き
$(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加
}
});
}
}
//タブをクリックしたら
$('.tab a').on('click', function() {
var idName = $(this).attr('href'); //タブ内のリンク名を取得
GethashID (idName); //設定したタブの読み込みと
return false; //aタグを無効にする
});
// 上記の動きをページが読み込まれたらすぐに動かす
$(window).on('load', function() {
$('.tab li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加
$('.area:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加
var hashName = location.hash;//リンク元の指定されたURLのハッシュタグを取得
GethashID (hashName);//設定したタブの読み込み
});
html
<div id="splash">
<div id="splash_text">
</div>
</div>
<div id="container">
<p>ローディング後、この画面が見えます。</p>
</div>
css
/* Loading背景画面設定 */
#splash {
/* fixedで全面に固定 */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #333;
text-align: center;
color :#fff;
}
/* Loadingバー中央配置 */
#splash_text {
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
width: 100%;
transform: translate(-50%, -50%);
color: #fff;
}
/* IE11対策用バーの線の高さ※対応しなければ削除してください */
#splash_text svg {
height: 2px;
}
/*========= レイアウトのためのCSS ===============*/
#container {
width: 100%;
height: 100vh;
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
a {
color: #333;
}
a:hover {
text-decoration: none;
}
js
//テキストのカウントアップ+バーの設定
var bar = new ProgressBar.Line(splash_text, { //id名を指定
easing: 'easeInOut', //アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能
duration: 1000, //時間指定(1000＝1秒)
strokeWidth: 0.2, //進捗ゲージの太さ
color: '#555', //進捗ゲージのカラー
trailWidth: 0.2, //ゲージベースの線の太さ
trailColor: '#bbb', //ゲージベースの線のカラー
text: { //テキストの形状を直接指定
style: {//天地中央に配置
position: 'absolute',
left: '50%',
top: '50%',
padding: '0',
margin: '-30px 0 0 0', //バーより上に配置
transform: 'translate(-50%,-50%)',
'font-size': '1rem',
color: '#fff',
},
autoStyleContainer: false //自動付与のスタイルを切る
},
step: function(state, bar) {
bar.setText(Math.round(bar.value() * 100) + ' %'); //テキストの数値
}
});
//アニメーションスタート
bar.animate(1.0, function () { //バーを描画する割合を指定します 1.0 なら100%まで描画します
$("#splash").delay(500).fadeOut(800); //アニメーションが終わったら#splashエリアをフェードアウト
});
html
<ul id="page-link">
<li><a href="#area-1">Area1</a></li>
<li><a href="#area-2">Area2</a></li>
<li><a href="#area-3">Area3</a></li>
</ul>
<h1 class="area" id="area-1">テキスト</h1>
<h1 class="area" id="area-2">テキスト</h1>
<h1 class="area" id="area-3">テキスト</h1>
JS
$('#page-link a[href*="#"]').click(function () {
var elmHash = $(this).attr('href');
// ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得.
var pos = $(elmHash).offset().top;
// idの上部の距離を取得.
$('body,html').animate({scrollTop: pos}, 500);
//取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール.
return false;
});