🌿 EQL

• 프로젝트 이름: EQL
• 사용한 언어: HTML, SCSS, JavaScript, jQuery
• 사용한 JavaScript 라이브러리: GSAP (ScrollTrigger)

Image Roll 만들기

HTML

<div class="img-roll">
	<img src="./assets/images/roll1.jpg" alt="">
	<img src="./assets/images/roll2.jpg" alt="">
	...
</div>

SCSS

img{
	position: absolute;
	top: 0;left: 0;
	 width: 100%;
	height: 100%;
	object-fit: cover;
	visibility: hidden;
	}

GSAP

gsap.to('.sc-header .group-images .img-roll img',{
    visibility:'visible',
    stagger:{
        each: 0.1,
    }
});

1. 각 이미지의 CSS에 visiblity: hidden 처리 하기

2. gsap.to를 사용하여 img의 경로를 불러온 후 이미지들이 보일수 있게 visiblity:'visible' 작성하기

3. gsap의 stagger / each를 활용하여 각 이미지들이 0.1초 뒤에 순차적으로 보일수 있게 하기

stagger / each

stagger는 일련의 요소들을 지정된 시간 간격으로 순차적으로 애니메이션화하는 데 사용되며 each는 각 요소들의 시작 시간 간격을 나타냅니다.

Clamp() 함수

clamp(min, val, max);

clamp() 함수는 CSS의 값 범위를 정의하는 데 사용되는 함수로 최소, 최대, 및 현재 값으로 이루어진 세 가지 매개변수를 가집니다.

width: clamp(36px,4.5vw,64px);

width의 최소 값=36px, 현재 값=4.5vw, 최대 값=64px

여기서width는 현재 값 4.5vw는 36px보다 작아질 수 없으며 64px보다 커질 수 없습니다.
*반응형 웹사이트에서 유용하게 사용할 수 있습니다.

로고 애니메이션 (stroke-dashoffset 활용)

로고 애니메이션에서 사용한 stroke-dashoffset 속성은 SVG에서 선의 패턴을 제어할때 활용되는 속성 중 하나로 주로 선이나 경로가 그려지는 애니메이션을 만들 때 사용합니다.

1. 로고 안에 포함된 선의 길이 찾기 (보통 여러 값을 입력해보며 찾아야 함)
   *위 예시의 경우에는 20이었습니다.

2. stroke-dashoffset과 stroke-dasharray의 값을 같게 주어 화면 상에서 보이지 않게 하기

3. 애니메이션이 시작할 방향을 stroke-dashoffset의 값을 바꿔보면서 정하기
   *위 예시의 경우에는 20에서 0으로 가면 오른쪽 방향, 20에서 40으로 가면 왼쪽 방향으로 애니메이션이 적용됩니다.

4. 위에서 찾은 값들을 바탕으로stroke-dashoffset에 @keyframes 정의하기
   *위 예시에서는 위의 선과 아래 선이 반대로 그려지는 느낌을 주기 위해 각각 다른 값을 주었습니다.

5. 각 선에 animation 추가하기

Grid 1/-1 레이아웃

grid-column: 1/-1; grid-row: 1/-1;은 그리드 아이템이 그리드 컨테이너에서 첫 번째 열(1)부터 마지막 열(-1)까지, 그리드 컨테이너의 첫 번째 행부터 마지막 행까지 확장되도록 만들어 줍니다. 위의 예시를 보면 부모 클래스에 너비와 높이를 100%씩 주고 그리드를 만들면 마치 absolute 포지션을 쓴 것처럼 그리드 아이템들이 포개진 것을 볼 수 있으며 이는 이미지나 여러 요소를 한 공간에 겹쳐놓을 때 유용하게 사용할 수 있습니다.

동적 뷰포트 단위(dvh / dvw)

dvh(Dynamic Viewport Height)는 주소 표시줄의 유무와 관계 없이 현재 보여지는 뷰포트 높이를 동적으로 가져옵니다. 스크롤 시 주소창이 사라지는 모바일 브라우저에서도 (주로 Safari에서) 문제 없이 특정 요소의 높이를 브라우저의 화면 높이와 맞출 수 있습니다.

Variable 폰트

Variable fonts는 여러 가지 스타일과 두께의 축을 가진 단일 폰트 파일로 폰트의 스타일, 굵기, 기울임, 너비 등을 유연하게 제어할 수 있습니다.

@font-face {
    font-family: Indivisible;
    src: url('../fonts/IndivisibleVariable.f64f7f53.woff2') format('woff2');
    font-weight: 100 1000; // 100부터 1000까지 폰트 굵기를 자유롭게 조절 가능
}

랜덤 글자 애니메이션

HTML

<h2 class="title">
	<span>160년</span> <span>역사를</span> <span>지닌</span> <span>HUNTER는</span>
	<span>클래식한</span> <span>패션</span> <span>아이템으로</span>
	<span>전 세계의</span> <span>많은</span> <span>이들의</span> <span>사랑을</span>
	<span>받아</span><span>오고</span> <span>있습니다.</span>
    <br><br>
	<span>헤리티지에</span> <span>충실함과</span> <span>동시에</span> <span>끊임없는</span>
	<span>디자인</span> <span>혁신을</span> <span>통해</span> <span>진화하고</span>
	<span>있는</span> <span>브랜드</span> <span>헌터를</span> <span>EQL에서</span> <span>만나보세요.</span>
</h2>

JavaScript / jQuery

titleArr = $('.sc-hunter .group-hunter h2 span').toArray();
function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
    };
};
shuffleArray(titleArr);
ScrollTrigger.create({
    trigger:'.sc-hunter',
    start: "0% 50%",
    onEnter:function(){
		titleArr.forEach(function(el,i){
            gsap.to(el,{
                opacity: 1,
                duration: 1,
                delay: i * 0.12, 
            });
        });
    },
});

1. 랜덤 애니메이션을 적용할 글자들을 배열로 만들어 변수 titleArr에 저장하기

2. Fisher-Yates 알고리즘에 근거하여 배열을 무작위로 만드는 함수 shuffleArray 만들기

Fisher-Yates 알고리즘이란?

Fisher-Yates 알고리즘은 배열의 요소를 임의의 순서로 섞는 데 사용되는 알고리즘으로 각 인덱스와 그 이후의 무작위 인덱스 중 하나를 선택하여 두 인덱스에 해당하는 요소를 교환합니다. 이를 배열의 끝까지 반복함으로써 배열 전체를 섞을 수 있습니다.

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) { - 배열의 마지막부터 처음까지 (i--) 
    const j = Math.floor(Math.random() * (i + 1)); - Math.random 함수를 사용하여 0에서 i까지 무작위의 인덱스 선택
    [array[i], array[j]] = [array[j], array[i]]; - i번째 요소와 j번째 요소의 위치를 바꿈
    };
};

3. 변수 titleArr을 shuffleArray 함수에 넣기

4. ScrollTrigger의 onEnter 함수를 사용하여 윈도우 50% 위치에 트리거 시작 지점이 도달했을때 애니메이션이 실행될 수 있도록 만들기

5. titleArr로 forEach 반복문 함수 만들기 (매개변수 el, i)

6. gsap.to를 사용하여 각 엘리먼트들에 delay와 opacity 값을 주어서 각각 딜레이를 가진 상태로 화면에 보일 수 있도록 만들기

mousemove 애니메이션

HTML

<section class="sc-openyy">
	...
	<svg class="shape-move" viewBox="" fill="currentColor" preserveAspectRatio="none" style="">	
		<rect x="0" y="0" width="75" height="504.5" class="shape-rect"></rect>
		<rect x="75" y="504.5" width="6" height="504.5" class="shape-rect"></rect>
    	...
	</svg>
</section>

JavaScript / jQuery

$('.sc-openyy').mousemove(function(e){
	const mouseY = e.offsetY;
	const containerHeight = $(this).height();
	const mouseY2 = containerHeight - e.offsetY;
	gsap.to('.sc-openyy .shape-move .shape-rect:nth-child(odd)',{
		height: mouseY,
		duration: 0,
	});
	gsap.to('.sc-openyy .shape-move .shape-rect:nth-child(even)',{
		height: mouseY2,
		y:mouseY - 504.5,
		duration: 0,
	});
    gsap.to('.sc-openyy .shape-move .shape-rect',{
		width: 'random(1,90)',
		x: 'random(-90,90)',
		duration: 0.1,
	});
});

1. 애니메이션을 활성화 할 컨테이너 .sc-openyy에 mousemove 이벤트 추가하기 (매개변수 e)

2. 마우스의 y좌표를 변수 mouseY에 저장

3. 컨테이너 .sc-openyy의 높이 값을 변수 containerHeight에 저장

4. .sc-openyy의 높이 값에서 마우스의 y좌표를 뺀 값을 변수 mouseY2에 저장

5. svg안에 있는 막대들의 :nth-child(odd) 홀수 클래스(윗 막대들)에 gsap.to를 사용하여 mouseY를 높이 값으로 주기
   *마우스를 y축 방향으로 움직일 때 윗 막대들이 마우스 커서를 따라오게 됩니다.

6. :nth-child(even) 짝수 클래스(아랫 막대들)에는 mouseY2를 높이 값으로 주기
   *mouseY2는 전체 높이에서 mouseY 즉 e.offsetY를 뺀 값으로 나머지 공간을 차지하게 됩니다.

7. mouseY에서 504.5를 뺀 값을 짝수 클래스의 y 값으로 주어 초기화 시키기
   *504.5는 원래 svg에 있었던 y값입니다.

8. gsap의 랜덤함수를 사용하여 마우스를 움직일 때 각 막대의 width와 x좌표 값을 랜덤하게 주기
   *width는 1px부터 90px까지, x좌표 값은 원래의 값에서 +-90