코딩룸*◡*

background-attachment: fixed를 이용한 Parallax(시차를 이용한 효과) 본문

공부좀 하자/HTML, CSS

background-attachment: fixed를 이용한 Parallax(시차를 이용한 효과)

코딩하는 묭이💛 2017. 7. 17. 17:23

1. Parallax란?

parallax(시차)란 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미한다.

이러한 현상을 이용하면 입체감과 실체감을 높여서 보다 인상적인 디자인을 할 수 있다.


이것을 구현하려면 HTML과 CSS, JavaScript(쪼금? 필요없나?)을 사용하면 된다.





2. CSS background-attachment: fixed;를 이용

예제)

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="reset.css">
    <link rel="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300" rel="stylesheet">
    <style>
        body {
        margin: 0;
        }
        .scene {
        height: 100vh;
        overflow: hidden;
        backgound-image: url('image/bg01.jpg');
        background-attachment: fixed;
        background-size: cover;
        font-family: 'Nanum-Godic' sans-serif;
        }
        .scene header {
        color: #fff;
        max-width: 80%;
        position: relative;
        top: 50%;
        left: 50%;
        font-size:1.5rem;
        transform: translateX(-50%) translateY(-50%); 
        text-align: center;
        }
        .scene header h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
        font-weight: 300; 
        }
    </style>
</head>

<body>
<section class="scene">
    <header>
        <h1>Hi! My name is Yoon Miyeon.</h1>
    </header>
</section>
</body>
</html>



체험하기)  https://codepen.io/egoing/pen/yaKvPd?editors=1100#0






3. background-attachment 지원버전

속성iechromefirefoxsafariopera

background-attachment

11

5.9

4.9 -webkit-

5.4 -moz-

5.2

9.0

3.1 -webkit-

37.0

15.0 -webkit-

11.1





4. 결론

parallax(시차)와 같은 디자인적인 모션을 html과 css를 이용해서도 충분히 구현 가능하다.


반응형

'공부좀 하자 > HTML, CSS' 카테고리의 다른 글

[CSS]box-sizing  (0) 2017.09.04
CSS "counter-" 로 순번 달기  (0) 2017.08.25
벤더프리픽스(Vendor Prefix : 벤더 접두사)  (0) 2017.08.09
Animation - easing  (0) 2017.08.01
CSS3 Multi-Colum(다중 칼럼)  (0) 2017.07.14
'공부좀 하자/HTML, CSS' Related Articles more
Comments