19일차
유튜브 영상배경 - 반복 애니메이션
고정이미지배경
3D 애니메이션
반복 애니메이션
<!-- YOUTUBE VIDEO -->
<section class="youtube">
<div class="youtube__area">
<div id="player"></div>
</div>
<div class="youtube__cover"></div>
<div class="inner">
<img src="./images/floating1.png" alt="Icon" class="floating floating1" />
<img src="./images/floating2.png" alt="Icon" class="floating floating2" />
<img src="./images/floating3.png" alt="Icon" class="floating floating3" />
</div>
</section>- inner를 추가해서 이미지태그 3개를 만들어서 이미지 3개 출력함
.youtube .inner {
height: 700px;
}
.youtube .floating1 {
position: absolute;
top: 50px;
left: 0;
}
.youtube .floating2 {
position: absolute;
top: 350px;
left: 150;
}
.youtube .floating3 {
position: absolute;
bottom: -200px;
right: 0;
}- inner의 공통항목에 relative 적용되어있기때문에 inner안에 포지션값 안적어도 된다
// 범위 랜덤 함수(소수점 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: true,
ease: Power1.easeInOut,
delay: random(0, delay) // 1초뒤에 애니메이션 실행 / 지연시간
});
}
floatingObject('.floating1', 1, 15);
floatingObject('.floating2', .5, 15);
floatingObject('.floating3', 1.5, 20);- gsap.to 요소 selector , 랜덤값 , 옵션은 객체데이터 {y축 size값 , repeat -1 무한반복, yoyo 애니메이션이 진행되고 다시돌아옴, true ease:easing함수값 적용 , delay 랜덤값(최대값은 입력한 delay값)}구현
gsap easing
고정 이미지 배경
<!-- SEASON PRODUCT -->
<section class="season-product">
<div class="inner">
<img src="./images/floating3.png" alt="Icon" class="floating floating3" />
<img src="./images/season_product_image.png" alt="" class="product" />
<div class="text-group">
<img src="./images/season_product_text1.png" alt="" class="title" />
<img src="./images/season_product_text2.png" alt="" class="description" />
<div class="more">
<a href="javascript:void(0)" class="btn">자세히보기</a>
</div>
</div>
</div>
</section>
<!-- RESERVE COFFEE -->
<Section class="reserve-coffee">
<div class="inner">
<img src="./images/reserve_logo.png" alt="" class="reserve-logo"/>
<div class="text-group">
<img src="./images/reserve_text.png" alt="" class="description" />
<div class="more">
<a href="javascript:void(0)" class="btn btn--gold">자세히보기</a>
</div>
</div>
<img src="./images/reserve_image.png" alt="" class="product" />
</div>
</Section>
<!-- PICK YOUR FAVORITE -->
<section class="pick-your-favorite">
<div class="inner">
<div class="text-group">
<img src="./images/favorite_text1.png" alt="" class="title" />
<img src="./images/favorite_text2.png" alt="" class="description" />
<div class="more">
<a href="javascript:void(0)" class="btn btn--white">자세히보기</a>
</div>
</div>
</div>
</section>
/* SEASON PRODUCT */
.season-product {
background-image: url("../images/season_product_bg.jpg");
}
.season-product .inner {
height: 400px;
}
.season-product .floating3 {
position: absolute;
top: -200px;
right: 0;
}
.season-product .text-group {
position: absolute;
top: 110px;
right: 100px;
}
.season-product .text-group .title {
margin-bottom: 10px;
}
.season-product .text-group .description {
margin-bottom: 15px;
}
.season-product .text-group .more {
}
/* RESERVE COFFEE */
.reserve-coffee {
background-image: url("../images/reserve_bg.jpg");
}
.reserve-coffee .inner {
height: 400px;
}
.reserve-coffee .reserve-logo {
position: absolute;
top: 110px;
left: 0;
}
.reserve-coffee .text-group {
position: absolute;
top: 124px;
left: 208px;
}
.reserve-coffee .product {
position: absolute;
top: 0;
right: 0;
}
/* PICK YOUR FAVORITE */
.pick-your-favorite {
background-image: url("../images/favorite_bg.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
.pick-your-favorite .inner {
padding: 110px 0;
}
.pick-your-favorite .text-group {
margin-left: 100px;
width: 362px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.pick-your-favorite .text-group .title {
margin-bottom: 40px;
}
.pick-your-favorite .text-group .description {
margin-bottom: 40px;
}- pick your favorite 에서 background-attachment fixed를 하여 스크롤해도 배경이미지는 고정
3D 애니메이션
<!-- RESERVE STORE -->
<section class="reserve-store">
<div class="inner">
<div class="medal">
<div class="front">
<img src="./images/reserve_store_medal_front.png" alt="" />
</div>
<div class="back">
<img src="./images/reserve_store_medal_back.png" alt="" />
<a href="javascript:void(0)" class="btn">매장안내</a>
</div>
</div>
</div>
</section>
/* RESERVER STORE */
.reserve-store {
background-image: url("../images/reserve_store_bg.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
.reserve-store .inner {
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
.reserve-store .medal {
width: 334px;
height: 334px;
perspective: 600px;
}
.reserve-store .medal .front,
.reserve-store .medal .back {
width: 334px;
height: 334px;
position: absolute;
backface-visibility: hidden;
transition: 1s;
}
.reserve-store .medal .front {
transform: rotateY(0deg);
}
.reserve-store .medal:hover .front {
transform: rotateY(180deg);
}
.reserve-store .medal .back {
transform: rotateY(-180deg);
}
.reserve-store .medal:hover .back {
transform: rotateY(0deg);
}
.reserve-store .medal .back .btn{
position: absolute;
top: 240px;
left: 0;
right: 0;
margin: auto;
}
- front back 앞면 뒷면을 만들고 position에 absolute값을 넣어 겹치게 함.
rotate Y값을 -180deg / 0deg 설정하여 뒷면을 뒤집은 상태로 만듬.
backface-visibility hidden값으로 뒤집어진 뒷면이 안보이게 함.
hover값을 rotate Y값을 0deg / 180deg로 설정하며 호버 되면 뒤집어지게 만듬.
inner의 display flex; justify-content: center; align-items: center;를 설정하 여 메달이 가운데 오도록 위치시킴.
FE 개발자(진)가 되고 싶습니다