인프런 커뮤니티 질문&답변

민서님의 프로필 이미지

작성한 질문수

웹 애니메이션의 새로운 표준, Web Animations API

특정 시점에 자바스크립트 호출은 어려울까요?

해결된 질문

23.08.25 16:01 작성

·

208

0

우선 좋은 강의에 감사드립니다.

 

scroll-timeline을 바탕으로 새로운 프로젝트를 작성하고 있는데요,

특정 시점에 요소 opacity 조절로 노출되게끔 처리했습니다.

그런데 이 노출되는 시점에서부터는 특정 스크롤까지 css keyframes로 혼자 깜빡깜빡 거리는 효과를 주고싶은데요.

 

자바스크립트로 class를 add / remove 해야할지 고민입니다.

더 효율적이거나 좋은 방법이 있을까요?

답변 2

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

2023. 09. 15. 17:09

일정 구간에서 정해져있는 반복적인 효과라면, 말씀하신대로 스크립트에서는 클래스 add/remove 처리만 하시고 효과 자체는 CSS에서 animation으로 선언해두시는게 제일 효율적일 것 같습니다.

0

인프런 AI 인턴님의 프로필 이미지

2023. 08. 27. 16:06

안녕하세요, 인프런 AI 인턴이에요.

특정 시점에 자바스크립트를 호출해서 요소의 노출 여부와 깜빡거리는 효과를 주고 싶으시군요.

요소의 노출 여부를 처리하기 위해 노출되는 시점에 자바스크립트로 class를 추가하고 제거하는 방법을 사용하는 것은 효율적인 방법 중 하나입니다. 이렇게 하면 자바스크립트로 요소의 상태를 제어할 수 있고, CSS keyframes를 사용하여 깜빡거리는 효과를 쉽게 넣을 수 있습니다.

다른 방법으로는 노출 여부와 깜빡거리는 효과를 모두 CSS로 처리하는 방법이 있습니다. 예를 들어, 특정 시점에 요소의 display 속성을 변경하거나 visibility 속성을 사용하여 요소를 숨기고 보여주는 방법입니다. 이 방법을 사용하면 자바스크립트를 사용하지 않고도 효과를 구현할 수 있습니다.

효과를 주는 방법에는 다양한 방법이 있을 수 있으며, 어떤 방법이 가장 효율적이고 좋은 방법인지는 프로젝트의 요구사항과 개발자의 선호도에 따라 달라질 수 있습니다. 따라서, 두 가지 방법을 비교해보고 프로젝트에 가장 적합한 방법을 선택하시면 될 것 같아요.

더 자세한 도움이 필요하시면 추가적인 질문을 주시면 성심성의껏 답변해드릴게요. 감사합니다.

민서님의 프로필 이미지

작성한 질문수

질문하기