LUSH renewal

📎 https://github.com/eveneul/lush
📎 https://eveneul.github.io/lush

awwwards에 올라온 수상장을 레퍼런스로 참고해서 만든 러쉬 사이트 리뉴얼입니다 (적응형)

gsap, mouseover 이벤트 활용과 특히 css 속성 중 mask에 대해서 조금 더 깊게 이해할 수 있었던 시간이었습니다

CSS적인 스킬보다는 gsap scrollTrigger, JQuery 기능 위주로 습득한 게 많아서 Jquery 기능 위주로 작성하려고 합니다

고화질 이미지를 얻는 게 어려워서 큰 이미지의 같은 경우 화질이 매끄럽지 못합니다.. ㅠㅠ

Header

position: fixed를 주어서 스크롤을 내리든 올리든 항상 상단에 위치하게 고정해 두었습니다
대신, 페이지 맨 위에 있을 때는 background-color: transparent을 주어서 바탕에 깔린 별 아티클이 보이게끔 설정했고,
스크롤을 내리면 헤더가 위로 올라가 숨겨지고, 스크롤을 올리면 background-color가 적용, 다시 헤더가 밑으로 내려와 눈으로 보이게끔 설정했습니다.

	const headerAni = gsap
		.from('.header', {
			yPercent: -100,
			paused: true,
			duration: 0.4,
		})
		.progress(1);

	ScrollTrigger.create({
		start: 'top top',
		end: 99999,
		onUpdate: (self) => {
			self.direction === -1 ? headerAni.play() : headerAni.reverse();
		},
	});

먼저 gsap.from을 이용해 header 기본값이 y로 -100%만큼 이동해 화면이 노출되지 않게 설정했습니다
그리고 그것을 headerAni라는 변수에 담아서 스크롤을 올리면 headerAni.reverse()로 화면에 노출되게,
스크롤을 내리면 headerAni.play()로 yPercent: -100가 실행되게 만들었습니다

	$(window).scroll(function (e) {
		let scrollVal = $(this).scrollTop();

		if (scrollVal <= 10) {
			gsap.to('.header', {
				'background-color': 'rgba(24,24,24, 0)',
			});
		} else {
			gsap.to('.header', {
				'background-color': 'rgba(24,24,24, 1)',
			});
		}
	});

또 window의 스크롤 수직 위치값을 scrollVal이라는 변수에 담아
scrollTop이 10보다 작거나 같으면 (헤더가 페이지 맨 상단에 위치하고 있으면) background-color색상을 투명으로,
그게 아니라면 background-color 색상 alpha값을 1로 주어 #181818 색상이 적용되도록 했습니다

배경 별 아티클

스크롤을 올리고 내리면 별의 잔상이 뒤에 비쳐지고, 마우스를 움직였을 때는 mousemove 이벤트로 별도 움직일 수 있게 구현했습니다

일단 사이즈가 다 같은 것이 아닌 partice을 particle1, particle2로 나눠서 두 개의 크기를 다르게 해 주었습니다

	let particle1 = '';
	let particle2 = '';

	for (let i = 0; i < 15; i++) {
		particle1 += `<span class="particle particle1" data-speed="${
			i + 1
		}"><i class="front"></i><i class="back"></i></span>`;
	}
	for (let i = 0; i < 15; i++) {
		particle2 += `<span class="particle particle2" data-speed="${
			i + 1
		}"><i class="front"></i><i class="back"></i></span>`;
	}
    
    $('.bg-particle').prepend(particle1);
	$('.bg-particle').prepend(particle2);

또 for 반복문을 통해 각각 최대 15개의 아티클을 설정하고, mousemove 했을 시 속도를 다르게 설정하기 위해 data-speed 값도 넣었습니다

또 이 두 개의 particle을 미리 html으로 작성해 둔 .ba-particle 안에 넣었습니다

	const sizeArrS = [[3, 3],[5, 5],[4, 4],[2, 2]];

	const sizeArrM = [[10, 10], [7, 7], [9, 9]];

	const small = Math.floor(Math.random() * sizeArrS.length);
	const sizeSmaollSelec = sizeArrS[small];

	const mid = Math.floor(Math.random() * sizeArrM.length);
	const sizeMidSelec = sizeArrM[mid];

페이지 로드 시마다 particle의 크기를 다르게 하기 위해서 임의의 배열을 만들었고,
Math.floor(), Math.random()을 통해 배열 안에 있는 사이즈 배열들이 particle의 사이즈가 되도록 설정했습니다

	const winH = $(window).innerHeight();
	const winW = $(window).innerWidth();

	gsap.set('.particle1', {
		width: `${sizeSmaollSelec[0]}`,
		height: `${sizeSmaollSelec[1]}`,
		top: `random(0, ${winH})px`,
		left: `random(0, ${winW})px`,
	});
	gsap.set('.particle2', {
		width: `${sizeMidSelec[0]}`,
		height: `${sizeMidSelec[1]}`,
		top: `random(0, ${winH})px`,
		left: `random(0, ${winW})px`,
	});

window의 innerWidth(), innerHegiht() 값을 구해 gsap의 random으로 particle 위치를 각각 다르게 설정해 두었습니다
페이지 로드 시마다 달라지는 값으로 가끔 겹친 particle이 있을 수 있습니다!

	$(window).mousemove(function (e) {
		$('.particle').each(function (idx, el) {
			const speed = $(this).data('speed');
			const x = ($(window).outerWidth() - e.offsetX * speed) / 350;
			const y = ($(window).outerHeight() - e.offsetY * speed) / 350;

			gsap.to(el, {
				x: x,
				y: y,
			});
		});
	});

먼저 mousemove를 하면 particle 각각 data-speed 값을 이용해서 움직이게 끔 설정했습니다
릴리바이레드 리뉴얼 때 배운 기능이라서 이번 러쉬 리뉴얼에도 적용하기가 수월했습니다

	$('body').on('mousewheel', function (e) {
		let y = e.originalEvent.wheelDelta;
		number = Math.abs(y);
		result = number > 10 ? 12 : 5;

		gsap.to('.particle .back', {
			scaleY: result,
		});

		if (y > 0) {
			gsap.set('.particle .back', {
				'transform-origin': 'center top',
				'background': 'rgb(255,255,255)',
				'background':
					'linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(159,159,159,1) 93%)',
				'border-top-left-radius': '3px',
				'border-top-right-radius': '3px',
			});
		} else {
			gsap.set('.particle .back', {
				'transform-origin': 'center bottom',
				'background': 'rgb(255,255,255)',
				'background':
					'linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(159,159,159,1) 93%)',
				'border-bottom-left-radius': '3px',
				'border-bottom-right-radius': '3px',
			});
		}

		gsap.to('.particle .back', {
			scaleY: 0,
		});
	});

그리고 body에서 mousewheel 이벤트를 발생했을 때, e.originalEvent.wheelDelta로 마우스 휠이 위로 향했는지, 아래로 향했는지 판단하는 y라는 변수를 만들었습니다

이 y가 0보다 크거나 작으면 transform-origin의 속성값을 변경해서 마치 별의 잔상처럼 보이게 설정했습니다

또 y가 음수면 양수로 변환해 주는 Math.abs() 함수에 담고, 이 결과값을 이용해 마우스휠 방향에 따라서 잔상 위치가 바뀌게끔 설정했습니다

페이지 로드 시 메인 비주얼 텍스트 애니메이션

먼저 텍스트를 CSS transform-origin으로 위치값을 설정해 준 상태입니다

	gsap.from('.sc-visual', {
		duration: 1,
		opacity: 0,
	});

	const visualAni = gsap.timeline({
		defaults: {
			duration: 1,
			ease: 'power2.out',
		},
	});

먼저 타임라인을 설정해서 텍스트 -> 버튼 -> 동그라미 순으로 나타나게끔 설정했습니다

그리고 이 모든 것들이 투명인 상태이고 아래에서 올라오는 것이기 때문에 gsap.from()으로 opacity: 0을 설정했습니다

	visualAni
		.from('.sc-visual .sc-title', {
			scaleY: 5,
		})
		.from('.sc-visual .link-more', {
			duration: 0.5,
			opacity: 0,
			bottom: '200px',
		})
		.from('.rotate-article', {
			duration: 0.5,
			opacity: 0,
		})
		.to('.sc-visual .group-right .img-box', {
			opacity: 1,
		})
		.to('.sc-visual .group-right .img-box', {
			y: '15px',
			repeat: -1,
			yoyo: true,
			ease: Power1.easeInOut,
		});

gsap.timeline을 visualAni라는 변수에 담아 타임라인을 설정했습니다
첫 번째로 텍스트 -> 링크 버튼 -> 동그라미 아티클 -> 오른쪽 이미지 박스로 설정했고,
각각 고유한 CSS 속성값을 적어 주었습니다