質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

4753閲覧

ブラウザバックした時にオープニングアニメーションが表示されないようにしたい

kawataro

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/05/30 08:58

編集2019/05/30 09:11

前提

下記のサイトを参考に、アニメーション終了後にサイトを表示させています。
http://smile-design.bz/news_blog/2016/03/05/anai024/

問題

デモサイトでは文字だけが表示されていますが、実際に作り込んだサイトではページ内に複数のリンクを貼っています。
リンクをクリック後、ブラウザバックをすると再度、アニメーション→サイト表示の流れになってしまい閲覧する人にストレスを与えてしまいそうです。

実現したい事

ブラウザバックをした時に、オープニングアニメーションが表示されないようにしたいです。
こちらを解消する方法はありますでしょうか?

どうぞよろしくお願い致します。

##html

<section id="anime"> <video muted src="movie/opening.mp4" autoplay loop></video> <div class="box"> <p class="logo"><img src="img/logo.png"/></p> <input type="button" class="skip" value="SKIP"> </div> </section> <section id="container"> <a href="#">aaaaa</a> </section>

##js

//オープニング $(function () { $("#container").css("display", "none"); setTimeout(function () { $('#anime').fadeOut(); }, 24000); }); $(function () { $("#container").css({ opacity: '0' }); setTimeout(function () { $("#container").css("display", "block"); $("#container").stop().animate({ opacity: '1' }, 2000); //1秒かけてコンテンツを表示 }, 24000); //約25秒後に }); //オープニング SKIP $(function () { $(".skip").click(function () { $('#anime').css('display', 'none'); $('#container').css('display', 'block'); $('#container').css('opacity', '1'); }); });

##css

#anime { width: 100%; height: 100%; background-color: #fff; position: relative; } #anime video { text-align: center; margin: auto; width: auto; height: auto; min-width: 100%; min-height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } #anime .box { text-align: center; margin: auto; width: 100%; position: absolute; top: 35%; left: 0; right: 0; bottom: 0; z-index: 2; } #anime .logo { text-align: center; margin: 0 auto 30px; width: 250px; } #anime .logo img { width: 100%; } #anime .skip { text-align: center; margin: 0 auto; padding: 15px 0 0; width: 100px; background: rgba(0,0,0,0); color: #FFF; font-size: 2.6rem; font-family: 'font_bn'; letter-spacing: 0.1em; outline: 0; border: none; border-top: 1px solid #fff; transition: all 0.5s; display: block; } #anime .skip:hover { color: #AA0039; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/05/30 09:00

現在ご自身が組まれているコードをご提示ください。 例え、参考サイトそのままであってもご自身のコードで今試しているのは間違いないので質問本文にご提示ください。そのうえで、何か調べたこと、試したことを具体的に記載してください。
kawataro

2019/05/30 09:12

ご指摘ありがとうございます。コードを追加しました。
guest

回答3

0

teratail内を「ブラウザバック」などで検索していただければわかりますが
ブラウザバックを完全に検知する方法はありません。
「1度目のアクセスだけ表示」という観点に切り替えWebStorageを利用されては如何でしょうか。

投稿2019/05/30 09:24

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kawataro

2019/05/30 11:48

ご回答ありがとうございます。初めて耳にするワードです。 調べてみます><;
guest

0

ベストアンサー

window.performance.navigation.type:で判定可能なのでは?

https://qiita.com/t4y3/items/942c848fcd318fd056cd

投稿2019/05/30 11:19

oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kawataro

2019/05/30 11:48

ご回答ありがとうございます。サイトを確認してみます。
kawataro

2019/05/31 05:32 編集

上記サイトを元にコードを追加しました。 ありがとうございます
yambejp

2019/05/31 06:03

firefoxが想定通りに動かないかもしれません firefoxだけはバックしたときにDOMContentLoadedが 起動しないようなのでDOMContentLoaded内でフラグをたてて pageshowで処理をすると良いかもしれません
guest

0

今のままだとリロード時にもアニメーションを止められないと思いますが大丈夫でしょうか?

例えばクッキーを利用してbeforeunload時にフラグをたてておき
10秒程度値を保持、pageshowでフラグがあればページバックとみなす
など適当なロジックを組むとよいでしょう

sample

リロードや、5秒以内に返ってきた場合アニメしない

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 3<script> 4$(function(){ 5 $('#reload').on('click',function(){ 6 location.reload(); 7 }); 8 $('#google').on('click',function(){ 9 location.href="https://www.google.com"; 10 }); 11}); 12$(window).on('pageshow',function(){ 13 var anime=$.cookie('anime'); 14 console.log(anime); 15 if(typeof anime=="undefined"){ 16 $('#anime').text('anime...').delay(2000).queue(function(){ 17 $(this).text("").dequeue(); 18 }); 19 }; 20}); 21$(window).on('beforeunload',function(){ 22 $.cookie('anime',1,{expires:1/24/60/60*5}); 23}); 24</script> 25<input type="button" id="google" value="google"> 26<input type="button" id="reload" value="reload"> 27<span id="anime"></span>

performance.navigation.typeの利用

performance.navigation.typeの振り分けを考えました

javascript

1<script> 2var flg=window.performance.navigation.type; 3window.addEventListener('pageshow', function(e){ 4 list=["first","reload","back"]; 5 console.log(list[flg]); 6 flg=2; 7}); 8</script> 9<a href="https://www.google.com">google</a> 10<a href="#">hash</a> 11<input type="button" value="reload" onclick="location.reload()">

投稿2019/05/30 09:41

編集2019/05/31 06:27
yambejp

総合スコア114574

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kawataro

2019/05/30 11:48

ご回答ありがとうございます。 はい、そうなんです。 この質問の内容と一緒に解決すると考えていたのですが別問題だったでしょうか。
yambejp

2019/05/30 11:51

n秒以内にもどってきたらアニメーションしないというのでOKですか?
kawataro

2019/05/31 05:30

参考例をありがとうございます。
kawataro

2019/05/31 05:33

助かりました・・!今回は回答いただいたもの複数試して、window.performance.navigation.type:を利用しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問