動くWebデザインアイディア帳『ローディング』から抜粋:%表記数字のカウントアップ

スポンサーリンク
プログラミング

『ローディング』から抜粋:%表記数字のカウントアップ


ドーモ!ぬま畑です!

今日もwebの勉強です。

前回はCSSとjQueryの組み合わせで様々なアニメーションをWordPressに移植してみました。

もしまだ見ていない方は前回の記事【『jQueryとCSSを組み合わせて動かす』から抜粋:クリックでエリアが表示される】の目次に「まとめ」があるのでそこからまとめの項目に飛んで見ていただけると概要等がありますからそちらで確認していただければと存じます。

さて、今回はローディング。

前回とは打って変わって少し特殊です、というのも記事に移植が難しいよ言うよりそもそもローディング画面なので記事としてローディングにするわけにはいかずローディングページを用意してみましたので、まずは下記URLをクリックorタップしてみてください。

ローディングサンプル画面

※ロード画面に移動します。

…とまぁ実はリンクを踏まなくてもどういう動きなのかは下のGIFを見ていただけるだけで一目瞭然っていう…^^;

怪しいと思う方は下記の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]
ツイッターもやってるんでよろしければフォローお願いしますm(_ _)m
※フォローしていただければ記事の更新時にツイート(通知)しますので他の記事やレビューが見たいという方はフォローください!

↓↓↓↓↓



[stand.fm]
またstandFMもやっているので興味ある方はどうぞ!
※ビジネス書評や時々思ったこと、更に映画のこと、様々なレビューを語っています。

↓↓↓↓↓


ぬまたのラジオチャンネル(仮称)

コメント

タイトルとURLをコピーしました