자기소개 (about.html)

1. 사전계획

• 메인영역: 배경텍스트배치, 404패러디이미지, 스크롤안내문구
• 자기소개 영역: 내비바 다크모드, 텍스트 무한 롤링 만들기
• 3가지포인트 영역: 스크롤에따라 콘텐츠 보여주기
• 우주배경 영역: position sticky 사용해서 스크롤효과만들기
• 스킬 영역: html말고 js로 내용추가하기, hover 효과

2. 개발과정

(전체소스는 github에서 확인해주세요!)

2-1. 메인영역: 배경텍스트배치, 404패러디이미지, 스크롤안내문구

• 배경텍스트: 이미지말고 텍스트로 넣어줌,
  스크롤시 밑에 깔려야해서 position:fixed와 z-index값을 음수로 줬음

<section class="intro-wrap bg-light-gray">
	<!-- 배경텍스트 -->
	<div class="bg-404-box">
		<p>404 NOT FOUND<br>
			404 NOT FOUND<br>
            404 NOT FOUND<br>
            404 NOT FOUND<br>
            404 NOT FOUND<br>
            404 NOT FOUND<br>
            404 NOT FOUND<br>
            404 NOT FOUND</p>
	</div>
</section>

.intro-wrap {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -3;
    position: fixed;
}
.bg-404-box {
    position: absolute;
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -2;
}

• 404 패러디 이미지 움직임 만들기 + fade-up 클래스 재활용함(index.html참고)
  scroll안내 문구 움직임은 + up-down 클래스 재활용함(index.html참고)
  실제 소스에서는 animation과 keyframe의 크로스브라우징 작업 완료했음

/*메인 에러카드 움직임*/
.side-up-down { animation: sideUpDown .2s linear 2; }

2-2. 자기소개 영역: 다크모드, 텍스트 무한 롤링 만들기

• 다크모드 만들기: 스크롤바의 수직위치가 introTop(다크모드시작점)과 같을때 다크모드시작!

$(window).on('scroll', function(e){
	// 스크롤바 상단값
  	var scrollTop = $(this).scrollTop();
  	// 자기소개 인트로 영역 상단
 	var introTop = $(.about-dev-txt).offset().top;
  	//다크모드 실행
  	if(scrollTop >= introTop){
		$('.top-nav-wrap').addClass('dark-mode').css('background-color', 'transparent');
		$('.m-menu-list span').css('color', 'white');
		$('.top-logo').removeClass('point-blue');
		$('.top-nav-list a').removeClass('highlight');
    }
  	//다크모드 해제
  	if (scrollTop < introTop) {
		$('.top-nav-wrap').removeClass('dark-mode');
		$('.m-menu-list span').css('color', 'black');
		$('.top-logo').addClass('point-blue');
      	$('.top-nav-list a').addClass('highlight');
	}
});

• 무한 롤링 만들기 : 텍스트박스를 2개 만들어서 위치를 이동하는 애니메이션, 무한반복
  실제 소스에서는 animation과 keyframe의 크로스브라우징 작업 완료했음

.rolling-move { animation: rollingMove 10s linear infinite; }
@keyframes rollingMove {
    0% { transform: translateX(100%); }
    50% { transform: translateX(-100%); }
    50.01% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.clone-move { animation: cloneMove 5s linear infinite; }
@keyframes cloneMove {
	0% { transform: translateX(0%); }
    50% { transform: translateX(-100%); }
    100% { transform: translateX(-200%); }
}

2-3. 3가지포인트 영역: 스크롤에따라 콘텐츠 보여주기

• points-wrap영역 안의 스크롤 움직임을 백분율로 만들어 퍼센트에 따라 동작설정하기
  실제 소스에는 마우스 업다운 체크 및 모바일버전의 터치 업다운도 체크해서 추가함

// pointsView 는 계산할 영역의 시작점이므로 그 값만큼 빼야함
// nullBox는 계산할 영역의 끝점
var handMove = Math.round(((scrollTop - pointsView) / (nullBox - pointsView)) * 100);
// 진행되는 백분율에 맞춰서 동작 설정하기
if (mouseMove > 0) { // 마우스 업다운 체크
	if (0 <= handMove && handMove < 5) {
		$('.points-txt').eq(0).css('opacity', '1').addClass('fade-up');
		$('.point-img').eq(0).css('opacity', '1').addClass('fade-up');
	}
	if (60 <= handMove && handMove < 65) {
		$('.point-img').eq(0).css('opacity', '0').removeClass('fade-up');
		$('.points-txt').eq(1).css('opacity', '1').addClass('fade-up');
		$('.point-img').eq(1).css('opacity', '1').addClass('fade-up');
	}
	if (105 <= handMove && handMove < 110) {
		$('.point-img').eq(1).css('opacity', '0').removeClass('fade-up');
		$('.points-txt').eq(2).css('opacity', '1').addClass('fade-up');
		$('.point-img').eq(2).css('opacity', '1').addClass('fade-up');
	}
}

2-4. 우주배경 영역: position sticky 사용해서 스크롤효과만들기

• position sticky 사용:

<!---------- 우주배경 영역 ---------->
<!-- sticky 부모박스 -->
<section class="about-dev-space center">
	<!-- sticky 자식박스 -->
	<div class="space-contents">
		<!-- 텍스트 -->
		<h2 class="space-title space-txt center">
        	단순 코더가 아닌<br>
			생각하는 힘이 강한 개발자
        </h2>
		<h2 class="space-title planet-txt">
        	언제나 배움을 즐기며<br>
			꾸준히 성장합니다
       	</h2>
		<!-- 개발자, 지구 이미지 -->
		<img class="dev" src="images/dev.png" alt="dev-character">
		<img class="earth" src="images/earth.svg" width="500" alt="earth-illust">
		<div class="earth-shadow"></div>
		<!-- null (스크롤용) -->
		<div class="space-null" style="width: 100%; height: 100vh;"></div>
		<!-- 행성아이콘 그룹 -->
		<div class="space-planet-bg"></div>
	</div>
</section>

2-5. 스킬 영역: html말고 js로 내용추가하기 + hover 효과

앞으로 스킬이 추가 될 수록 html이 점점 길어질 것 같아 append함수 사용해서 추가함

//스킬내용추가
var skillData = [
	{ name: 'HTML5', imgSrc: 'images/icon_html.svg', bgColor: 'rgba(211,88,55,0.5)', width: '40%' }
]
//스킬 템플릿추가
skillData.forEach((a, i) => {
	var skillBox = `<div class="skill-box" data-color="${skillData[i].bgColor}">
						<img src="${skillData[i].imgSrc}" width="${skillData[i].width}">
						<p>${skillData[i].name}</p>
					</div>`
	$('.skill-boxes').append(skillBox);
});
//마우스 올리면 배경색 변경
$('.skill-box').on('mouseover', function (e) {
	var skillBgColor = $(this).data('color');
	$(this).css('background', `linear-gradient(to bottom, ${skillBgColor}, #000)`);
});
$('.skill-box').on('mouseleave', function (e) {
	$(this).css('background', `none`);
});

3. 결과물

4. 시행착오

스크롤 시, 마우스 휠 up/down 움직임 감지하는 이벤트를 사용하였는데
firefox 브라우저에서는 적용되지 않았다!!
알고보니 firefox는 deltaY가 아닌 detail을 사용해줘야 하는 것!
이후에는 크롬, 파폭, 엣지, 네이버웨일 브라우저까지 전부 테스트하는 습관이 생김..

// 마우스휠 up/down 움직임 감지
var mouseMove = 0;
$(window).on('mousewheel DOMMouseScroll', function (e) {
	// mouseMove 가 0보다 크면 down, 0보다 작으면 up
	if (e.originalEvent.deltaY) {
		mouseMove = e.originalEvent.deltaY;
	} else {
		// firefox
		mouseMove = e.originalEvent.detail;
	}
});

5. 개인적 코멘트

나를 표현하는 페이지라 볼거리가 많다보니
html과 js 를 정리할때 각 영역마다 주석의 가독성도 신경썼다

기획단에서 스토리텔링도 엄청 신경썼고
나의 장점인 생각하는 힘도 강조하고
나를 표현한 새싹 개발자 캐릭터도 넣었다🌱

다만, 첫 이미지가 404에러 패러디이다 보니
혹시나,, 닫기를 누르시는 분이 계실까봐 걱정이 조금 되긴하지만
그래서 밑에 스크롤 안내도 띄우고
일부러 카드이미지에 애니메이션도 줬음!

그리고 mousewheel up/down 감지 이벤트를
개발하면서 뒤늦게 알게되어서 조금 아쉬웠다
사전계획을 짤때 알았더라면 더 깔끔하게 만들었을듯!
하지만 이미 있는 소스코드를 유지보수 및 추가하는 것도
개발자의 업무라 생각하기에 최대한 깔끔하게 넣어서 완성시켰다