안녕하세요, 좋은 강의 제공 해주셔서 감사드립니다. section.about 영역 마크업 강의 수강 중 궁금한게 있어 질문 드립니다. img 태그를 감싸실 때 p 태그를 사용 하셨는데 따로 이유가 있을까요? UI상 리스트에서 하나의 문단으로써 자리하기에 그런것일까요? <li> <a href="#"> <p class="img"> <img src="img/about_1.jpg" alt="회사소개" /> </p> <div class="text"> <h3>회사소개</h3> <p>삶의 가치를 높이는 기술기업, 한화 케미칼</p> <p class="more">more</p> </div> </a> </li>
transform: translateZ(-490vw); /* 줌아웃 */ .wall-front-a{transform: translateZ(300vw);} .wall-front-b{transform: translateZ(50vw);} .wall-front-c{transform: translateZ(-200vw);} .wall-front-d{transform: translateZ(-500vw);} 이렇게 translateZ 에 px, rem , % 이가 아닌 vw 를 사용하신 이유가 가로축 을 기준으로 원근감을 주기 위해서 이신게 맞을까요?
안녕하세요 강의들으면서 제가 제대로 이해한게 맞는지 궁금해서 문의 드립니다. 강의에서 .house{ width: 100vw; height: 100vh; transform-style: preserve-3d; } 이렇게 css 를 지정해주신 이유가 스크롤을 했을때 house 안에 있는 자식요소들이 꽉차게 보이기 위해서 그렇게 지정하신게 맞으신걸까요?
현재 리액트 프로젝트에 web animations api를 도입하려고 하는데요. 라이브러리는 react-web-animation을 쓰고 있습니다. 그런데 강의에서 사용한 scroll-timeline.js를 그대로 가져와서 import 하였더니 이러한 에러가 발생합니다. 어떻게 에러를 해결할 수 있을 까요?
https://www.inflearn.com/questions/840104/%EC%B5%9C%EC%8B%A0%EB%B2%84%EC%A0%84%EC%9C%BC%EB%A1%9C-%ED%95%98%EA%B3%A0-%EB%8B%A4-%ED%95%B4%EB%B4%90%EB%8F%84-bodymovin-%EC%97%90-%EC%95%84%EB%AC%B4%EA%B2%83%EB%8F%84-%EC%95%88%EB%96%A0%EC%9A%94 이전에 문의글처럼 저도 동일 현상 발생합니다. 브라우저, AE, bodymovin 모두 최신 버전으로 다운받아 적용해보았는데 composition을 못불러들입니다. 더 이상 진행이 안되는데 어떻게 해야할까요?
안녕하세요. 마우스 인터렉티브를 하다가 transition: ease-in-out 궁금증이 생겼습니다! 마우스의 궤적을 따라서 이미지가 잔상처럼 늘어나는 것으로 보이게 하고 싶어서 circle보다 작은 크기의 도형을 만들어 ease in out 에 초 차이를 주었는데 원하는 효과가 나타나지 않았습니다. 해당 함수를 사용하면 초에 따라서 마우스 포인터를 따라오는 속도가 달라지는 줄 알았는데 제가 잘못 이해한 걸까요? 혹시 몰라 transition-duration/delay 함수도 사용해 봤는데 적용이 안 됐습니다.. 마우스를 움직일때는 잔상이 스프링처럼 길게 늘어지다가 멈추면 줄어드는 방향으로 하고 싶은데 이런 변형 관련한 질문은 어려울까요? 게이트박스와 mouseenter를 이용해서 크기가 줄어드는 걸로 활용 해보았는데 게이트 박스 외의 부분에 마찬가지로 적용하는게 어려워서 질문 드립니다..! 감사합니다.
강의 따라해서 만든 three.js 프로젝트를 제가 가지고 있는 spirng 프로젝트의 jsp페이지에서 include?? 하는 식으로 가져와서 사용하는 것이 어렵나요? 호환이나 이런부분에 대해서 해결할 줄알아야 가능한걸까요?ㅠㅠ spring 프로젝트를 톰캣에서 돌리고 메뉴를 클릭하였을 때 three.js 강의로 만든 페이지가 렌더링 되서 나왔으면 좋겠거든요. 가능한 걸까요? 어떤식으로 하면 될지 힌트 좀 주실 수 있을까요?
우선 좋은 강의에 감사드립니다. scroll-timeline을 바탕으로 새로운 프로젝트를 작성하고 있는데요, 특정 시점에 요소 opacity 조절로 노출되게끔 처리했습니다. 그런데 이 노출되는 시점에서부터는 특정 스크롤까지 css keyframes로 혼자 깜빡깜빡 거리는 효과를 주고싶은데요. 자바스크립트로 class를 add / remove 해야할지 고민입니다. 더 효율적이거나 좋은 방법이 있을까요?
안녕하세요 1분 코딩님 완강하고 저 만의 포트폴리오를 만들어보려고 노력하고 있습니다. 다만 제가 이쪽 분야는 잘 몰라서 어떻게 올려야 할지 감이 안 잡힙니다. 일단 vultr 에서 서버를 구하고 가비아에서 도메인까지 1년으로 구매했는데 해도 html 하나 올려서 외부에 뿌리는 것도 어렵네요. 혹시 어떻게 해야 할지 조언을 구해도 될까요?
선생님 안녕하세요 ! 강의를 듣는 중 궁금한 점이 있어 질의 드립니다. 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); }
오늘 강의 시작했는데 실습 예제 다운 받으려고 하니 저렇게 나오고 클릭이 안되네요 ㅜ 해결 방법 있을까요? 엣지 크롬 파이어폭스 셋다 저러네요 브라우저 보안 설정 떄문인가 해서 보안도 끄고 들어가봐도 저래요 아 그리고 실습예제 codepen 링크들어가서 보면 버튼눌러도 애니메이션이 반응이 없던데 .. 왜그런지 이유를 모르겠어요 다 그런건 아닌거같고 처음에 motionpath 예제만 그런거 같더라구요
안녕하세요! 강의 재밌게 잘 보고 있습니다 :D scroll-timeline.js 파일은 어디서 가져오신 건가요? 세팅부터 혼자서 해보려고 했는데 scroll-timeline 저장소 여기서 아무리 찾아봐도 안 보이네요..! Usage에 보면 import를 dist 폴더에서 scroll-timeline.js를 가져오는 것 같은데 dist 폴더도 안 보이고 src 폴더에 scroll-timeline-base.js도 아닌 것 같아서 질문 남깁니다..! 또, scrollOffsets에 넣는 옵션들은 어떻게 확인하나요? README에는 new CSSUnitValue 이것밖에 안 보이는데 강의에서는 target, edge, threshold 속성들도 쓰셔서 어디서 확인하고 쓰시는지 너무 궁금합니다..!
