前提
下記のサイトを参考に、アニメーション終了後にサイトを表示させています。
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; }
回答3件
あなたの回答
tips
プレビュー