스크롤시 엘리먼트에 애니메이션 추가하기

HTML 스크롤 시 애니메이션 추가 CSS @keyframes animation-active { 0%{opacity: 0; position:relative; top:50px;} 100%{opacity: 1; position:relative; top:0;} } .animation{opacity: 0;} .animation-active{animation: animation-active 1 .5s; animation-fill-mode:forwards;} JS $( function(){ const Elements = $('.animation'); function scrollSize(){ const scrollTop = $(document).scrollTop(); // 스크롤TOP 값 const windowH =..

2022.05.20

CSS3 animation

CSS3 animation CSS의 속성을 이용하여 애니메이션을 표현 CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다. CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션보다 다음 세가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다. 자바스크립으를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못했다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링된다. 브라우저는 애니메이션의 성능을 효율적으로 최적화 할 수 있다. 예를 들어 현재 안보..

2021.11.18