바둑판 공개

나는 10 살 때 여전히 사촌이 내 집을 방문하러 왔던 것을 기억합니다. 그는 (여전히) 멋진 아이이며, 자신이 프로그래밍 한 체스 게임 디스크를 가지고 다닐 것입니다. 그의 체스 버전은 모든 단계 후에 보드의 일부가 사라지기 때문에 자신만큼 시원합니다.

더 멋진 것은 무엇입니까? 보드에서 사라지는 모든 조각은 매우 아름다운 그림을 보여줄 것입니다.

같은 아이디어가 정말 멋진 사용자 인터페이스를 만들 수 있다고 생각합니다. 배경을 표시하기 위해 사용자 상호 작용이 필요하지 않을 수도 있고 단순히 애니메이션으로 재생할 수 있습니다. 이것은 나의 최종 결과입니다 :

이 아이디어는 간단하고 그것을 달성하는 다른 많은 방법이 있지만 이것이 내가 따르는 아이디어입니다 ...

먼저 태그를 만들었습니다

이미지는 body 요소의 CSS 또는 특정 크기로 설계된 일부 배경으로 처리 될 수 있습니다.<div> 요소에. 따라서이 문제는 당분간 필요하지 않습니다. 그러나 보드는 재미 있습니다. 이것은 CSS 그리드라는 단어가 작성된 패턴이므로 다른 것들이 많은 그리드 컨테이너로 요소를 사용했습니다.<code><div> 요소. 나는 법적 체스 보드에 얼마나 많은 사각형/사각형이 무엇인지 모르겠습니다. 그래서 나는 단지 얇은 공기에서 숫자 7을 선택한 다음 49 개의 사각형을 얻기 위해 제곱했습니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p>예,이 모든 것을 쓰십시오<code><div> 요소는 고통스럽고 JavaScript가 확실히 도움이 될 수 있습니다. 그러나 내가 실험을하고 개발자의 편리함이 필요한 경우 Haml을 사용하여 도움을 줄 수 있습니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> .그리드 -49. Times %div</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 최종 결과는 동일합니다. 어느 쪽이든, 이것은 스타일링 디자인을 시작하는 데 필요한 모든 표시를 주었다!</p> <h2 id="배경-이미지를-설정하십시오"> 배경 이미지를 설정하십시오</h2> <p> 다시 말하지만, 이것은 전체 공간을 덮는 한 사용 방법에 따라 <code>body 또는 기타 요소의 background-image 로 발생할 수 있습니다. 어쨌든 그리드 컨테이너가 필요하기 때문에 사용하기로 결정했습니다.

 .Checkerboard {
  배경 이미지 : url ( 'walrus.jpg');
  배경 크기 : 덮개;
  /* 이미지를 올바르게 찾으려면 다른 속성이 필요할 수 있습니다*/
}

그라디언트는 래스터 이미지 파일의 일부이지만, :after 같은 의사 요소를 사용하여 body 요소에 어떤 종류의 오버레이로 영리하게 처리 할 수 ​​있습니다. 아아, 이것은 현재 CSS- 트릭이 디자인 한 일반적인 기술입니다.

스타일 그리드

예, CSS 그리드를 사용했습니다. 7 × 7 그리드를 만드는 것은 매우 쉽습니다.

 .Checkerboard {
  배경 이미지 : url ( 'walrus.jpg');
  배경 크기 : 덮개;
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (7, 1fr);
  그리드-템플릿 열 : 반복 (7, 1fr);
}

적어도 내가 그것을 올바르게 이해한다면, 우리가 aspect-ratio 이 널리 지원되는 것을 본 후에는 훨씬 나아질 것이라고 생각합니다. 내 문제는 이제 그리드가 비율을 유지하지 않는다는 것입니다. 이것은 체스 판 블록이 다른 뷰포트 크기로 매우 압박 될 것임을 의미합니다. 좋지 않습니다. 이것이 매우 중요하다면, 우리는이 기간 동안 몇 가지 작은 트릭을 할 수 있지만 그대로 유지하기로 결정했습니다.

스타일 사각형

그들은 흰색과 짙은 회색 사이를 번갈아 가며 :

 .checkerboard> div {
  배경색 : #fff;
}
.checkerboard> div : nth-Child (짝수) {
  배경색 : #2F2F2F;
}

믿거 나 말거나, 우리의 마크와 스타일이 완료되었습니다! 나머지는 ...

애니메이션 제곱

모든 애니메이션은 opacity: 1; opacity: 0; CSS 애니메이션은 이에 적합합니다.

 @keyframes poof {
  에게 {
    불투명도 : 0;
  }
}

기이! 시작 키 프레임을 설정할 필요조차 없습니다! 내가해야 할 일은 정사각형의 애니메이션을 호출하는 것입니다.

 .checkerboard> div {
  애니메이션-이름 : 똥;
  애니메이션 기간 : 0.25s;
  애니메이션 필 모드 : 전진;
  배경 : #ffff;
}

예, 여기서 애니메이션 약어 속성을 사용할 수 있었지만 종종 구성 속성을 개별적으로 분리하는 것이 더 쉽다는 것을 알게됩니다.

animation-fill-mode 왜 필요한지 궁금하다면, forwards 로 설정할 때 애니메이션이 애니메이션의 시작으로 다시 반복되는 것을 방지하기 때문입니다. 다시 말해, 애니메이션이 끝나면 각 정사각형은 opacity: 0; 다시 나타나는 대신.

나는 블록의 animation-delay 인터 리브하기 위해 영리한 일을하고 싶었지만 몇 가지 장애물에 부딪쳐 마침내 100% 기본 CSS를 사용하고 경량 SCS로 전환하려는 노력을 포기하기로 결정했습니다. 이런 식으로 나는 모든 사각형을 반복하고 상당히 표준적인 기능을 사용하여 각 사각형에 대해 부분적으로 이동 한 것을 그릴 수 있습니다. 갑자기 전환하여 죄송합니다! 그것은 여행의 일부일뿐입니다.

 $ 열 : 7;
$ 행 : 7;
$ 셀 : $ 열 * $ 행;

@for $ i from 1 ~ $ 셀 {
  .checkerboard> div : nth-Child (#{$ i}) {
    애니메이션-지연 : (random ($ cells) / $ columns) s;
  }
}

분해합시다 :

• 그리드 열 수 ( $columns ), 그리드 행 수 ( $rows ) 및 총 셀 수 ( $cells )의 변수. 마지막은 처음 두 가지의 산물입니다. 우리가 항상 완벽한 사각형 그리드에서 작동한다는 것을 알고 있다면 지수를 사용하여 셀 수를 계산하여 리팩토링을 수행 할 수 있습니다.
• 그런 다음 1 셀과 $cells 의 각 셀 인스턴스에 대해 총 (이 경우 49)에 대해, 각 개별 정사각형은 :nth-child() 을 기반으로 animation-delay 얻게됩니다. 따라서 첫 번째 광장은 div:nth-child(1) , div:nth-child(2) 등입니다. 데모에서 컴파일 된 CSS를 확인하면 모든 것이 어떻게 확장되는지 알 수 있습니다.

 / * 예, AutoPrefixer가 있습니다 ... */
.checkerboard> div : nth-Child (1) {}
.checkerboard> div : nth-Child (2) {}
/* 등. */

• 마지막으로, animation-delay 1과 총 $cells 의 총 숫자를 $columns 수로 나누고 값 후 초를 추가하는 계산입니다. 이것이 가장 좋은 방법입니까? 나는 모른다. 그것은 무언가를 가지고 놀고 당신에게“옳은”느낌을 찾는 것을 찾는 것입니다. 이것은 나에게 "옳은"느낌입니다.

SCSS에 의지하는 대신 CSS로 창의력을 발휘하고 속성을 사용자 정의하고 싶습니다. 사용자 지정 속성을 좋아하고 클라이언트 측에서 값을 업데이트 할 수있는 반면 SCSS에서 계산 된 값은 계산되어 빌드 시간에 변경되지 않습니다. 다시 말하지만, 이것이 바로 JavaScript로 전환하고 싶은 곳입니다. 그러나 나는 이미 침대를 준비했고 잠을 잘 수있었습니다.

이전에 컴파일 된 CSS를 보면 계산 된 값이 표시됩니다.

 .checkerboard> div : nth-Child (1) {
  애니메이션-지연 : 4.5714285714S;
}

.checkerboard> div : nth-Child (2) {
  애니메이션-지연 : 5.2857142857S;
}

.checkerboard> div : nth-Child (3) {
  애니메이션-지연 : 2.7142857143S;
}

.checkerboard> div : nth-Child (4) {
  애니메이션-지연 : 1.5714285714S;
}

글쎄, 아마도 애니메이션은 선택 사항이어야합니다 ...

어떤 사람들은 움직임과 움직임에 민감하므로 정사각형의 스타일과 애니메이션이 사용자가 좋아하는 경우에만 설정되도록 설정을 변경하는 것이 가장 좋습니다. 이를 달성하기위한 미디어 쿼리가 있습니다!

 @Media 화면 및 (선호-감소 모션 : 예비 회의) {
  .checkerboard> div {
    애니메이션-이름 : 똥;
    애니메이션 기간 : 0.25s;
    애니메이션 필 모드 : 전진;
    배경 : #ffff;
  }
  .checkerboard> div : nth-Child (짝수) {
    배경 : #2F2F2F;
  }
}

그게 다야!