こんにちは!
9月も終わりに近づいて、毎日毎日あっという間に終わっていきますね~
すぐ紅葉の季節が来るんでしょうね…汗
秋が楽しみです!
今回はアニメーション終了後にサイトを表示させる方法をご紹介します。
いろんなやり方がありますので、私のやり方は1つの参考程度に見ていただければと思ってます。
自分でアニメーション画像を作成して、サイトに入れたはいいけどなんかしたいことと違う。
ということで、備忘録として残しておくことにしました。
ちなみに今回私が実装したのは「jQueryでsetTimeoutを使用してfunctionの実行を遅らせる」という方法です。
もっと簡単なやり方もあるんですが、setTimeoutを使うことが最近多いのでそれも含めて書いておこうと思います。
流れとしては
●サイトを開いた瞬間、アニメーションがはじまる
↓
●アニメーションが終わったら、サイトを表示する
と言う流れです。
実際のデモがこんな感じ。(右下にある”RETURN”ボタン押してみてください。)
See the Pen アニメーション終了後にサイトを表示 by sayuri (@giraffeweb) on CodePen.0
HTMLは最初に出すアニメーションのブロックと、次に表示させたいサイトのHTMLのブロックをdivで囲んで分けているだけの単純なソースです。
<div class="anime"> <img src="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/cameras.gif"/> </div> //ここまでが最初のアニメーションのブロック <div class="mainSite"> <h1>I'm love it.</h1> </div> //アニメーション終了後に表示させるブロック
付随してcssも同様な感じです。
body,html { width: 100%; height: 100vh; margin: 0; padding: 0; overflow: hidden; } .anime { width: 100vw; height: 100vh; background-color: #cb5151; position: relative; } .anime img { display: block; width: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .mainSite { width: 100%; height: 100vh; padding: 0: margin; 0; background-image: url(https://creatornote.nakweb.com/wp-content/themes/giraffe/images/camera.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .mainSite h1 { font-family: 'Playfair Display', serif; padding-left: 60px; padding-top: 60px; margin: 0; font-size: 50px; }
重要なのがsetTimeoutを使用してfunctionの実行を遅らせる指示を出してあげること。
まず、3秒後にmainSiteのブロックがフェードアウトする指示を出します。
$(function(){ $(".mainSite").css("display", "none"); setTimeout(function() { $('.anime').fadeOut(); }, 3000); });
そのあとに、最初はmainSiteのブロックをopacity:’0’にして表示させないようにしておいて
3秒後に表示させる指示を出します。
opacity:1;の横にある1000は1秒かけて表示するという意味です。
$(function(){ $(".mainSite").css({opacity:'0'}); setTimeout(function(){ $(".mainSite").css("display", "block"); $(".mainSite").stop().animate({opacity:'1'},1000); },3000); });
結構簡単に実装できますよね。
参考になったでしょうか?setTimeoutはいろんなところで自由に使えるので
みなさんも使ってみてください。
初めまして
動画再生後にTopページへ行くようにしたいと思い、こちらの記事を見て正にやりたい事だと
参考にさせていただきました。
ただほぼ同じ状態にしているのですが、どうしても
$(“.mainWrapper”).stop(false).topMovie_box({opacity:’1′},1000);
だけが効かないという事態が起きています。
因みにWordpress使用、gifではなくvideoを使用しております。
もし可能でしたらお知恵をお貸しいただけますと幸いです。
maavさん
連絡がおそくなりすみません。
すでに解決しておりますでしょうか?
$(“.mainWrapper”).stop(false).topMovie_box({opacity:’1′},1000);
ということですがtopMovie_boxの部分が気になります。
よければ全文のソースを表記いただきたいです。よろしくお願いします。
はじめまして。
参考にさせていただいて、アニメーションを作成できました。
ありがとうございます。
一つ質問があります。
アニメーションを最初に訪れた時のみ表示させたいのですが、
どうすればよいでしょうか?
お手隙の際にご教示いただければ幸いです。
どうぞよろしくお願いします。
kumasaさん
ご連絡が遅くなり申し訳ございません。
ご質問いただきありがとうございます!
最初に訪れたときのみアニメーションを表示させる方法をブログでまとめてますので
よかったらご覧ください!(^^)
https://creatornote.nakweb.com/jsanime/