18. [CSS] CSS Animation - 2

이번 포스팅은 이해가 잘 되지 않으실수 있습니다ㅠ 

글로 서술하려니 참 힘드네요...

오늘은 이전 포스팅에서 배웠던 내용들을 응용하여 더 자세한 애니메이션 기법에 대해서 알아보겠습니다. 

애니메이션에 대해서 아직 자세히 알지 못한다면, 이전 포스팅을 참고하셔도 좋을 것 같습니다!

 

https://daterminal.tistory.com/32

17. [CSS] CSS Animation - 1

 

애니메이션의 기본 제작 방식

1. 시작 화면 제작 2. 결과 화면 제작  3. 시작화면에서 결과화면에서 넘어가는 방아쇠 (hover) 제작  4. transition (서서히) 으로 효과 주기

크게 4가지로 구분 할 수 있었는데요!

오늘은 이를 응용하여 더 쓸만한 애니메이션을 제작해보도록 하겠습니다!

 

오늘의 Target

 

[hover 이전]

[hover 이후]

: 위에서 서서히 내려오는 가격표를 만들 수 있습니다. 

 

---

[HTML]

<div class="product-item">
	<div style='position: relative'>
		<div class='grey-wrap'>
			<div class='grey-box'>
				<p>120,000원</p>
			</div>
		</div>
		<img src='../이미지파일/백두산product1.JPG'>
	</div>
</div>

위의 HTML 코드는 현재 다음과 같이 구성되어 있습니다. 편의를 위해서 살짝씩 간격을 둔 것이지만 사실 겹쳐있죠!

 

근데, 오늘 만들 Target은 다음과 같이 구성해서는 구현 할 수 없습니다. 

 

CSS를 활용하여 다음과 같이 조정해야 합니다. 

 

 

 

 

 

 

 

 

 

 

grey-wrap (초록색 박스) 는 같은 위치에 위치 시키되,

grey-box는 product - item 위에 위치시켜야 합니다. 

 

 

 

 

 

 

 

 

 

 

 

 

이때, 사용자가 grey-wrap (초록색 박스) 를 클릭하면 다음과 같이 동작됩니다. 

이 모든 것들을 오직 CSS만을 활용하여 구현 할 것입니다!

 

---

 

[CSS]

 

1. grey-wrap

.grey-wrap {
    width : 100%;
    height : 100%;
    position: absolute;
    overflow: hidden;
}

▶ overflow : hidden 

: 밖에 삐져나온 부분들을 감춰줍니다. (빨간색 box 부분을 없애줌)

 

 

 

▶ position : absolute

: product-container 영역에 겹쳐서 붕 띄우게 하기 위해서 사용하는 문법입니다. 

 

2. grey-box 

.grey-box {
    position : relative;
    width : 100%;
    height : 100%;
    bottom: 100%;
    background-color: rgba(0,0,0,0.5);
    padding-top : 75%;
    transition: all 0.4s;
}

▶ grey-wrap에 감싸져 있는 grey-box를 생성하였고 

 

 

 

 

다음과 같은 배치를 하기 위해서

position : relative; 

bottom : 100% 를 사용하였습니다. 

 

 

 

 

▶ 또한 서서히 내려오기 위해서 transition 을 사용하였습니다. 

 

 

3. hover

/*grey-wrap에 마우스를 올렸을 때, grey-box가 bottom:100% -> 50% 로 이동*/
.grey-wrap:hover .grey-box{
    bottom : 50%;
}

이미지와 grey-wrap은 겹쳐있으므로 grey-wrap에 hover하면, grey-box가 아래로 내려오게끔 하는 코드입니다. 

bottom : 100% 를 50%로 조정하였으니 절반만 내려오겠죠?