본문 바로가기

강의30

패스트캠퍼스 챌린지 22일차 - Part 1. 스타벅스 예제(10) 29. 스크롤 위치 계산 애니메이션 (1) 이미지 동그랗게 나오게 하기 border-radius: 50%; scrollMaginc cdn const spyEls = document.querySelectorAll('section.scroll-spy'); spyEls.forEach(function (spyEl) { new ScrollMagic.Scene({ // 특정한 요소가 보이는 지 감시하는 메소드 triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정 triggerHook: 0.8, // 뷰포트 시작이 0, 뷰포트 끝이 1 // 0.8 지점에 걸리면 트리거가 돼서 실행된다는 뜻 }) .setClassToggle(spyEl, 'show') // 넣었다뺐다 제어 .addTo(new.. 2023. 3. 13.
패스트캠퍼스 챌린지 21일차 - Part 1. 스타벅스 예제(9) 28. 3D 애니메이션 요소에 마우스를 hover하면 요소가 뒤집히며 뒷 내용이 나오는 애니메이션을 만들었다. 기본적인 3D 애니메이션 원리 .container { width: 100px; height: 100px; perspective: 300px; /* 3차원 느낌나게 */ } .container .item { width: 100px; height: 100px; border: 4px solid red; box-sizing: border-box; font-size: 60px; backface-visibility: hidden; /* 뒤집혔을 때 안 보이게 */ transition: 1s; /* 자연스러운 전환 효과 */ } .container .item.front { position: absolute;.. 2023. 3. 12.
패스트캠퍼스 챌린지 20일차 - Part 1. 스타벅스 예제(8) 26. 유튜브 영상 배경 - 반복 애니메이션 // 범위 랜덤 함수(소수점 2자리까지) function random(min, max) { // `.toFixed()`를 통해 반환된 문자 데이터를, // `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환 return parseFloat((Math.random() * (max - min) + min).toFixed(2)); } function floatingObject(selector, delay, size) { // gsap.to(요소, 시간, 옵션); gsap.to( selector, // 선택자 random(1.5, 2.5), // 애니메이션 동작 시간 { // 옵션 y: size, repeat: -1, // 무한반복 yoyo: tru.. 2023. 3. 11.
패스트캠퍼스 챌린지 19일차 - Part 1. 스타벅스 예제(7) 23. 유튜브 영상 배경 - 리워즈 24. 유튜브 영상 배경 - Youtube iframe API (1) 가로 세로 비율 맞추기 .container{ width:500px; background-color: royalblue; } .container .item{ width: 100%; height: 0; padding-top: 50%; /* 패딩은 기본적으로 요소가 늘어나는 속성을 가짐 부모 요소의 width를 기준으로 50% 잡기 때문에 250px이 됨 .container의 width값이 바뀌어도 계속 2대1 비율 유지 */ } 이런 방식은 비메오나 유튜브 영상을 가져올 때 좋음 padding-top: 56.25%; → 16대9 비율로 항상 유지 유튜브 비디오 섹션 /* YOUTUBE VIDEO */ ... 2023. 3. 10.