オープニングにアニメーションを表示したい

締切済

質問者：vuvu0305
質問日時：2015/09/30 13:02
回答数：3件

お願いします。
右記サイト（http://sanchitable.com/）の冒頭のように
白画面でアニメーションのあとフェードアウトしてページを表示させたいのですが、
いまいちやり方が分かりません。
どういう仕組みでこのように動作しているのでしょうか？
ソースをみてもJavaScriptを使っているようには見えないのですが。。。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2015/10/05 17:46

こんにちは。

ご提示のサイトではjavascriptを利用しているようですが、結局のところCSS3のtransformなどを利用しているようですので、スクリプト抜きでもできそうな気がします。

画像を投稿しにくいので、画像の代わりにテキストや枠線で代用していますが、こんな感じではどうでしょう。
（Fx37で確認。　場合によりベンダープレフィックスの追記が必要かも）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>sample</title>

<style type="text/css">
html, body, #openning{ width:100%; height:100%; }
#openning{
background-color: #FFF;
position: absolute; top: 0; left: 0;
display: table;
opacity: 0;
animation: anim2 4s linear;
}

#openning>div{
display: table-cell;
width:100%; height:100%;
text-align:center;
vertical-align: middle;
}

#image-frame{
display: inline-block;
border: 10px solid #AAA;
width: 200px; height:200px;
}
#image{
font-weight: bold;
font-size: 200px;
padding: 0px;
animation: anim1 3s linear;
}

@keyframes anim1{
from{
font-size: 100px; padding: 50px;
color: #999;
}
to{
font-size: 200px; padding: 0px;
color: black;
transform:rotate(180deg);
}
}
@keyframes anim2{
0%{ opacity: 1; }
75%{ opacity: 1; }
100%{ opacity: 0 }
}

#main{ height:1000px; background-color: #FFC; }
</style>
</head>
<body>

<div id="openning">
<div>
<div id="image-frame">

<div id="image">※</div>
</div>
</div>
</div>

<div id="main">
本文をいろいろと
</div>

</body>
</html>

- 1
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

詳細な記述ありがとうございます。
keyframesというのがあるのですね。試してみます。

通報する

お礼日時：2015/10/09 00:23

No.2

回答者： weakweak
回答日時：2015/10/03 03:11

もしかしたら超技術でjs使わないでもできるのかもしれませんが多分js使ってます。

$(function() {
// 最初に全体を非表示に
$('#main-content').css({visibility:hidden});

// 真っ白な背景のローディング画面を表示。この時上にアニメーションsvgをのせておいたり
// javascriptでローディング画像をアニメーションさせる。
// #coverはposition:absoluteでwidth/height 100%でbody直下に置かれてたりします。
$('#cover').css({visibility:visible});

// 画像がすべてロードされたらローディング画面を再度隠す(もしくは要素自体を削除する)。
// 今回は http://imagesloaded.desandro.com/ を使った例。
$('#main-content').imagesLoaded()
.done( function( instance ) {
$('#cover').css({visibility:hidden});
$('#main-content').css({visibility:visible});
})
});