状況
初回アクセス時のみローディング画面を表示したいです。
現在の状況はリンク先からからトップページに戻ってくると、毎回アニメーションが発動してしまい煩わしく感じています。
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>
css
1.page_loading.is-active { 2 opacity: 0; 3 visibility: hidden; 4} 5 6 7 8.load_area.is-active { 9 opacity: 1; 10 visibility: visible; 11}
ここから下はローディングアニメーションのソースコードです。
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});

回答2件
あなたの回答
tips
プレビュー