TIL 39 | ★다방 랜딩페이지8(섹션1-버튼,순차적애니메이션)
패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지 SECTION1의 코드(HTML, CSS, JS)를 review해보자
HTML
<!-- VISUAL -->
<section class="visual">
<div class="inner">
<div class="title fade-in">
<img src="./images/visual_title.png" alt="STARBUCKS DELITGHTFUL START TO THE YEAR" />
<a href="javascript:voild(0)" class="btn btn--brown">자세히 보기</a>
</div>
<div class="fade-in">
<img src="./images/visual_cup1.png" alt="NEW OATMEAL LATTEE" 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 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
- btn : 버튼은 공통 class .btn으로 묶어서 한 스타일로 제어할 수 있도록 해줌. CSS를 먼저 작성해준다음에 HTML class 추가하는 방식 사용해봄(부트스트랩 방식)
- box-sizing: border-box; : 요소의 크기 계산 기준. border-box로 설정해서 padding이 들어가거나 margin이 들어간 만큼 요소가 커지지 않도록 제어
- display: block; : a tag나 span tag에 버튼 부여해도 잘 나올 수 있도록 제어
- .btn.btn--reverse : 버튼 스타일 제어.
- header : z-index: 9; : 배지부분이 section 보다 항상 상위에 있을 수 있도록 배치 값 지정
- visual : header inner가 120px로 지정되어 있기 때문에 margin-top(바깥쪽 상단 여백)을 120px을 줘서 겹치치 않도록 함
.visual .inner .title에서 .inner와 같이 계속 반복되는 선택자는 생략 가능
- .visual .title : 위치상 부모요소(기준이 되는 요소)는 .inner
- .visual .title .btn : 위치상 부모요소는 .visual .title에 position값(position:static이 아닌) 들어있음
- .visual .fade-in : 요소들이 순차적으로 보이도록 하는 애니메이션을 설정하기 위해 작성. 우선 안 보이게 만든다음 순차적으로 나타나도록 JS 코드 작성
.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;
}
.btn.btn--brown {
color: #592B18;
border-color: #592B18;
}
.btn.btn--brown:hover {
color: #fff;
border-color: #592B18;
}
.btn.btn--gold {
color: #D9AA8A;
border-color: #D9AA8A;
}
.btn.btn--gold:hover {
color: #fff;
border-color: #D9AA8A;
}
.btn.btn--white {
color: #fff;
border-color: #fff;
}
.btn.btn--white:hover {
color: #333;
border-color: #fff;
}
/* HEADER */
header {
width: 100%;
position: fixed;
top: 0;
background-color: #f6f5f0;
border-bottom: 1px solid #c8c8c8;
z-index: 9;
}
/* VISUAL */
.visual {
margin-top: 120px;
background-image: url("../images/visual_bg.jpg");
background-position: center;
}
.visual .inner {
height: 646px;
}
.visual .title {
position: absolute;
top: 88px;
left: -10px;
}
.visual .title .btn{
position: absolute;
top: 259px;
left: 173px;
}
.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;
right: 275px;
}
.visual .fade-in{
opacity:0;
}
JS
- SECTION1의 이미지 요소들이 하나씩 순차적으로 보이도록 하는 코드 작성
- querySelectorAll : 선택자들을 전부 찾아서 fadeEls에 할당
- forEach(funcition): HTML에서 찾은 선택자(요소)들의 개수만큼 funcition이 실행된다(반복실행)
- function (fadeEl, index) {} : 반복되는 fadeEl라는 요소는 index(횟수, index로 가능)만큼 실행한다
- gsap.to(요소, 지속시간(초단위), 옵션-객체형태-);
const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function (fadeEl, index) {
gsap.to(fadeEl, 1, {
delay: (index + 1) * .7, // 0.7초 후에 애니메이션 동삭, 1.4, 2.1, 2.7
opacity: 1
});
});
Author And Source
이 문제에 관하여(TIL 39 | ★다방 랜딩페이지8(섹션1-버튼,순차적애니메이션)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@yeonbee/TIL-39-다방-랜딩페이지8섹션1-버튼순차적애니메이션
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!-- VISUAL -->
<section class="visual">
<div class="inner">
<div class="title fade-in">
<img src="./images/visual_title.png" alt="STARBUCKS DELITGHTFUL START TO THE YEAR" />
<a href="javascript:voild(0)" class="btn btn--brown">자세히 보기</a>
</div>
<div class="fade-in">
<img src="./images/visual_cup1.png" alt="NEW OATMEAL LATTEE" 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 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>
- btn : 버튼은 공통 class .btn으로 묶어서 한 스타일로 제어할 수 있도록 해줌. CSS를 먼저 작성해준다음에 HTML class 추가하는 방식 사용해봄(부트스트랩 방식)
- box-sizing: border-box; : 요소의 크기 계산 기준. border-box로 설정해서 padding이 들어가거나 margin이 들어간 만큼 요소가 커지지 않도록 제어
- display: block; : a tag나 span tag에 버튼 부여해도 잘 나올 수 있도록 제어
- .btn.btn--reverse : 버튼 스타일 제어.
- header : z-index: 9; : 배지부분이 section 보다 항상 상위에 있을 수 있도록 배치 값 지정
- visual : header inner가 120px로 지정되어 있기 때문에 margin-top(바깥쪽 상단 여백)을 120px을 줘서 겹치치 않도록 함
.visual .inner .title에서 .inner와 같이 계속 반복되는 선택자는 생략 가능
- .visual .title : 위치상 부모요소(기준이 되는 요소)는 .inner
- .visual .title .btn : 위치상 부모요소는 .visual .title에 position값(position:static이 아닌) 들어있음
- .visual .fade-in : 요소들이 순차적으로 보이도록 하는 애니메이션을 설정하기 위해 작성. 우선 안 보이게 만든다음 순차적으로 나타나도록 JS 코드 작성
.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;
}
.btn.btn--brown {
color: #592B18;
border-color: #592B18;
}
.btn.btn--brown:hover {
color: #fff;
border-color: #592B18;
}
.btn.btn--gold {
color: #D9AA8A;
border-color: #D9AA8A;
}
.btn.btn--gold:hover {
color: #fff;
border-color: #D9AA8A;
}
.btn.btn--white {
color: #fff;
border-color: #fff;
}
.btn.btn--white:hover {
color: #333;
border-color: #fff;
}
/* HEADER */
header {
width: 100%;
position: fixed;
top: 0;
background-color: #f6f5f0;
border-bottom: 1px solid #c8c8c8;
z-index: 9;
}
/* VISUAL */
.visual {
margin-top: 120px;
background-image: url("../images/visual_bg.jpg");
background-position: center;
}
.visual .inner {
height: 646px;
}
.visual .title {
position: absolute;
top: 88px;
left: -10px;
}
.visual .title .btn{
position: absolute;
top: 259px;
left: 173px;
}
.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;
right: 275px;
}
.visual .fade-in{
opacity:0;
}
JS
- SECTION1의 이미지 요소들이 하나씩 순차적으로 보이도록 하는 코드 작성
- querySelectorAll : 선택자들을 전부 찾아서 fadeEls에 할당
- forEach(funcition): HTML에서 찾은 선택자(요소)들의 개수만큼 funcition이 실행된다(반복실행)
- function (fadeEl, index) {} : 반복되는 fadeEl라는 요소는 index(횟수, index로 가능)만큼 실행한다
- gsap.to(요소, 지속시간(초단위), 옵션-객체형태-);
const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function (fadeEl, index) {
gsap.to(fadeEl, 1, {
delay: (index + 1) * .7, // 0.7초 후에 애니메이션 동삭, 1.4, 2.1, 2.7
opacity: 1
});
});
Author And Source
이 문제에 관하여(TIL 39 | ★다방 랜딩페이지8(섹션1-버튼,순차적애니메이션)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@yeonbee/TIL-39-다방-랜딩페이지8섹션1-버튼순차적애니메이션
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function (fadeEl, index) {
gsap.to(fadeEl, 1, {
delay: (index + 1) * .7, // 0.7초 후에 애니메이션 동삭, 1.4, 2.1, 2.7
opacity: 1
});
});
Author And Source
이 문제에 관하여(TIL 39 | ★다방 랜딩페이지8(섹션1-버튼,순차적애니메이션)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeonbee/TIL-39-다방-랜딩페이지8섹션1-버튼순차적애니메이션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)