[CSS] 이미지 스크롤 고정 효과 (페이지 스크롤 시 이미지 고정, background-attatchment)

728x90

프로그래밍 세계를 탐구합시다.

CSS 효과 (페이지 스크롤 시 이미지 고정, background-attatchment)

background-attatchment 코드를 활용하여 이미지가 스크롤을 따라오는 것 같은 효과를 구현할 수 있습니다.

구현 화면

작성 코드

이미지에 background-attatchment를 적용하고 텍스트 박스 아래 위에 배치하면

이미지는 고정되어 있고 텍스트 박스만 스크롤되는 듯한 효과를 구현할 수 있습니다.

index.html

<body>

    <div class="image1"></div>

    <div class="how-textbox">
        <h1><span style="color: #ce2929">전기 단가 상승</span> 문제가</h1>
        <h1>발생하는 원인에는</h1>
        <h1 style="margin-bottom: 3rem;">어떤 것이 있을까요?</h1>
        <h1>
            <a href="/power/powerprice.html" class="price-goto-link">⚡전기 단가 계산기 바로가기 ▶️</a>
        </h1>
    </div>

    <div class="image1"></div>


</body>

index.css

.image1 {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url("../src/solar.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  /* 이미지가 요소를 완전히 덮도록 조정 */
}

.how-textbox {
  background-color: rgba(239, 6, 64, 0.2);
  /* 투명한 초록색 */
  padding: 4rem;
  /* 텍스트와 상자의 간격 */
  width: 100%;
  /* 상자 너비 */
  text-align: center;
}

구현 화면을 더 상세히 확인하고 싶다면 아래 사이트 참고 바랍니다.

https://ityrannosaurus.github.io/power/

내일의 전기세

scikit-learn 라이브러리를 사용하여 선형회귀(Linear Regression) 방식으로 예측을 수행했습니다. 실제 데이터를 바탕으로 2070년까지의 예측값을 출력했습니다.

ityrannosaurus.github.io

728x90

저작자표시 비영리 변경금지

'IT > JavaScript' 카테고리의 다른 글

[CSS] 미디어쿼리 Media Query 적용하기 (사이즈 분기점 기준 px, 테스트 방법) (1)	2024.01.07
[CSS] 버튼 CSS 효과 (입력 input 칸, 드롭다운 dropdown 메뉴 꾸미기) (2)	2024.01.06
[JavaScript] Chart.js 차트 구현하기 (사용자가 input칸에 연도 year를 입력했을 때 차트 색 변하는 효과 구현하기) (증감률 계산 함수 구현, 숫자만 입력 가능) (3)	2024.01.05

🦖 ITyranno 아이티라노

[CSS] 이미지 스크롤 고정 효과 (페이지 스크롤 시 이미지 고정, background-attatchment)

CSS 효과 (페이지 스크롤 시 이미지 고정, background-attatchment)

구현 화면

작성 코드

'IT > JavaScript' 카테고리의 다른 글

티스토리툴바

[CSS] 이미지 스크롤 고정 효과 (페이지 스크롤 시 이미지 고정, background-attatchment)

CSS 효과 (페이지 스크롤 시 이미지 고정, background-attatchment)

구현 화면

작성 코드

'IT > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바