カテゴリー別アーカイブ: html.css

blogImg
2016年3月5日

アニメーション終了後にサイトを表示させる方法

こんにちは!WEBデザイナーのANAです。

今回は『アニメーション終了後のサイトを表示させる方法』をご紹介しています。

アニメーションを作成して、つくっているサイトに入れたはいいけど、アニメーションがただサイトの上にのっているだけ…なんじゃこりゃ状態。が今回このブログをかくきっかけになった出来事。

ここのブログにもよく登場するWATANABEさん(*’ω’)がAdobe edge animeteで素敵なアニメーションをつくってくれたのに、うまくサイトに実装できてない!

 

というわけで、簡単なやり方でなんとかできないか?と思いやってみたのが

「jQueryでsetTimeoutを使用してfunctionの実行を遅らせる」という方法。

つまりどんなことがしたいかというと、

サイトを開いた瞬間、アニメーションがはじまる⇒そのアニメーションが終わったら、本来の表示したいサイトを出す

 

と言う流れ。

今回Bike GIFをお借りして簡単に方法をご紹介しようと思います!

 

 

 

アニメーションを表示させる

 

anime1

まずはここから!
先ほどのアニメーションをサイトに入れておきます。

で、アニメーション終了後に表示させたいソースも書いておきます。

HTMLは以下のような感じ。

<div class="anime">
<img src="http://smile-design.bz/tight/blog/anai/bicycle-gif.gif"/>
</div>
<div class="mainSite">

アニメーションが終わったらこれが表示されます。
</div>

css


body,html {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

.anime {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #E9E3E3;
 position: relative;
}

.anime img {
 display: block;
 position: absolute;
 top: 28%;
 left: 40%;
}

.mainSite {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #FC6;
 position: relative;
}

.mainSite p {
 font-size: 160%;
 color: #FFF;
 position: absolute;
 top: 42%;
 left: 40%;
}

 

今こんな風にサイトが見えています。

【URL】http://smile-design.bz/tight/blog/anime1.html

 

 

 

 

アニメーションを○○秒後に消す!

 

anime2

 

 

では次のステップ!

以下のjQueryでsetTimeoutを使用します。

$function(){
setTimeout(function(){
                  ここに処理をかくよ!
},5000);//5秒数後
});

 

 今回は約4秒後に、自転車のアニメーションをフェードアウトしたいので以下のように指示をします。

 

$function(){
setTimeout(function(){
$('.anime').fadeOut();
},3800);//約4秒数後
});

 

 

たったこれだけでアニメーションが指定した秒あとにフェードアウトして消えてくれます。

 

 

 

 

ただ問題が、確かに約4秒後にアニメーションは消えて次の要素が出てきてくれるのだけど、
アニメーション再生中もスクロールしてしまえば、下にある要素が見えてしまう。

 

しかも、フェードアウトしたあとの、要素の出方がぱきっとしている…。

 

 

気にいらない私はもうひと加え!

 

 

 

アニメーションを再生中は下のコンテンツを出さない!

 

やり方としてはjQueryでcss指定してあげる。

 

 

アニメーションが再生中は下のコンテンツは非表示にするという指示を出してあげればいいのです。

$function(){
$(".anime").css("display", "none");//アニメーション中は非表示
setTimeout(function(){
$('.anime').fadeOut();
},3800);//約4秒数後
});

こうすれば、アニメーションが流れている間は消えています。
ただ、これだけの指示だとずっとdisplay:noneで
非表示のままなので、3.8秒後に表示する指示を出してあげます。

 

 

しかも、ただ出すわけでは面白くないのでフェードインして表示させます。

 

 

 

 

 

メインのコンテンツをフェードインさせながら出そう!

 

bicycle-gif

ここでも同じくsetTimeoutを使用します。

$(function(){
 $(".mainSite").css({opacity:'0'});
 setTimeout(function(){
 $(".mainSite").css("display", "block");
 $(".mainSite").stop().animate({opacity:'1'},1000);//1秒かけてコンテンツを表示
 },3800);//約4秒後に
});
約4秒後にコンテンツを表示、そしてフェードインさせるという指示を出しています!
この指示をしてあげれば~!

 

 

 

出来ました~!
無事に完成です!

 

こんなに簡単にできるんですね♪
みなさんもぜひsetTimeoutを使っていろんなことをしてみてください!

 

 

それではANAでした(*’▽’)
animeImg
2016年2月12日

css3でアニメーションを実装してみた!

こんにちは、WEBデザイナーのANAです。

 

今回は、css3でアニメーションに挑戦します!

昨年、一昨年とフラットデザインが流行してから、背景一色のデザインが多く見られるようになりましたね♪
そこで、背景一色の静止画も素敵なんですが、ものによってはその背景が自動で変化すればもっと面白くなり、目を引くのになぁ~と思っていたところにcss3でアニメーションをしてみようということになったので、今回挑戦してみました。

 

code-1076533_640

 

 

CSS3 キーフレームアニメーションについて

ここでは、要素を少しづつ変化させるアニメーションをご紹介します。

css3の『animation』プロパティでは、キーフレームというものを設定することで細かい動きを付けることができます。

細かいとこまでってどこまでかって?
それがアニメーションの時間やタイミングまで、本来ならばJavascriptやjQueryを使って行うところまでcssでできてしまうんです~!!

感動!!( ;∀;)

 

anime2g

 

 

キーフレームって何?

css3はわかるけどキーフレームって聞いたことない!
キーフレームアニメーションってどういう意味?

と思っているあなた!

キーフレームとは、通過点のこと。

つまり、アニメーションの中で変化が定義されているフレームのことなんです。

各キーフレームで要素がどう変化するかは @keyframes という@規則で定義します。

 

ここで大切なのがアニメーションとそのキーフレームを一致させるためには、@keyframes 規則の名前と、要素に指定する animation-name プロパティの名前を一致させる必要があります。

 

この規則の名前は「@keyframes + 任意の名前」で宣言します。

キーフレームの情報を0%〜100%の%表示で書いていきます。

0%はアニメーション開始時、100%は終了時です。

css3でグラデーションを使用するときもこんな感じなのでなんとなくだけどわかりやすいですよね♪

ちなみにcss3でグラデーションのように、0%は from、100%は to という書き方でもOK!!

例えば、

@keyframes grade {
0% { background: #FF9999;}
50%{ background: #FFE599;}
100%{ background: #FF99FF;}
}

とこんな感じ♪

 

ちなみに、ChromeやSafari等のWebKit系ブラウザーでは、ベンダープレフィックス(-webkit-)が必要です。

@-webkit-keyframes grade {
0% { background: #FF9999;}
50%{ background: #FFE599;}
100%{ background: #FF99FF;}
}

ChromeやSafari向けになるとこうなります。

 

 

animation関連のプロパティについて

 

●animation-name

@keyframes で定義した名前を指定します。
これをちゃんと指定しておかないとアニメーションは動きません。
なのでここはしっかり決めておきましょう♪

 

●animation-duration

アニメーションを動かす時間の長さを「秒数+s」で指定します。

例えばこんな感じ

body {
 animation: grade 5s;
}

 

注意するべきが、この値が0だと実行されません。またマイナスなどの負の値を指定しても0として扱われてしまうので、実行されません。気を付けてください。

 

●animation-delay

ページ(要素が)読み込まれてからアニメーションを何秒からはじめるかの指定をすることができます。

これも上述したanimation-durationと同じ指定(「秒数+s」)の仕方になります。

 

 

●animation-timing-function

アニメーションをどのようなタイミングで出すか、どうやって進めるかを指定します。
ここで滑らかな動きなどを調整できます。

値は以下の通り~

  • ◆ ease-in
  • ◆ ease-out
  • ◆ ease-in-out
  • ◆ linear

 

 

●animation-delay

ページ(要素が)読み込まれてからアニメーションを何秒からはじめるかの指定をすることができます。

これも上述したanimation-durationと同じ指定(「秒数+s」)の仕方になります。

 

 

●animation-direction

animation-directionはアニメーションを繰り返す方向が指定できます。

  • ◆ normal … 通常の方向(初期値)
  • ◆ alternate … 奇数回で通常・偶数回で反対方向に再生(行ってきて行ってきてという具合)
  • ◆ reverse … 逆方向
  • ◆ alternate-reverse … alternate の逆方向

 

●animation-iteration-count

アニメーションの繰り返しを指定します。

ループにするにはinfinite を指定すれば無限にループされます。

 

 

●animation-play-state

アニメーションの一時停止や再生中(running)が指定できます。

 

 

●animation-fill-mode

アニメーションの再生前後の状態が指定できます。

  • ◆ none(初期値)
  • ◆ forwards … 再生後、最後のキーフレームの状態を維持する
  • ◆ backwards … 再生前、最初のキーフレームの状態を適用させる
  • ◆ both … forwards と backwards の両方を適用する

 

では、実際にcss3でアニメーションを実装してみましょう♪
背景色を変更していくアニメーションを実装します。

 

 

css3でアニメーションを実装!!

animation関連のプロパティを覚えたところで、実装してみます。

キーフレーム名を「grade」とし、0〜100%までで推移させる背景色を設定します。

 

@-webkit-keyframes grade {
 0% { background-color: #FF9999; }
 20% { background-color: #FFB973; }
 40% { background-color: #F0E1A8; }
 60% { background-color: #99CCFF; }
 80% { background-color: #FF99FF; }
 100% { background-color: #DFFFBF; }
}
@keyframes grade {
 0% { background-color: #FF9999; }
 20% { background-color: #FFB973; }
 40% { background-color: #F0E1A8; }
 60% { background-color: #99CCFF }
 80% { background-color: #FF99FF; }
 100% { background-color: #DFFFBF; }
}

ページ全体で色の変化を見てもらうためにbodyに、animationプロパティを指定します。

body {
 background-color: #FF9999;
 animation: grade 5s infinite;
 -webkit-animation: grade 5s infinite;
}

下記のリンクをクリックすると今回行ったアニメーションを見ることができますので、ぜひ見てみてください♪

 

一色の背景パターンのときなどに使用するといいアクセントにもなるし、ユーザーの印象にものこりやすくなります。ぜひみなさんも実装してみてください。

【URL】http://smile-design.bz/tight/grade.html

それではANAでした~(^^)/