패스트캠퍼스 챌린지 20일차 - Part 1. 스타벅스 예제(8)

26. 유튜브 영상 배경 - 반복 애니메이션

// 범위 랜덤 함수(소수점 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), // 몇 초 뒤에 애니메이션 시작할건지
	});
}

floatingObject('.floating1', 1, 15);
floatingObject('.floating1', 0.5, 15);
floatingObject('.floating1', 0.5, 20);

floatinObject 함수를 통해 세 개의 원형 이미지가 둥둥 떠다니는 애니메이션을 반복한다.

27. 고정 이미지 배경

/*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 {
	width: 362px;
	margin-left: 100px;
	display: flex;
	justify-content: flex-end; /* 우측 정렬 */
	flex-wrap: wrap; /* 줄바꿈 할 수 있도록 */
}
.pick-your-favorite .text-group .title {
	margin-bottom: 40px;
}
.pick-your-favorite .text-group .description {
	margin-bottom: 40px;
}

고정된 이미지를 배치하는 파트라 어렵지 않았다. 그 중 마지막 섹션은 background-attachment: fixed; 속성을 이용해 스크롤해도 움직이지 않는 모션을 연출했는데 이를 패럴렉스(Parallax scroll)이라고 한다.

오늘의 결과물

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.