gsap의 화면을 특정 위치로 이동해주는 ScrollToPlugin, 강의의 3.6.0 버전을 사용했다. window.addEventListener( "scroll", _.throttle(function () { if (window.scrollY > 500) { // 뱃지 숨기기 // gsap.to(요소, 지속시간(s), 옵션) gsap.to(badgeEl, 0.6, { opacity: 0, display: "none", }); // 버튼 보이기 gsap.to(toTopEl, 0.2, { x: 0, }); } else { // 뱃지 보이기 gsap.to(badgeEl, 0.6, { opacity: 1, display: "block", }); // 버튼 숨기기 gsap.to(toTopEl, 0.2, { x..

html entities 화면에 라는 문자를 출력하고 싶은데.. 를 태그로 인식해서 출력할 수 없을 때 사용하는 html의 특수 기호! https://tools.w3cub.com/html-entities Character Entity Reference Chart - W3cubTools Character Entity Reference Chart, show you the character entity in one screen. easy to search and copy. tools.w3cub.com

ScrollMagic 현재 스크롤 위치를 계산하는 라이브러리, 강의에서 나온 2.0.8 버전을 사용했다. 특정 위치에 도달하면 애니메이션이 동작하게 만들고 싶을때 유용하다. const spyEls = document.querySelectorAll("section.scroll-spy"); spyEls.forEach(function (spyEl) { new ScrollMagic.Scene({ triggerElement: spyEl, triggerHook: 0.8, }) .setClassToggle(spyEl, "show") .addTo(new ScrollMagic.Controller()); }); Scene : 특정 요소를 감시하는 옵션 지정 triggerElement : 감시할 요소 triggerHook ..

앞 뒤 .container { width: 100px; height: 100px; perspective: 300px; position: relative; } .container .item { width: inherit; height: inherit; border: 4px solid red; font-size: 40px; box-sizing: border-box; backface-visibility: hidden; transition: 1s; } .container .item.front { position: absolute; transform: rotateY(0deg); } .container:hover .item.front { transform: rotateY(180deg); } .container .i..

.pick-your-favorite { background-image: url("../images/favorite_bg.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } background-attachment로 배경이미지를 고정하고 콘텐츠만 움직이도록 할 수 있다.(개인적으로 좋아하는 효과!)

Youtube iframe API 16:9의 화면 만들기 .container { width: 500px; background-color: royalblue; } .container .item { width: 100%; height: 0; padding-top: 56.25%; } https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers 애플리케이션에 YouTube 플레이어를 삽입합니다. developers.google.com var tag = document.createElement("scrip..

Swiper.js 슬라이드 효과를 주기 위한 라이브러리 swiper, 강의에서 나온 6.8.4 버전을 사용했다. 사용법은 다음과 같다. 1 2 3 // new Swiper(선택자, 옵션) new Swiper(".notice-line .swiper-container", { direction: "vertical", // 기본값은 horizontal autoplay: true, loop: true, }); 요소 가운데 배치 화면의 크기가 달라지더라도 요소를 가운데로 배치하기 위해서 쓰는 방법 .notice .promotion .swiper-container { width: calc(819px * 3 + 20px); height: 553px; background-color: orange; font-size: 3..

전역버튼 스타일 요소를 배치할 때, 배치되는 요소가 다른 요소와 묶음이라고 판단된다면 묶음을 기준으로 안에서 배치할 수 있게 만들자. 자세히 보기 .visual .title { position: absolute; top: 88px; left: -10px; } .visual .title .btn { position: absolute; top: 259px; left: 173px; } 순차적으로 요소 보이기 const fadeEls = document.querySelectorAll(".visual .fade-in"); fadeEls.forEach(function (fadeEl, index) { gsap.to(fadeEl, 1, { delay: (index + 1) * 0.7, opacity: 1, }); })..