ランディングページや特設サイト等で良く見かけるインパクト大のウィンドウサイズ一杯の画像設置について、備忘録です。
今回は、前回作成した宇宙の背景画像を使って、ユーザーのウィンドウサイズいっぱいに表示したいと思います。また、タイトルを上下中央に設置し、CSSアニメーションを使って少しリッチに仕上げます。
なお、本コードはIE8以下は非対象となります。アニメーションCSSに関しては、IE9以下非対象です。
画面サイズいっぱいに画像を設置する
background-sizeにcoverを指定。heightは、100vhとする。vhとは、viewport heightの事。50vhを指定すると50%となる。
html
<div class="full-cnt"> コンテンツ内容 </div>
CSS
.full-cnt {
background: url(画像URL指定) no-repeat center;
background-size: cover;
height: 100vh;
}
画面上下中央にタイトル設置、アニメーションCSSでリッチに仕上げる
アニメーションCSSは、「animate.css」を利用して簡単に設置します。
背景画像を指定しているコンテンツにfadeInを。タイトル文字にbounceInを指定しています。
画面の上下左右にコンテンツを配置し、配置したコンテンツの文字をさらに上下中央に設置します。
デモページのタイトル文字は、Googleフォントを指定しています。デモのブレイクポイントは、タブレット(767px)を指定しています。この辺りは、任意で指定してください。
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>デモページ</title>
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<div class="full-cnt animated fadeIn">
<div class="centerBox">
<div class="centerBox-inner animated bounceIn">
GALAXY<br>FULL BG
</div>
</div>
</div>
</body>
</html>
CSS
body {
background: #000;
margin:0;
padding:0;
}
.full-cnt {
background: url(https://createkt.com/wp-content/uploads/2017/04/lifezakk_space_3.png) no-repeat center;
background-size: cover;
height: 100vh;
position: relative;
}
.centerBox{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 500px;
height: 500px;
text-align:center;
border:1px solid #fff;
background-color: rgba(255,255,255,0.1);
}
.centerBox-inner{
width: 500px;
height: 500px;
display: table-cell;
vertical-align: middle;
text-align: center;
color:#fff;
font-size:80px;
font-family: 'Berkshire Swash', cursive;
text-shadow: 1px 1px 3px #000;
}
@media screen and (max-width:767px) {
.centerBox{
width: 300px;
height: 300px;
}
.centerBox-inner{
width: 300px;
height: 300px;
font-size:60px;
}
}