![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
お願いします。
右記サイト(http://sanchitable.com/)の冒頭のように
白画面でアニメーションのあとフェードアウトしてページを表示させたいのですが、
いまいちやり方が分かりません。
どういう仕組みでこのように動作しているのでしょうか?
ソースをみてもJavaScriptを使っているようには見えないのですが。。。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
こんにちは。
ご提示のサイトでは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>
No.2
- 回答日時:
もしかしたら超技術で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});
})
});
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フッター上部に謎の隙間
-
floatさせたdivタグを折り返さ...
-
スライダーの枠に動画を収める...
-
文字を固定したいのですが…
-
サイトにコンテンツを並べる際...
-
テーブルの1つのセル内で、上揃...
-
positionのrelativeとabsolute...
-
textareaで入力した文字を改行...
-
CSS <div>の入れ子が反映さ...
-
css ファイルでまとめたい
-
CSSでdivのheightを動的に
-
チェックボックスの背景色って...
-
サイトの背景色をグラデーショ...
-
innerHTMLで、表示すると、一部...
-
javascriptで複数の画像をラン...
-
MAX関数を使ってからLEFT JOIN...
-
条件分岐でキーが入力されてい...
-
eclipseでcssを使うためには?
-
c++std::string型をTCHARに変換...
-
this.src等のthisについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
サイトにコンテンツを並べる際...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
textareaで入力した文字を改行...
-
文字をクリックしたら別の文字...
-
css固定したフッターが本文と重...
-
文字を固定したいのですが…
-
Flickity で画像にリンクを貼る...
-
Ctrl+F(検索)の窓を出したいの...
-
オンマウス時に別画像を上に重...
-
背景の過
-
離れた場所にマウスオーバーで...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
ポップアップのソースの書き方...
-
スタイルシートで画面を上下に...
-
floatさせたdivタグを折り返さ...
-
TABLEの高さを固定したいのですが…
おすすめ情報