Parallax만들기

 

오늘은 스크롤할 때 이러한 효과를 내는 Parallax를 만들어보았다.

Parallax를 공부한 이유는 나중에 포트폴리오 사이트를 만들건대, 그 포트폴리오 사이트에 이 기법을 사용할 것이기 때문이다.

 

만드는 방법은 정말 간단하다.

background-attachment: fixed;

 

정말, 더도말고 덜도 말고 이것만 알고 있으면 된다.

 

배경이 스크롤해도 함께 스크롤되지 않는다는 점이다.

여기서 우리가 

 

background-image로 이미지를 주고 그 이미지의

 

이렇게 코드를 작성해주면 이미지가 스크롤해도 이미지가 가만히 있는 효과를 줄 수 있게 되는 것이다.

이미지를 하나의 div에 담고

 

안에 값을 작성한 다음,

 

이렇게 해서 사진상에 가운데에 나타나게 해 주었다.

그런데 여기서 주의해야 할 점이 있는데

만약 우리가 HTML 문서 자체에서 img태그에 이미지를 넣었다고 했을 때, 이것은 작동하지 않을 것이다.

 

왜냐하면 background img랑 태그의 img랑은 다른 느낌이기 때문이다.

(내가 태그에 img를 주고 코드를 작성해 봤을 때 작동이 되지 않았다...)

 

아무튼! 이렇게 해서 Parallax를 구현해보았고, 조만간 포트폴리오 사이트를 만들어볼 건데,

다양한 레이아웃들을 공부해서 볼만한 사이트를 만들어 봐야겠다!