HTML CSS 및 JavaScript를 사용하여 시작 화면을 만드는 방법

Does your college project have a splash screen that welcomes viewers to your humble website?

Here은 HTML, CSS 및 JavaScript만 사용하여 스플래시 화면을 만든 방법입니다. 단일 페이지 프로젝트에 코드를 복사하여 붙여넣고 원하는 대로 HTML을 변경할 수 있습니다. 그러나 그것이 어떻게 만들어졌는지 자세히 알고 싶다면 계속 읽으십시오.

아이디어는 기본 페이지 위에 div를 오버레이하고 클릭할 때 불투명도를 0으로 바꾸는 것입니다.

HTML

HTML은 매우 간단합니다. 나중에 CSS를 사용하여 스타일을 지정할 컨테이너div를 만드십시오. 이제부터 splash container라고 부르겠습니다. 이것은div 사이트가 실행될 때 기본 페이지 보기를 차단합니다.splash container div 안에 스플래시 화면의 내용을 넣습니다. 시작할 때 사용자에게 보여주거나 알리고 싶은 모든 것이 될 수 있습니다.

CSS

CSS에서 우리의 주요 초점은 스플래시 컨테이너가 전체 화면을 덮도록 만드는 것입니다. 원하는대로 화면의 background-color height 및 width를 선택하십시오.
스플래시 컨테이너를 중앙에 배치하기 위해 고정 위치 지정과 50%의 상단 및 왼쪽을 사용했습니다. 그러나 이것은 스플래시 화면의 왼쪽 상단 모서리를 중앙에 맞춥니다.

position : fixed;
top : 50%;
left : 50%;

스플래시 컨테이너를 자체 중심에 배치하려면 변환을 배치하고 두 축에서 -50%만큼 이동해야 합니다.

transform : translate(-50%,-50%);

사라질 때 더 차갑게 보이도록 전환도 추가합니다. 저는 일반적으로 거의 모든 프로젝트에서 ease-in-out을 사용합니다. 또한 내 시작 화면을 클릭했을 때 완전히 사라지는 데 600ms가 걸립니다. 그러나 원하는 대로 자유롭게 변경하십시오.

transition : all ease-in-out 600ms;

이제 좀 더 자세히 설명하기 위해 스플래시 화면에 커서 스타일을 추가하겠습니다.
(그러나 이로 인해 CSS 및 JS 🥲에 추가 코드를 작성해야 할 수도 있습니다.)

cursor : pointer;

커서 유형의 전체 목록 가져오기here

컨테이너를 숨기는 클래스를 추가하여(JS를 사용하여 불투명도를 0으로 설정한 후) 시작 화면이 사용자에게 표시되지 않더라도 포인터가 다음 영원 동안 표시되지 않도록 합니다.

.hidden{
  transition : 0.5s;
  display : none;
}

이 숨겨진 클래스는 JS를 사용하여 동적으로 추가됩니다.

더제이에스

var splashScreen = document.querySelector('.splash');

splash container를 조작하려면 먼저 splash 클래스로 요소를 캡처해야 합니다. 이를 위해 querySelector() 방법을 사용합니다.
click 에서 splash-container 를 수신하는 이벤트 리스너를 추가합니다. (간단한 언어로 js에게 해당 컨테이너에서 마우스 클릭을 수신하도록 지시합니다.)

splashScreen.addEventListener('click',someFunction())

클릭이 발생하는 즉시 함수가 트리거됩니다. 이 함수를 호출해 보겠습니다parentFunction. parentFunction 기능은 무엇을 합니까?

불투명도를 0으로 바꾸는 스타일 속성을 '스플래시 컨테이너'에 추가합니다.

  splashScreen.style.opacity = 0;
  // CSS style -- opacity : 0;

또한 600ms 후에 hidden 클래스를 우리의 splash container 클래스에 추가합니다. (화면에 포인터 커서가 보이지 않도록 하기 위함입니다.)

setTimeout(()=>{
    splashScreen.classList.add('hidden')
  },610)

setTimeout()는 두 개의 매개변수를 받는 사용자 정의 함수입니다.
첫 번째 매개변수는 수행해야 하는 작업입니다. (이 경우 div에 클래스를 추가하는 함수).
두 번째 매개변수는 작업이 완료되기까지의 시간(밀리초)입니다.

그게 다야. 자신만의 시작 화면을 만들고 사용자 정의할 준비가 되었습니다. codepen에서 내 코드로 재미있게 놀고 거기에서 내 다른 펜을 자유롭게 확인하십시오. 도움이 되셨다면 하트를 눌러주세요.

읽어 주셔서 감사합니다. ❤️