수업소개
parallax는 시차라는 뜻으로 천문학에서 사용하는 용어입니다. 즉 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미하죠. 이 현상을 이용하면 입체감, 실체감을 높여서 보다 인상적인 디자인을 할 수 있습니다.
사용기술
선행학습
학습준비
미리보기
수업소개
실습
예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <!doctype html><html><head> <link rel="stylesheet" href="reset.css"> <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> |
