1. 전역버튼 스타일
요소를 배치할 때, 배치되는 요소가 다른 요소와 묶음이라고 판단된다면 묶음을 기준으로 안에서 배치할 수 있게 만들자.
<html />
<div class="title">
<img
src="./images/visual_title.png"
alt="STARBUCKS DELIGHTFUL START TO THE YEARS"
/>
<a href="javascript:void(0)" class="btn btn--brown">자세히 보기</a>
</div>
<css />
.visual .title {
position: absolute;
top: 88px;
left: -10px;
}
.visual .title .btn {
position: absolute;
top: 259px;
left: 173px;
}
2. 순차적으로 요소 보이기
<javascript />
const fadeEls = document.querySelectorAll(".visual .fade-in");
fadeEls.forEach(function (fadeEl, index) {
gsap.to(fadeEl, 1, {
delay: (index + 1) * 0.7,
opacity: 1,
});
});
배열의 index를 이용하여 순차적으로 delay를 주는 로직
'카카오테크캠퍼스 > 선택과정' 카테고리의 다른 글
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 고정 이미지 배경 (0) | 2023.05.07 |
|---|---|
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 유튜브 영상 배경 (0) | 2023.05.07 |
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 요소 슬라이드 (0) | 2023.05.07 |
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 헤더와 드롭다운 메뉴 (0) | 2023.05.07 |
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: Settings (0) | 2023.05.07 |
