미미 공부/취미방

4주차.Chapter 3 원근감을 갖고 번갈아 회전하는 도형 회전할 두 도형을 동일한 부모 요소 내부에 넣는다. position: absolute로 도형 중 1개의 요소를 다른 층으로 옮겨 두 요소가 겹쳐지게 한다. 요소 중 1개를 transform : rotateY(-180deg);로 뒤집고 backface-visibility: hidden;으로 보이지 않게 설정한다. 두 요소와 동일한 크기로 부모의 크기를 설정한다.(그렇지 않으면 도형 바깥 영역에 hover 했을 때도 tranform이 동작한다.) 부모 요소에 perspective를 줘서 회전이 자연스러워 보이게 만든다. 스크롤이 내려가면 나타나는 요소 ScrollMagic은 뷰포트에 특정 지점과 요소를 지정해 놓으면, 지정 요소가 그 지점에 도달했..

4주차.Chapter 1 이미지 시간차로 나타나기 애니메이션 라이브러리 사용 forEach로 선택한 4개의 .fade-in요소에 익명 함수 코드를 반복한다. 라이브러리에서 제공하는 delay 속성으로 fade-in 1은 0.7, fade-in 2는 1.4, fade-in 3은 2.1, fade-in 4는 2.8초 뒤에 순서대로 opacity가 1로 바뀐다. 공지사항 공지사항 자동으로 넘어가기 swiper 라이브러리 https://swiperjs.com/get-started Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing na..