inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

해결된 질문

320

민서

작성한 질문수 1

0

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

 

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

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

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

 

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

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

HTML/CSS javascript 인터랙티브-웹 frontend web-animations-api

답변 2

0

1분코딩

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

0

인프런 AI 인턴

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

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

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

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

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

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

배리어블 목록 없음

0

7

2

Token 등록 방법 문의

0

9

1

3강 질문

0

9

1

74. 데이터 캐시 - 1 (이론) 강의 영상 누락

0

18

1

스크롤 이미지 영역 넘어갈시 가로로 스크롤이 안되여

0

133

1

vscode에서 svg파일 불러오기 질문

0

3760

1

모바일 화면 최적화 방법 질문드립니다!

0

228

1

key.svg 이미지

1

209

1

Vue.js 적용 방법

0

278

1

강사님 vscode 폰트와 색상이 뭔가요

0

648

2

2:20분 이해가 가지 않습니다.

0

284

1

web animation api를 통한 apple page

0

489

2

리액트에서 scroll-timeline.js 불러오는 법

0

726

1

section04 - 각각의 객체에 개별 애니메이션 적용하기

0

461

3

scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?

0

736

2

scroll-timeline.js 파일

0

544

1

선생님 Section4에 제목 오타난것같습니다!

0

389

1

keyframeEffect를 찾을 수 없다고 나와요

0

504

1

제이쿼리 animate()와는 다른걸까요?

0

402

1

scroll-timeline.js 파일을 cdn으로 불러 올 수 없을까요??

0

559

1

넓이를 %로 적용하긴 어려울까요?

0

434

2

scrollTimeline polyfill 에 관해서

0

812

1

아직 강의를 보진 않았는데

2

575

1

이 플러그인은 지원되지 않습니다. 어떻게 해결해야 되나요?

0

1151

2