나를 소개하는 홈페이지 만들기 (3)

Next14 + Netlify 로 새로 작성했습니다.

https://whothatsme.tistory.com/42

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)

 

---

애니메이션 효과 주기

이번에는 홈페이지에 처음 왔을때 애니메이션 효과를 줘보려고 한다.

css분리 및 js 추가

index.css 하나로 묶여 있던 css들을 여러개로 분리해서 관리하기 쉽게 정리했다.

기본적인것은 index 안에 두고, mainNav와 mainFooter는 따로 관리 했다.

 

위 화면처럼 동적인 효과를 주기 위해서 setTimeout 함수를 통해서 시간을 두고 진행할 수 있게 했다.

 

// animation.js
window.onload = function () {
  const homeStyle = document.getElementById("home");
  const navStyle = document.querySelector(".mainNav");
  const footerStyle = document.querySelector(".mainFooter");

  const navFont = document.querySelector("#mainNavFont");
  const footerFont = document.querySelector("#mainFooterFont");

  setTimeout(() => {
    homeStyle.style.visibility = "visible";
    homeStyle.style.opacity = "1";

    navStyle.style.height = "4rem";
    navStyle.style.visibility = "visible";

    footerStyle.style.height = "4rem";
    footerStyle.style.visibility = "visible";
  }, 500);

  setTimeout(() => {
    navFont.style.visibility = "visible";
    navFont.style.opacity = "1";
  }, 1500);
};

window.onload 를 통해서 body가 마운트된 이후에 js가 실행 되도록 한다.

즉, 원래 homeStyle의 visibility는 hidden 이었는데 setTimeout을 통해서 0.5초 뒤에 visible로 바꾼다.

이때 그냥 visible만 사용하면 깜빡이는 등장이여서, opacity를 이용해 0 => 1로 변경되도록 했다.

추가적으로 좀 더 자연스러운 효과를 이용하려면 css내의 transition을 이용하면 된다.

/* index.css */
#home {
  visibility: hidden;
  opacity: 0;
  transition: ease 2s;
}

transition에 관해서는 MDN에 자세히 설명 되어있으니 참고하면 좋다.

 

따라서 홈 가운데 화면과, Nav, Footer 가 영화 같은 느낌으로 만들고 싶어서 추가했다.

다음에는 내용을 조금 더 채우고 어떤 기능을 추가할 지 고민해봐야겠다.