ドーモ！ぬま畑です！
今日もwebの勉強です。
前回はCSSとjQueryの組み合わせで様々なアニメーションをWordPressに移植してみました。
もしまだ見ていない方は前回の記事【『jQueryとCSSを組み合わせて動かす』から抜粋：クリックでエリアが表示される】の目次に「まとめ」があるのでそこからまとめの項目に飛んで見ていただけると概要等がありますからそちらで確認していただければと存じます。
さて、今回はローディングのご紹介。
前回とは打って変わって少し特殊です。というのも、記事に移植が難しいよ言うよりそもそもローディング画面なので、記事としてローディングにするわけにはいかず・・・
というわけでローディングページを用意してみましたので、まずは下記URLをクリックorタップしてみてください。
ローディングサンプル画面
※ロード画面に移動します。
・・・とまぁ実はリンクを踏まなくてもどういう動きなのかは下のGIFを見ていただけるだけで一目瞭然っていう・・・^^;
これ自体はシンプルでサイト作成する方は結構使えるかと。
実際のコード
HTML
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
<script src=”https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js”></script>
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>4-1-1 数字カウントアップ</title>
<link href=”css/reset.css” rel=”stylesheet”>
<link href=”css/4-1-1.css” rel=”stylesheet”>
</head>
<body>
<div id=”splash”>
<div id=”splash_text”></div>
</div>
<main>
<div id=”container”>
<p>ローディング後、この画面が見えます。<br>ローディングで使用したライブラリ：<a href=”https://kimmobrunfeldt.github.io/progressbar.js/” target=”_blank”>https://kimmobrunfeldt.github.io/progressbar.js/</a></p>
<!–/container–></div>
</main>
<!–==============JQuery読み込み===============–>
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
<script src=”https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js”></script>
<!–IE11用–>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js”></script>
<!–自作のJS–>
<script src=”js/4-1-1.js”></script>
</body>
</html>
CSS
@charset “utf-8”;
#splash {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background:#333;
text-align:center;
color:#fff;
}
#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;
}
Javascript
var bar = new ProgressBar.Line(splash_text, {
strokeWidth: 0,
duration: 1000,
trailWidth: 0,
text: {
style: {
position:’absolute’,
left:’50%’,
top:’50%’,
padding:’0′,
margin:’0′,
transform:’translate(-50%,-50%)’,
‘font-size’:’1.2rem’,
color:’#fff’,
},
autoStyleContainer: false
},
step: function(state, bar) {
bar.setText(Math.round(bar.value() * 100) + ‘ %’);
}
});
bar.animate(1.0, function () {
$(“#splash”).delay(500).fadeOut(800);
});
あとがき
いかがでしたでしょうか？？
ローディング画面なので移植ができないと言うより1記事のみにローディング画面を適用するのはなかなか面倒くさかったのでそのままサーバーにサンプルを置いて動きの確認を、としました。
結構良い感じにシンプルなローディング画面にしてみたので出来れば実際の画面を見てご確認いただければと。
ローディングサンプル画面
※ロード画面に移動します。
次回：『ローディング』から抜粋：％表記数字のカウントアップ+プログレスバー
それでは、最後までお読み頂きありがとうございましたﾉｼ
[Twitter]
↓↓↓↓↓
Follow @SNAKE4610
[stand.fm]
standFMもやっています！
※ビジネス書評や時々思ったこと、更に映画のこと、様々なレビューを語っています。
↓↓↓↓↓
【ぬまたのラジオチャンネル(仮称)】