初回アクセス時のみローディング画面を表示したいです。
現在の状況はリンク先からからトップページに戻ってくると、毎回アニメーションが発動してしまい煩わしく感じています。
javascriptは初心者どころか全く分からずでご教授いただければと思います。
よろしくお願いします
JQueryローディングアニメーションを実装したのですが、最初の一度だけ(リロード時は表示されないように)アニメーションをしたいのですがうまくいきません。
試したのはこちらです。回答よろしくお願いいたします。
js
1 <script>2 $(function () {3 var webStorage = function () {4 if (sessionStorage.getItem('access')) {5 /* 6 2回目以降アクセス時の処理 7 */8 $("page_loading").addClass('is-active');9 } else {10 /* 11 初回アクセス時の処理 12 */13 sessionStorage.setItem('access', 'true'); // sessionStorageにデータを保存14 $("load_area").addClass('is-active'); // loadingアニメーションを表示15 setTimeout(function () {16 // ローディングを数秒後に非表示にする17 $("page_loading").addClass('is-active');18 $("load_area").removeClass('is-active');19 }, 3000); // ローディングを表示する時間20 }21 }22 webStorage();23});24 25</script>
html
1<body>2 <div id="page_loading">3 <div id="load_area">4 <div class="loader">Loading...</div>5 <div id="page_loading_text"></div>6 <p class="load_p">7 <span class="load_h">8 ただいまアクセスが集中しております 9 </div>10</div>11</body>
css
1#page_loading {2 /*fixedで全面に固定*/3 position: fixed;4 z-index: 9999;5 width: 100%;6 height: 100%;7 background:#fff;8 text-align:center;9 color:#fff;10 11}12 13/* Loadingバー中央配置 */14#load_area {15 position: absolute;16 top: 50%;17 left: 50%;18 z-index: 9999;19 width: 100%;20 transform: translate(-50%, -50%);21 color: #2e2e2e;22}23#page_loading_text {24 width: 40%;25 color: #fff;26 margin: auto;27}
js
1//テキストのカウントアップ+バーの設定2var bar = new ProgressBar.Line(page_loading_text, {//id名を指定3 easing: 'easeInOut',//アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能4 duration: 2500,//時間指定(1000＝1秒)5 strokeWidth: 0.2,//進捗ゲージの太さ6 color: '#555',//進捗ゲージのカラー7 trailWidth: 0.2,//ゲージベースの線の太さ8 trailColor: '#bbb',//ゲージベースの線のカラー9 text: {//テキストの形状を直接指定 10 style: {//天地中央に配置11 position: 'absolute',12 left: '50%',13 top: '50%',14 padding: '0',15 margin: '-30px 0 0 0',//バーより上に配置16 transform:'translate(-50%,-50%)',17 'font-size':'1rem',18 color: '#fff',19 },20 autoStyleContainer: false //自動付与のスタイルを切る21 },22 step: function(state, bar) {23 bar.setText(Math.round(bar.value() * 100) + ' %'); //テキストの数値24 }25});26 27//アニメーションスタート28bar.animate(1.0, function () {//バーを描画する割合を指定します 1.0 なら100%まで描画します29 $("#page_loading").delay(500).fadeOut(800);//アニメーションが終わったら#page_loadingエリアをフェードアウト30});
0 コメント