CSS 애니메이션 효과:: 패럴랙스(Parallax) 효과로 멋진 배경 만들기

이번 실습을 통해서 만들어진 결과를 찍은 스크린샷

안녕하세요! 이번에는 CSS 에서 정말 정말 많이 사용되고 있는 Parallax 효과를 이용해서 표현할 수 있는 멋진 효과에 대해 설명드리려고 합니다.

먼저, 이 번 과정에서 사용되는 개념은 다음과 같습니다. 모르시는 분들은 기초 개념을 먼저 숙지하고 오시면 좋을 듯 합니다!

• Parallax 란 무엇인가? W3Schools 설명 보러가기

• background 속성에 대해서 알아 보기

• background-position 설명 보러가기 - W3Schools

• background-size 설명 보러가기 - W3Schools

• background-repeat 설명 보러가기 - W3Schools

이번 효과는 간단하니 바로 시작할게요!

먼저 바탕이되는 div부터 만들어봅시다.

이미지 2장을 사용하기에 앞서, 각 이미지를 담을 div를 만들고 id 값을 각각 top, bottom 으로 정했습니다.

배경을 살짝 회색빛으로 만들어 분위기를 냈습니다. 

다음은 배경이 될 이미지를 로드합니다.

이미지가 뭔가 번잡해보이네요.

바로 background-image 로 입힌 이미지에 대한 추가 속성을 설정해주지 않았기 때문입니다.

이미지 추가 속성들을 적용시킨 결과를 보겠습니다.

결과가 제법 분위기 있게 나왔네요!

여기서 패럴랙스를 가능하게 하는 것은 background-attachment: fixed; 속성입니다. 이 속성을 사용해주면 스크롤을 할 때 스크롤에 딸려 올라가는게 아니라 뒷 배경이 천천히 움직이는 것처럼 동작합니다.

border-bottom 을 주어서 패럴랙스가 동작할 때 구분선을 넣어주었습니다. 이렇게해주니 스크롤 할 때 흑백으로 처리된 사진이 원본 사진으로 변하는 것처럼 보여서 아주 멋지네요!

이처럼 패럴랙스를 사용하면 간단하면서도 아주 멋진 효과를 기대할 수 있습니다.

그럼 오늘도 모두 즐코딩하세요~