Moon의 개발 일기

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

안녕하세요! 이번에는 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 을 주어서 패럴랙스가 동작할 때 구분선을 넣어주었습니다. 이렇게해주니 스크롤 할 때 흑백으로 처리된 사진이 원본 사진으로 변하는 것처럼 보여서 아주 멋지네요!

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

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

순수 CSS와 마우스 hover 효과를 이용해 위 사진의 효과를 만들어보겠습니다.

위 효과를 꾸며내는데에 사용한 개념은 이렇습니다.

- flex-box 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [flex-box 설명 보러가기]

- transform 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [transform 설명 보러가기]

- box-shadow 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [box-shadow 설명 보러가기]

- position 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [position 설명 보러가기]

준비가 되었으면, 먼저 첫 번째 준비물인 HTML부터 준비해봅시다.

우리는 바탕이 되어줄 #wrapper 를 만들고 그 안에 사각형을 총 4개를 만들겁니다. 색깔은 순서대로 파랑, 빨강,초록, 보라색으로 정했습니다 !

그 다음으로는 각 사각형을 만들어보겠습니다. 여기서 이제 flex-box가 사용이되니 어떤식으로 사용해서 정렬을 하는지 유심히 봐주세요 !

transform을 이용해 사각형을 45도로 기울이고 살짝 비스듬히 누워있는 형태로 만들었습니다. 

box-shadow 효과를 사용하면 어느정도의 입체감을 느끼게 해줄 수 있답니다.

다음은 마우스 hover 효과가 발생할 때 사각형을 위로 띄워줄 건데요. 여기서 transform이 어떻게 사용되는지 잘 주의해서 보시기 바랍니다!

여기서 주의할 점은, hover 효과에 적용할 transform 은 원래 적용된 효과를 그대로 가진 상태에서 다른 무언가를 추가해야한다는 점입니다. 

hover 효과가 들어갔을 때 적용할 스타일은 기존의 스타일과는 전혀 다른 것으로 인식되기때문에 기존 효과를 그대로 사용하고싶다면 그대로 가지고와야 합니다.

여기서 한 가지 굉장히 중요한 점이 있습니다. transform 에 사용된 효과를 봐주세요. 우리가 바라보는 시점에서는 Y 축 방향으로 끌어올리기만하면 되는데, 왜 translateY가 아니라 translate를 사용한 것일까요?

위의 사진을 봐주세요.

transform을 이용해서 도형을 비틀었다면, 더 이상 X 축과 Y 축은 우리가 알고있는 수평 수직의 선이 아닙니다. 비틀어진 만큼 각 축 또한 틀어지게 되는데, 얼마만큼 틀어졌는지를 감안해서 도형을 움직여줘야 합니다 !

이제 마지막으로, 여러 겹으로 보일 수 있게 도형을 추가하고 같은 효과를 적용시켜 보겠습니다.

새롭게 추가된 효과들 중에서 .child1 과 .child2 에 적용된 skew, translate 효과를 주목하세요.

왜 부모에 적용된 효과랑 다를까요? 

그 이유는 바로, 자식이기때문에 부모에 적용된 효과를 상속받기 때문입니다. 만약에 형제 관계였다면 효과들을 똑같이 적용시켜줘야 했겠지만, 부모-자식으로 연결되었기때문에 부모에게 적용된 효과를 그대로 물려받습니다. 그렇기때문에, 부모에게 적용된 효과에서 계산해서 적용을 해줘야합니다.

자 이렇게 순수 CSS로 표현할 수 있는 멋진 효과를 알아봤습니다. 모던한 느낌의 이미지와 함께 사용한다면 더욱 더 사이트를 세련되게 꾸밀 수 있을 것 같네요!

오늘도 다들 즐코딩하세요~

※ 해당 포스트는 http://100dayscss.com/의 4번 글의 설명을 위해 작성자가 다시 재구성한 포스팅입니다.

※ 무단 스크랩은 허용하지 않습니다.

※ 

이번에는 CSS 효과만을 이용해 여러 개의 원이 겹치면서 나타났다 사라지는 효과를 연출해 보겠습니다.

먼저 구현하기에 앞서, 선행적으로 알고 있어야 할 것들이 몇 가지 있습니다.

See the Pen wxxpbJ by Munkyu Yang (@moonformeli) on CodePen.

배경이 되는 .wrapper div를 설정했습니다. 그 안에 3개의 자식 div를 만들었는데요. 얘네들은 이제 각 다른 사이즈의 원이 될 예정입니다! 

그 다음에는 자식 div로 설정된 .circle1, .circle2, .circle3 에 대한 기초 작업을 진행해볼게요.

See the Pen MBBrNX by Munkyu Yang (@moonformeli) on CodePen.

자, 화면 중앙에 원이 3개가 만들어졌습니다! 그림자는 box-shadow: 7px 7px 10px 1px rgba(0,0,0,0.5); 

이 코드가 그림자를 생성하고 있습니다. 이제 여기서 원이 늘어났다 줄어들었다 하는 효과를 넣어보겠습니다.  이 효과는 CSS의 Animation 효과를 사용할 예정이니, 아직 Animation 이 익숙하지 않으시다면 사용법을 먼저 숙지하시고 보시면 더 좋을 것 같습니다. ^^

See the Pen MBBQKq by Munkyu Yang (@moonformeli) on CodePen.

코드를 보시면 @keyframes 를 이용해 애니메이션을 3개를 만들었습니다. 각 애니메이션의 상태는 0 ~ 100%를 기점으로 여러 개의 상태 중단점을 만드실 수 있어요. 예를 들어서@keyframes scale1 을 봅시다! 이 애니메이션은 중단점이 2개가 있네요. 0%는 애니메이션의 시작, 100%는 애니메이션의 끝을 의미합니다. 애니메이션이 시작할 때 transform: scale(0) 으로 시작하고 애니메이션이 끝날 때는 transform: scale(1) 이 될 수 있도록 CSS는 애니메이션에 연결된 DOM의 상태를 조절합니다.

그렇다면 중단점이 3개 이상인 경우는 어떻게 할까요? @keyframe scale2 를 예시로 보시면 됩니다. 0% 일 때와 40% 일 때의 상태값이 같네요? 그리고 그 사이엔 어떠한 중단점도 없습니다. 즉, 0% 일 때 transform: scale(0) 으로 출발했고 그 다음 중단점에 걸려있는 상태 변화값으로 서서히 변하기 시작하려고 하는데, 그 다음 중단점인 40%에 걸려있는 코드가 마침 0%에 걸린 코드와 같습니다. 결국 transform: scale(0) 같은 코드가 계속 실행이 되니 우리 눈에는 변화가 없는 것처럼 보이는 것이죠. 그러다가 40%를 넘어가는 시점부터는 100%에 걸린 코드 내용이 다르다보니 우리 눈에 인지가 되기 시작하는 것입니다.

즉, 애니메이션의 중단점으로 애니메이션 1 cycle의 속도를 조절할 수 있습니다.

그 다음에는 이제 애니메이션을 걸어보겠습니다.

See the Pen LBBQOG by Munkyu Yang (@moonformeli) on CodePen.

짠, 금방 만들어졌죠? .circle1에 걸린 애니메이션을 살펴보겠습니다. 

animation: scale1 2s infinite alternate;

이 코드의 의미는, @keyframes scale1 애니메이션을 2초간 수행하고, alternate는 애니메이션이 정방향으로 실행이 된 후, 그 다음 차례에는 역방향으로 다시 실행한다는 의미입니다. infinite의 의미는 애니메이션을 무한 반복 한다는 뜻입니다. 즉, "scale1 애니메이션을 2초동안 수행하되, 애니메이션을 무한히 반복해서 실행하고, 매번 번갈아가면서 정방향과 역방향으로 애니메이션을 수행한다"는 의미입니다.

이번에 다뤄본 애니메이션은 비교적 쉬운 애니메이션이었습니다. 다음에도 더 재밌는 효과로 풀이를 해볼게요.