묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
모바일 화면 최적화 방법 질문드립니다!
선생님, 안녕하세요!모바일 화면에서도 비율을 유지하면서 반응형으로 동작하게 만드는 것이 가능할까요? 여러 방법을 시도해 보았는데, 해결이 잘 안 돼서 이렇게 질문을 남깁니다. 아니면 차라리 모바일 전용 SVG를 따로 만들고, PC 버전에서는 display: none으로 처리한 후 모바일일 때만 보이게 하는 방식이 더 나을까요?조언 부탁드립니다!
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
key.svg 이미지
안녕하세요 !강의를 열심히 따라가고있는 학생입니다:)key.svg 가 데이터 폴더에 있긴한데 강사님이 직접 자르신 키 사진(쇠 모양이없음) 과는 다르던데,저는 어도비 일러스트 유료버전이없어서 그런데 어떻게 해야할까요 ?
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
Vue.js 적용 방법
안녕하세요. 강의 정말 재밌게 보았습니다 :)강의를 듣고 Vue2에 적용하려 하니 해당 에러가 발생합니다.js를 import해서 사용하는 것 만으로는 제약이 있는 것인가요..?😥😥
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
강사님 vscode 폰트와 색상이 뭔가요
폰트와 폰트 색상이 예뻐서 그러는데어떤거 사용 하나요?그리고 vscode 다크모드에서도 폰트 색상이 동일하게 적용 되나요?키보드 정보도 알고 싶습니다
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
2:20분 이해가 가지 않습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 100px; height: 100px; background: coral; transition: 1s; } body { margin: 0; } .box-action { transform: translateX(300px); background: blue; } </style> </head> <body> <div class="box"></div> <script> const box = document.querySelector(".box"); box.addEventListener("click", () => { box.classList.toggle("box-action"); }); </script> </body> </html> 안녕하세요 강사님.toggle 해서 클릭 하면 상자가 300px 인 곳으로 이동하는 건 이해 하였는데, 다시 클릭 하면 왜 기존의 위치로 가는건가요? css에서는 가로 세로 100px 이라고만 했는데....이해가 가지 않습니다.
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
web animation api를 통한 apple page
안녕하세요강의를 들으면서 궁금한 사항이 생겨서 질문드립니다!1분 코딩님께서 제작하신 강의중에 apple페이지를 클론 코딩하는 강의가 있는데web animation API를 통해서는 똑같이 만들수없을까요??그리고 web animation API를 통해서 canvas를 조작할수는 없을까요?
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
리액트에서 scroll-timeline.js 불러오는 법
현재 리액트 프로젝트에 web animations api를 도입하려고 하는데요. 라이브러리는 react-web-animation을 쓰고 있습니다. 그런데 강의에서 사용한 scroll-timeline.js를 그대로 가져와서 import 하였더니 이러한 에러가 발생합니다.어떻게 에러를 해결할 수 있을 까요?
-
해결됨웹 애니메이션의 새로운 표준, Web Animations API
특정 시점에 자바스크립트 호출은 어려울까요?
우선 좋은 강의에 감사드립니다. scroll-timeline을 바탕으로 새로운 프로젝트를 작성하고 있는데요,특정 시점에 요소 opacity 조절로 노출되게끔 처리했습니다.그런데 이 노출되는 시점에서부터는 특정 스크롤까지 css keyframes로 혼자 깜빡깜빡 거리는 효과를 주고싶은데요. 자바스크립트로 class를 add / remove 해야할지 고민입니다.더 효율적이거나 좋은 방법이 있을까요?
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
section04 - 각각의 객체에 개별 애니메이션 적용하기
선생님 안녕하세요 !강의를 듣는 중 궁금한 점이 있어 질의 드립니다.section04 - 각각의 객체에 개별 애니메이션 적용하기 영상에서let bar를 for문 밖에 선언하고 for문 안에서 document.createElement를 할당한 이유가 있을까요?for문 안에 같이 선언하면서 할당하는 코드와 어떤 부분이 다른지 잘 모르겠어서 질의 드립니다. const bars = []; let bar; for(let i = 0; i < 30; i++){ bar = document.createElement('div'); bar.classList.add('bar'); barContainer.appendChild(bar); bars.push(bar); }
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?
안녕하세요. 강의 잘 듣고 있습니다. scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, 부드러운 모션 효과를 위한 옵션이 있을까요?스크롤 한번 했을 때. 스르륵 멈출 수 있게요.
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
scroll-timeline.js 파일
안녕하세요!강의 재밌게 잘 보고 있습니다 :Dscroll-timeline.js 파일은 어디서 가져오신 건가요?세팅부터 혼자서 해보려고 했는데scroll-timeline 저장소여기서 아무리 찾아봐도 안 보이네요..!Usage에 보면 import를 dist 폴더에서 scroll-timeline.js를 가져오는 것 같은데 dist 폴더도 안 보이고 src 폴더에 scroll-timeline-base.js도 아닌 것 같아서 질문 남깁니다..!또, scrollOffsets에 넣는 옵션들은 어떻게 확인하나요? README에는 new CSSUnitValue 이것밖에 안 보이는데 강의에서는 target, edge, threshold 속성들도 쓰셔서 어디서 확인하고 쓰시는지 너무 궁금합니다..!
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
선생님 Section4에 제목 오타난것같습니다!
Starfiled => Starfield 인 것 같습니다!
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
keyframeEffect를 찾을 수 없다고 나와요
안녕하세요 GroupEffect 수강중에 이런 에러가 떠서요 - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
제이쿼리 animate()와는 다른걸까요?
ㅡ
