티스토리 뷰

웹 개발

[CSS] 이미지 두 개 겹친 후 CSS Animation 넣기(대각선으로 들어오고 대각선으로 사라지기)

강태풍_719 2022. 7. 10. 23:14

하던 프로젝트 중 넣을 애니메이션을 찾는데 원하는 애니메이션이 없어서 직접 만들었다.  본 프로젝트는 React로 제작하였으나, HTML, CSS로 구현가능해서 HTML, CSS 로 제작하였다. 그림 사이즈는 300X300이고 마우스 호버시 원래 이미지는 대각선 아래로, 호버 이미지는 대각선 위에서 등장한다.  

Animation

 

<HTML>

<div class="parentDiv">
    <div style="position:absolute"><img class="hoverImage" src="./hoverImage.png"/></div>
    <img class="mainImage" src="./backgroundImage.png"/>
</div>

사진 2개를 같은 위치로 잡기 위해 parentDiv 안에 position absolute인 div, position relative인 img 태그가 위치해 있다. 보통 이 parentDiv를 복붙하면 position absolute인 div가 마음대로 움직일 경우 있는데 적절하게 위치 수정을 하면 된다. 

 

<CSS>

  .parentDiv{
    width: 300px;
    height: 300px;
    position:relative;
    overflow: hidden;
  }
  
  .parentDiv:hover .mainImage{
    opacity: 0;
    transform: translate(100%,100%);
    transition-delay: 0.5s;
  }
  
  .mainImage{
    position:relative; 
    transition-duration: 2s;
  }
  
  .hoverImage{
    position: relative;
    right : 300px;
    top: -300px;
    opacity: 0;
    transition-duration: 2s;
  }
  
  .parentDiv:hover .hoverImage{
    opacity: 1;
    transform: translate(300px,300px);
    transition-delay: 0.5s;
  }

하나씩 설명하자면, parentDiv를 hover 했을 경우 mainImage클래스와 hoverImage 클래스가 각각 오른쪽300px, 아래300px 로 움직이게 되는데, hoverImage 클래스는 왼쪽 300px, 위쪽으로 300px 이미 위치해 있기 때문에 원래 위치로 오게된다.

그리고 opacity도 변화를 주게되는데, transition-duration은 2초, transition-delay는 0.5초이다.

parentDiv에 overflow 속성을 hidden으로 해놨기에 parentDiv 밖으로 나가는 사진은 화면에 나오지 않게 된다.

처음에 이미지 태그에 hover를 걸었었는데, 이는 이미지 위 마우스를 조금이라도 움직이면 다시 애니메이션이 시작되는 오류가 발생하였다. parentDiv:hover로 변경 후 이 오류는 사라졌다.

 

 

<공부자료>

https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%ED%8A%B8%EB%9E%9C%EC%A7%80%EC%85%98-%ED%8A%B8%EB%9E%9C%EC%8A%A4%ED%8F%BC-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98

 

[CSS] 📚 트랜지션 & 트랜스폼 & 애니메이션

transition CSS3 Transition | PoiemaWeb 트랜지션(transition)은 CSS 프로퍼티 변경에 따른 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티 변경이 표시의 변화에 즉시 영향을 미

inpa.tistory.com

https://m.blog.naver.com/parangbee/221739061995

 

CSS 호버(hover) 시.. 다른 태그/엘리먼트에 CSS 적용 하기..

CSS 특정 태그 엘리먼트 호버 hover 시.. 다른 태그 엘리먼트에 CSS 꾸미기 적용 방법.. 어떤 특정 '...

blog.naver.com

 

'웹 개발' 카테고리의 다른 글

[HTML/CSS/Vanilla JS] 스크롤 애니메이션  (2) 2023.07.27
[React TS + CSS] 클릭시 퍼지는 버튼 메뉴 만들기  (0) 2023.02.12
[React + Typescript + Express + MySQL] 개발 환경 구축하기[1]  (0) 2022.08.19
[React + TS + Styled Components] 진행바 구현하기 (props로 진행수치 받기)  (0) 2022.07.15
[React] 프로젝트 제작부터 간단한 작업을 통한 이해  (0) 2022.07.04
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함