hero

Hero images

In deze Hero staat het hero-plaatje fullscreen, zowel in de breedte als in de hoogte. Om ook de tekst verticaal te centreren kan je transform: translateX(-50%) gebruiken.

In de HTML staat het volgende:

<body>
<div id="hero">
	<h1>another hero</h1>
</div>

<div id="main">
	blabla
</div>

En in de CSS staat:

html {height:100%; width:100%;}
body {height:100%; width:100%;}

/* 100% is nodig om in andere elementen 
ook percentages te kunnen gebruiken */

#hero {
	background: url(bg.jpg) no-repeat center center;
	background-size:cover;
	height:100%;                     /* dat is alles */
	padding:0;
	margin:0;
	background-attachment:fixed;
}

#hero h1 {
	position:absolute;
	top:40%;
	left:50%;
	transform: translateX(-50%) translateY(-50%);
	width:50%;
	min-width:300px;
}
#main {
	margin:0 25% 100px 25%;
}

Fade effect

De fade is een css-animatie. Aan de body is de eigenschap animation: fade 2s; toegevoegd. 2s betekent 2 seconden, en fade is een zelfgekozen woord dat daaronder met keyframes wordt gedefinieerd. Zie de lessen op aartjan.nl

body {animation: fade 0.5s;}

keyframes fade { 
	from {opacity: 0} to {opacity: 1}  
}

Voorlopig moeten alle vendor-prefixes er dan ook nog bij (telkens boven de gewone css) zoals die voor Safari:

body {
	-webkit-animation: fade 2s; 
	animation: fade 2s;
} 

@-webkit-keyframes fade { 
	from {opacity: 0} to {opacity: 1} }

keyframes fade { 
	from {opacity: 0} to {opacity: 1} }

Responsive maken

Het geheel kan nog verder responsive worden gemaakt, in dit voorbeeld met deze code, onderaan toegevoegd:

@media screen and (max-width:700px)  { 

#main {margin:0 5% 100px 5%;}
#hero h1 {width:70%;}

 }