animation3 CSS - 배경 이미지 animation 으로 이동시키기 updated 02/21/24 페이지를 만드는 도중 로딩이 뙇뜨면 배경이미지를 스르륵 올려주는 효과가 필요하다. 이럴 때 당황해하지 말고 css animation 속성을 사용해 구현해보자 결과화면 미리보기 CSS - 배경 이미지 animation 으로 이동시키기 일단 이미지태그에 클래스 이름을 활용해서 css 로 animation 을 사용해보자 // 이미지 태그가 있다. animation 속성은 따로 정리할 필요가 있을 것 같아 나중에 따로 포스팅을 정리해야겠다는 생각을 해보았다. ** 참고로 transfrom: translateY(의 값이) - 이면, 위로 + 이면 아래로 움직인다. 방법1 .building-img { position: absolute; // 일단 위치지정은 필수지! top: 500px.. 2022. 7. 3. React(71) 마우스 이벤트로 호버시 애니메이션 넣기 메뉴 영역에 마우스 호버시 메시지 박스가 나타나는 기능을 만들어 보려고 한다. 단, css 호버기능을 사용하지 않고, MouseEnter / MouseLeave 이벤트를 사용하여 호버 기능을 구현하였고, Transition / Animation 속성을 이용하여 애니메이션 기능을 구현하였다. 자 그럼 만들러 가보자. 결과화면 미리보기 메뉴 영역에 마우스 오버시 애니메이션과 함께 호버메시지가 등장한다. React(71) 마우스 이벤트로 호버시 이동 애니메이션 넣기 처음에 useState 로 호버의 상태를 알려줄 변수를 선언해준다. const [hover, setHover] = useState(''); 위에서 선언한 변수(hover) 을 가지고 마우스 이벤트를 걸어주자 이때 호버메시지는 변수(hover)의 값.. 2022. 5. 22. React(48) 타입스크립트 - 토글 메뉴에 animation 효과주기 타입스크립트와 리액트로 메뉴 접고 펼치기 기능을 구현 중이다.토글까지는 아주 쉽게 구현을 하였지만, 자연스럽게 펼쳐지는 애니메이션을 적용하려니 아~주 골치가 아팠다. ㅠㅠ 동적인 코드에 애니메이션 기능은 처음이라 한참 헤매였다. 하지만 언제나 그렇듯, 항상 어렵사리 해결을 하면 몇줄의 코드로 끝나게 된다. 조금 허무하기도 하지만 뿌듯하다.자 그럼 이제 만들어보자. 이슈- @key frame 을 적용한 animation 속성을 이용하려 하였으나 양방향 애니메이션이 적용이 되지 않았다.- 토글 기능을 적용한 메뉴는 동적으로 받아온 api 객체를 사용하여 보여준다. 즉 동적으로 height 속성을 적용하려니 동작이 되지않았다. ex) 이런식으로 height : calc(100% - 20px) React(48.. 2021. 9. 14. 이전 1 다음 반응형
