수업소개
parallax는 시차라는 뜻으로 천문학에서 사용하는 용어입니다. 즉 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미하죠. 이 현상을 이용하면 입체감, 실체감을 높여서 보다 인상적인 디자인을 할 수 있습니다.
사용기술
선행학습
학습준비
미리보기
수업소개
실습
예제
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="reset.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300" rel="stylesheet">
<style>
body {
margin: 0;
}
.scene {
height: 100vh;
overflow: hidden;
background-attachment: fixed;
background-size: cover;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
}
.scene.one{
background-image: url(img/heic0910e.jpg);
}
.scene.two{
background-image: url(img/heic1501a.jpg);
}
.scene.three{
background-image: url(img/heic1608a.jpg);
}
.scene header{
color:white;
max-width: 80%;
position: relative;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
font-size:1.5rem;
text-align: center;
}
.scene header h1{
font-size:2rem;
margin-bottom: 1rem;
font-weight: 300;
}
.scene header h1:after{
content:'';
border-bottom:1px solid white;
width:8rem;
display: block;
margin:0 auto;
margin-top:1rem;
}
</style>
</head>
<body>
<section class="scene one">
<header>
<h1>Lorem ipsum dolor sit amet.</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam suscipit sint ab beatae nihi
</header>
</section>
<section class="scene two">
<header>
<h1>Lorem ipsum dolor sit amet.</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam suscipit sint ab beatae nihi
</header>
</section>
<section class="scene three">
<header>
<h1>Lorem ipsum dolor sit amet.</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam suscipit sint ab beatae nihi
</header>
</section>
</body>
</html>
