<!-- VISUAL -->
<section class="visual">
<div class="inner">
<div class="title">
<img src="./images/visual_title.png" alt="STARBUCKS DELIGHTFUL START TO THE YEARS" />
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
<img src="./images/visual_cup1.png" alt="new OATMEAL LATTE" class="cup1 image" />
<img src="./images/visual_cup1_text.png" alt="오트밀 라떼" class="cup1 text" />
<img src="./images/visual_cup2.png" alt="new STARBUCKS CARAMEL CRUMBLE MOCHA" class="cup2 image" />
<img src="./images/visual_cup2_text.png" alt="스타벅스 카라멜 크럼블 모카" class="cup2 text" />
<img src="./images/visual_spoon.png" alt="Spoon" class="spoon" />
</div>
</section>
/* VISUAL */
.visual {
margin-top: 120px;
background-image: url("../images/visual_bg.jpg");
background-position: center;
}
.visual .inner {
height: 646px;
background-color: #669900;
}
.visual .title {
position: absolute;
top: 88px;
left: -10px;
}
.visual .title .btn {
}
.visual .cup1.image {
position: absolute;
bottom: 0;
right: -47px;
}
.visual .cup1.text {
position: absolute;
top: 38px;
right: 171px;
}
.visual .cup2.image {
position: absolute;
bottom: 0;
right: 162px;
}
.visual .cup2.text {
position: absolute;
top: 321px;
right: 416px;
}
.visual .spoon {
position: absolute;
bottom: 0;
left: 275px;
}
.cup1.image
처럼 클래스가 붙어있는 것은 일치선택자라고 한다. // COMMON
.btn {
width: 130px;
padding: 10px;
border: 2px solid #333;
border-radius: 4px;
color: #333;
font-size: 16px;
font-weight: 700;
text-align: center;
cursor: pointer;
box-sizing: border-box;
display: block;
transition: .4s;
}
.btn:hover {
background-color: #333;
color: #fff;
}
/* 기존 버튼의 반전된 버튼 */
.btn.btn--reverse {
background-color: #333;
color: #fff;
}
.btn.btn--reverse:hover {
background-color: transparent;
color: #333;
}
버튼 위치
.visual .title {
position: absolute;
top: 88px;
left: -10px;
}
.visual .title .btn {
position: absolute;
top: 259px;
left: 173px;
}
이미지와, 텍스트는 같이 나타나야하기때문에 그룹으로 묶어주고자 html 코드 수정
<!-- VISUAL -->
<section class="visual">
<div class="inner">
<div class="title fade-in">
<img src="./images/visual_title.png" alt="STARBUCKS DELIGHTFUL START TO THE YEARS" />
<a href="javascript:void(0)" class="btn btn--brown">자세히 보기</a>
</div>
<div class="fade-in">
<img src="./images/visual_cup1.png" alt="new OATMEAL LATTE" class="cup1 image" />
<img src="./images/visual_cup1_text.png" alt="오트밀 라떼" class="cup1 text" />
</div>
<div class="fade-in">
<img src="./images/visual_cup2.png" alt="new STARBUCKS CARAMEL CRUMBLE MOCHA" class="cup2 image" />
<img src="./images/visual_cup2_text.png" alt="스타벅스 카라멜 크럼블 모카" class="cup2 text" />
</div>
<div class="fade-in">
<img src="./images/visual_spoon.png" alt="Spoon" class="spoon" />
</div>
</div>
</section>
css
.visual .fade-in {
opacity: 0;
}
1. `.fade-in` 라는 클래스를 가진요소는 투명도 0을 주어 안보이게 미리 만들어 놓음
1. 그 다음 자바스크립트로 순차적으로 보여지게끔 한다
JavaScript
gsap 라이브러리 이용
const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function (fadeEl, index) {
// gsap.to(요소, 지속시간, 옵션);
gsap.to(fadeEl, 1, {
delay: (index + 1) * .7, // 0.7, 1.4, 2.1, 2.7
opacity: 1
});
});
JS에는 반복적으로 작업하는 것이 많기 때문에 이렇게 자동화 시켜줄 수 있는게 중요하다고 한다. 그래서 gsap이라는 라이브러리를 이용해서 비주얼 섹션을 구현해봤다. 그리고 선택자 우선순위 개념으로 요소들 쌓임순서를 제어할 수 있는게 흥미롭다..