👀 사이트 레이아웃 클론

래퍼런스 사이트 : https://hkd-microbiome.com/ko/

클론 사이트 : https://kse-seong-eun.github.io/HKDmicrobiome__CloneCoding/

작업 사항

사용 기술 HTML, CSS, SCSS, JS

이번 클론코딩 과제에서는 시멘틱 태그와 명시적인 태그 네이밍을 주의하며 구조를 만들었습니다. 사이트의 디자인 요소 중 기술이 부족하여 구현하지 못한 부분은 CSS 및 다른 방법으로 대체 구현해 보았습니다. ( 화살표, 버튼, 이미지 등 활성화 할 수 있는 요소들에는 css로 작업할 수 있는 간단한 모션을 추가했습니다.) 복잡한 작업환경을 개선하기위해 scss를 활용하여 스타일링 파일의 코드를 줄일 수 있도록 하였습니다. 추후에 반응형, JS 기술 부분도 지속적으로 업데이트 할 예정입니다!

CSS, JS 요소

CSS 효과
0. 부드럽게 효과 변환시키기.
1. 버튼 Hover :
2. <a> 텍스트 hover : 화살표 transform, border_bottom 라인 생성, 글자 크기 변화
3. Img hover : filter 기능으로 색 변화. 이미지 사이즈 변화,
4. cursor: pointer활용 링크 기능없는 경우 링크 있는것 처럼
5. 빈 링크에 javascript:void(0)

JS 효과
1. gsap,lodash 활용
    <header> top:0일때 Opacity:0 / 지정 부분 아래에서 요소 노출
2. <footer> 웹페이지 최상단으로 가기 버튼
    (사이트 명들도 최상단 이동으로 지정)

❗️구현하지 못한 부분

현재 본인 수준이 부족해 구현하지 못하고 CSS로 대체한 부분들. 추후 더 공부해 디벨롭할 부분들 리스트!

효과

• 태그 border_bottom의 애니메이션 효과 (좌에서 우로 라인 그어짐)
• butoon의 애니메이션 효과 (원형으로 퍼지며 배경,글자 색상 변경)

구성

• header [1] 아래로 스크롤 하는 동안은 네비 노출 x, 위로 스크롤 할때에만 나타내야 함. [2] 햄버거 애니메이션 🔥 [3] 드롭다운 페이지
• big_banner 🔥🔥 테스트 모션 [1]페이드 인 [2]아래에서 위로 팝업 이미지 모션 [1]자동 롤링 [2] 사용자 액션 없이 이미지 사이즈 변화 애니메이션[3].dot을 누르면 해당 배너로 수동 전환 [4]자동 롤링 일시정지 기능 [5] .dot hover 시 애니메이션
• center_guide [1] 타이틀 hover시 화살표 움직임 반복 [2] 뷰포트 외부의 이미지 롤링 및 롤링 버튼 활성화 🔥🔥 [3] 이미지 hover 시 관련 아이콘 팝업
• VR_guide 배경 일러스트 형식 SVG 이미지 사용했으나, 화면 구성이 깨짐 (사이즈 조절해도 같은 문제가 발생해 JEPG로 대체) 마우스 hover 시 일러스트 애니메이션 필요 (창문에 불 들어옴)
• REASERCH 연구 리스트 클릭 시 관련 이미지, 텍스트로 전환 🔥
• INGREDIENTS 순차적으로 요소 지정 효과 나타내기