Build A Cool Thing(스트리트 파이터 웹사이트)

DEMO (You can see it live here.)

오늘 향수가 나를 강하게 때렸다.

그래서 첫 번째 멋진 일에 대한 비디오를 만들었습니다. 스트리트 파이터 스플래시 화면을 검색했습니다. 전체 아이디어는 아래 비디오에 기록됩니다. 나에게 사랑을 주세요. <3


이 화면은 나에게 소름이 돋는다.

애니메이션 로드 중

아케이드 게임 화면에서 부팅 효과를 시뮬레이션하려는 첫 번째 로드 애니메이션을 확인하십시오. 그래서 우리는 2px의 흐림을 수행하고 색상을 보기 좋은 숫자로 색조 회전합니다. 800ms 동안 수행 한 다음 반대 방향으로 500ms 동안 수행하십시오. (나는 우리가 거꾸로 할 수 있다는 것을 몰랐다. 나는 아무것도 모른다.)

/* Stole this idea from twilioquest, it's freaking sick. */
.load {
  animation: load 800ms 500ms backwards;
}

@keyframes load {
  0% {
    filter: blur(2px) hue-rotate(-150deg);
  }
}

아케이드 레트로 스크린 오버레이

단선 이미지를 알았던 사람이라면 향수를 불러일으키고 좋은 화면 오버레이를 만들 것입니다. 문자 그대로 화면에 반투명 배경 이미지를 붙여넣고 pointer-events: none를 사용하여 클릭 효과를 비활성화하여 다른 버튼의 상호 작용을 차단하지 않도록 합니다(현재는 없음).

복고풍 오버레이 효과를 위해 svg 대신 repeating-linear-gradient를 사용하는 것이 좋습니다. (색상을 약간 조정하여 코드를 업데이트했습니다.)

/* Stole this from twilioquest too. ^^ */
body:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: repeating-linear-gradient(#0D122B, #0D122B 2px, #565B73 2px, #565B73 4px);
  opacity: 0.2;
  z-index: 100;
  content: "";
  pointer-events: none;
}

레트로 텍스트

여기서 Google 글꼴은 우리의 가장 친한 친구입니다. Permanent Marker 텍스트와 대부분의 복고풍 게임에서 사용되는 글꼴Street Fighter을 복제하기 위해 찾을 수 있는 가장 가까운 글꼴Press Start 2P을 선택합니다.

소프트웨어 엔지니어

skew 및 rotate 및 translate를 약간 사용하여 Software 및 Engineer 텍스트를 기울입니다. 조금 다르게 조정하고 싶기 때문에 별도의 클래스 이름을 지정합니다.

.title-top {
  transform: skew(-10deg) rotate(-10deg) translateX(-2rem);
}
.title-bottom {
  transform: skew(-10deg) rotate(-10deg) translateX(1rem);
}

배경을 클리핑하면 멋진 것으로 밝혀지고 Safari, Chrome, Firefox, Opera 브라우저에서 잘 작동합니다. 나는 놀랐다.

.title h1 {
  background: -webkit-linear-gradient(rgb(255, 18, 18) 30%, rgb(255, 215, 38));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

그리고 <span>를 사용하여 일부 문자를 약간 더 크게 설정합니다. 그래서 이전의 스플래시 화면과 더 비슷해 보입니다.

푸시 시작 버튼

복고풍 텍스트("PLAYER 1 OR PLAYER 2" 등)는 텍스트 그림자를 사용하여 수행됩니다. 하나의 텍스트 그림자(텍스트 뒤 오른쪽과 아래쪽으로 약간 이동)는 내 생각에 아케이드 스타일 텍스트를 복제하기에 충분합니다. 크레딧 ©을 "팝"으로 만들기 위해 두 개의 텍스트 그림자가 있습니다.

.grey-with-red {
  color: rgb(192, 192, 192);
  text-shadow: 2px 2px 0 rgb(192, 11, 11);
}

.purple-with-blue {
  color: rgb(147, 154, 255);
  text-shadow: 2px 2px 0 rgb(47, 61, 255);
}

.yellow-with-darkyellow {
  color: rgb(226, 179, 24);
  text-shadow: 0 2px 0 rgb(107, 77, 11),
    2px 0 0 rgb(151, 109, 19),
    2px 2px 0 rgb(151, 109, 19);
}

여기 소스 코드:


다음에는 더 많은 상호 작용을 추가하겠습니다. 이제 자야겠어요. 안녕히 계세요.

나를 따르라