uiux 29일차

-fullpage, animate.css 조합
:애니메이션을 넣을 수 있는 라이브러리가 있다
애니메이트 css

풀페이지를 활용해서 다음 페이지로 넘어갈 때마다 텍스트 등에 애니메이션을 넣을 수 있다

---

-텍스트를 svg로 바꾸는 방법
svg: 화질이 깨지지 않는 벡터 기반의 이미지

Goolge Font to Svg Path
"Google Font to Svg Path"사이트로 원하는대로 커스텀 한 후
복붙을 하고 html에 적용하면 끝

---

tilt.js 사용법
마우스 움직임에 따라 움직이는 것
마우스 움직임에 따라 이미지를 움직이게 할 수도 있음

js에 reset:false를 두면 이미지가 다시 원본상태로 돌아오지 않는다

---

-github
https://github.com/gijsroge/tilt.js?tab=readme-ov-file
Alternatives 참고할것

-marqee,demo
:흘러가는 듯한 텍스트 쓰고 싶을 때

---

-다크모드

@font-face {
  font-family: "SBAggroB";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

html > body,
html,
body input,
html,
body button html,
body textarea {
  font-family: "SBAggroB";
}

• 폰트 불러오는 방법
  무료사이트 '눈누'에서 웹폰트 공유해 준 것을 복붙해서 가져온다
  적용이 안될 수도 있기에 확실히 한 번 더 지정해주고 적용한다
  
  

/* 테마 시작 */

/* 테마 light */
:root {
    --background-color: white;
    --text-color: #222;
    --primary-color-1: #4287f5;
}

/* 테마 dark */
:root.dark {
    --background-color: #0f0f0f;
    --text-color: #f5f5f5;
    --primary-color-1: #4287f5;
}

/* 테마 적용 */
:root {
    color: var(--text-color);
    background-color: var(--background-color);
    transition: all 1s;
}

.color-primary {
    color: var(--primary-color);
}

:root.dark .color-primary {
    filter: brightness(150%);
}

/* 테마 끝 */

:root
변수지정

// 버전 1
// $('.btn-toggle-theme').click(function(){
//   $(':root').toggleClass('dark');
// });

// 버전 2
// $('.btn-toggle-theme').click(function(){
//   if($(':root').hasClass('dark')){
//     $(':root').removeClass('dark')
//   }else{
//     $(':root').addClass('dark')
//   }
// });

// 버전3-arrow function
$('.btn-toggle-theme').click(() => $(':root').toggleClass('dark'));

제이쿼리
버튼을 눌러서 다크모드와 라이트모드로 변하게 하기
arrow function

---

-go fullpage(크롬에 설치)
:화면 풀페이지를 캡처해줌
PDF 나 PNG 파일로 저장할 수 있음
go fullpage 크롬 익스텐션