Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

개발자입니다

[생활코딩 CSS] Parallax(시차를 이용한 효과) 본문

HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피

[생활코딩 CSS] Parallax(시차를 이용한 효과)

끈기JK 2023. 2. 4. 23:04

 

 

각 배경마다 height: 100vh, overflow: hidden, background-attachment: fixed 로 한다.

밑줄은 h1:after 에 border-bottom 주고 width 로 길이 조절한다. display: block 하면 아래로 내려간다.

<!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>

 

 

저작자표시

'HTML & CSS > 생활코딩 - 겁나 빠른 웹 레시피' 카테고리의 다른 글

[생활코딩 CSS] 리로딩 없이 URL 바꾸기 (음악앱)  (0) 2023.02.06
[생활코딩 CSS] 랜덤 이미지 생성기  (0) 2023.02.05
[생활코딩 CSS] 링크를 버튼으로 만들기  (0) 2023.02.04
[생활코딩 CSS] 자바스크립트 없이 tree 만들기  (0) 2023.02.04
[생활코딩 CSS] Masonry layout 만들기  (0) 2022.09.29
'HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피' Related Articles more